diff --git a/theme/fonts/element-icons.ttf b/theme/fonts/element-icons.ttf new file mode 100644 index 0000000..91b74de Binary files /dev/null and b/theme/fonts/element-icons.ttf differ diff --git a/theme/fonts/element-icons.woff b/theme/fonts/element-icons.woff new file mode 100644 index 0000000..02b9a25 Binary files /dev/null and b/theme/fonts/element-icons.woff differ diff --git a/theme/radio-button.css b/theme/radio-button.css new file mode 100644 index 0000000..6e1a988 --- /dev/null +++ b/theme/radio-button.css @@ -0,0 +1,458 @@ +@charset "UTF-8"; +/* 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 +--------------------------*/ +/* 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 +--------------------------*/ +.el-radio-button { + position: relative; + display: inline-block; + outline: none; } + .el-radio-button__inner { + display: inline-block; + line-height: 1; + white-space: nowrap; + vertical-align: middle; + background: #FFFFFF; + border: 1px solid #DCDFE6; + font-weight: 500; + border-left: 0; + color: #606266; + -webkit-appearance: none; + text-align: center; + -webkit-box-sizing: border-box; + box-sizing: border-box; + outline: none; + margin: 0; + position: relative; + cursor: pointer; + -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + padding: 12px 20px; + font-size: 14px; + border-radius: 0; } + .el-radio-button__inner.is-round { + padding: 12px 20px; } + .el-radio-button__inner:hover { + color: #00B9FF; } + .el-radio-button__inner [class*="el-icon-"] { + line-height: 0.9; } + .el-radio-button__inner [class*="el-icon-"] + span { + margin-left: 5px; } + .el-radio-button:first-child .el-radio-button__inner { + border-left: 1px solid #DCDFE6; + border-radius: 4px 0 0 4px; + -webkit-box-shadow: none !important; + box-shadow: none !important; } + .el-radio-button__orig-radio { + opacity: 0; + outline: none; + position: absolute; + z-index: -1; } + .el-radio-button__orig-radio:checked + .el-radio-button__inner { + color: #FFFFFF; + background-color: #00B9FF; + border-color: #00B9FF; + -webkit-box-shadow: -1px 0 0 0 #00B9FF; + box-shadow: -1px 0 0 0 #00B9FF; } + .el-radio-button__orig-radio:disabled + .el-radio-button__inner { + color: #C0C4CC; + cursor: not-allowed; + background-image: none; + background-color: #FFFFFF; + border-color: #EBEEF5; + -webkit-box-shadow: none; + box-shadow: none; } + .el-radio-button__orig-radio:disabled:checked + .el-radio-button__inner { + background-color: #F2F6FC; } + .el-radio-button:last-child .el-radio-button__inner { + border-radius: 0 4px 4px 0; } + .el-radio-button:first-child:last-child .el-radio-button__inner { + border-radius: 4px; } + .el-radio-button--medium .el-radio-button__inner { + padding: 10px 20px; + font-size: 14px; + border-radius: 0; } + .el-radio-button--medium .el-radio-button__inner.is-round { + padding: 10px 20px; } + .el-radio-button--small .el-radio-button__inner { + padding: 9px 15px; + font-size: 12px; + border-radius: 0; } + .el-radio-button--small .el-radio-button__inner.is-round { + padding: 9px 15px; } + .el-radio-button--mini .el-radio-button__inner { + padding: 7px 15px; + font-size: 12px; + border-radius: 0; } + .el-radio-button--mini .el-radio-button__inner.is-round { + padding: 7px 15px; } + .el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) { + /*获得焦点时 样式提醒*/ + -webkit-box-shadow: 0 0 2px 2px #00B9FF; + box-shadow: 0 0 2px 2px #00B9FF; } diff --git a/theme/radio-group.css b/theme/radio-group.css new file mode 100644 index 0000000..f492eac --- /dev/null +++ b/theme/radio-group.css @@ -0,0 +1,255 @@ +/* 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 +--------------------------*/ +.el-radio-group { + display: inline-block; + line-height: 1; + vertical-align: middle; + font-size: 0; } diff --git a/theme/radio.css b/theme/radio.css new file mode 100644 index 0000000..24c9371 --- /dev/null +++ b/theme/radio.css @@ -0,0 +1,509 @@ +@charset "UTF-8"; +/* 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 +--------------------------*/ +/* 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 +--------------------------*/ +.el-radio { + color: #606266; + font-weight: 500; + line-height: 1; + position: relative; + cursor: pointer; + display: inline-block; + white-space: nowrap; + outline: none; + font-size: 14px; + margin-right: 30px; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; } + .el-radio.is-bordered { + padding: 12px 20px 0 10px; + border-radius: 4px; + border: 1px solid #DCDFE6; + -webkit-box-sizing: border-box; + box-sizing: border-box; + height: 40px; } + .el-radio.is-bordered.is-checked { + border-color: #00B9FF; } + .el-radio.is-bordered.is-disabled { + cursor: not-allowed; + border-color: #EBEEF5; } + .el-radio.is-bordered + .el-radio.is-bordered { + margin-left: 10px; } + .el-radio--medium.is-bordered { + padding: 10px 20px 0 10px; + border-radius: 4px; + height: 36px; } + .el-radio--medium.is-bordered .el-radio__label { + font-size: 14px; } + .el-radio--medium.is-bordered .el-radio__inner { + height: 14px; + width: 14px; } + .el-radio--small.is-bordered { + padding: 8px 15px 0 10px; + border-radius: 3px; + height: 32px; } + .el-radio--small.is-bordered .el-radio__label { + font-size: 12px; } + .el-radio--small.is-bordered .el-radio__inner { + height: 12px; + width: 12px; } + .el-radio--mini.is-bordered { + padding: 6px 15px 0 10px; + border-radius: 3px; + height: 28px; } + .el-radio--mini.is-bordered .el-radio__label { + font-size: 12px; } + .el-radio--mini.is-bordered .el-radio__inner { + height: 12px; + width: 12px; } + .el-radio:last-child { + margin-right: 0; } + .el-radio__input { + white-space: nowrap; + cursor: pointer; + outline: none; + display: inline-block; + line-height: 1; + position: relative; + vertical-align: middle; } + .el-radio__input.is-disabled .el-radio__inner { + background-color: #F5F7FA; + border-color: #E4E7ED; + cursor: not-allowed; } + .el-radio__input.is-disabled .el-radio__inner::after { + cursor: not-allowed; + background-color: #F5F7FA; } + .el-radio__input.is-disabled .el-radio__inner + .el-radio__label { + cursor: not-allowed; } + .el-radio__input.is-disabled.is-checked .el-radio__inner { + background-color: #F5F7FA; + border-color: #E4E7ED; } + .el-radio__input.is-disabled.is-checked .el-radio__inner::after { + background-color: #C0C4CC; } + .el-radio__input.is-disabled + span.el-radio__label { + color: #C0C4CC; + cursor: not-allowed; } + .el-radio__input.is-checked .el-radio__inner { + border-color: #00B9FF; + background: #00B9FF; } + .el-radio__input.is-checked .el-radio__inner::after { + -webkit-transform: translate(-50%, -50%) scale(1); + transform: translate(-50%, -50%) scale(1); } + .el-radio__input.is-checked + .el-radio__label { + color: #00B9FF; } + .el-radio__input.is-focus .el-radio__inner { + border-color: #00B9FF; } + .el-radio__inner { + border: 1px solid #DCDFE6; + border-radius: 100%; + width: 14px; + height: 14px; + background-color: #FFFFFF; + position: relative; + cursor: pointer; + display: inline-block; + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .el-radio__inner:hover { + border-color: #00B9FF; } + .el-radio__inner::after { + width: 4px; + height: 4px; + border-radius: 100%; + background-color: #FFFFFF; + content: ""; + position: absolute; + left: 50%; + top: 50%; + -webkit-transform: translate(-50%, -50%) scale(0); + transform: translate(-50%, -50%) scale(0); + -webkit-transition: -webkit-transform .15s ease-in; + transition: -webkit-transform .15s ease-in; + transition: transform .15s ease-in; + transition: transform .15s ease-in, -webkit-transform .15s ease-in; } + .el-radio__original { + opacity: 0; + outline: none; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: 0; } + .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) { + /*获得焦点时 样式提醒*/ } + .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner { + -webkit-box-shadow: 0 0 2px 2px #00B9FF; + box-shadow: 0 0 2px 2px #00B9FF; } + .el-radio__label { + font-size: 14px; + padding-left: 10px; } diff --git a/theme/rate.css b/theme/rate.css new file mode 100644 index 0000000..8129949 --- /dev/null +++ b/theme/rate.css @@ -0,0 +1,284 @@ +/* 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 +--------------------------*/ +.el-rate { + height: 20px; + line-height: 1; } + .el-rate:focus, .el-rate:active { + outline-width: 0; } + .el-rate__item { + display: inline-block; + position: relative; + font-size: 0; + vertical-align: middle; } + .el-rate__icon { + position: relative; + display: inline-block; + font-size: 18px; + margin-right: 6px; + color: #C0C4CC; + -webkit-transition: .3s; + transition: .3s; } + .el-rate__icon.hover { + -webkit-transform: scale(1.15); + transform: scale(1.15); } + .el-rate__icon .path2 { + position: absolute; + left: 0; + top: 0; } + .el-rate__decimal { + position: absolute; + top: 0; + left: 0; + display: inline-block; + overflow: hidden; } + .el-rate__text { + font-size: 14px; + vertical-align: middle; } diff --git a/theme/reset.css b/theme/reset.css new file mode 100644 index 0000000..0f8a5d3 --- /dev/null +++ b/theme/reset.css @@ -0,0 +1,174 @@ +@charset "UTF-8"; +/* 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 +--------------------------*/ +body { + font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; + font-weight: 400; + font-size: 14px; + color: #000000; + -webkit-font-smoothing: antialiased; } + +a { + color: #00B9FF; + text-decoration: none; } + a:hover, a:focus { + color: #33c7ff; } + a:active { + color: #00a7e6; } + +h1, h2, h3, h4, h5, h6 { + color: #606266; + font-weight: inherit; } + h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { + margin-top: 0; } + h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child { + margin-bottom: 0; } + +h1 { + font-size: 20px; } + +h2 { + font-size: 18px; } + +h3 { + font-size: 16px; } + +h4, h5, h6, p { + font-size: inherit; } + +p { + line-height: 1.8; } + p:first-child { + margin-top: 0; } + p:last-child { + margin-bottom: 0; } + +sup, sub { + font-size: 13px; } + +small { + font-size: 12px; } + +hr { + margin-top: 20px; + margin-bottom: 20px; + border: 0; + border-top: 1px solid #eeeeee; } diff --git a/theme/row.css b/theme/row.css new file mode 100644 index 0000000..6818788 --- /dev/null +++ b/theme/row.css @@ -0,0 +1,289 @@ +/* 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 +--------------------------*/ +/* 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 + -------------------------- */ +.el-row { + position: relative; + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .el-row::before, + .el-row::after { + display: table; + content: ""; } + .el-row::after { + clear: both; } + .el-row--flex { + display: -webkit-box; + display: -ms-flexbox; + display: flex; } + .el-row--flex:before, .el-row--flex:after { + display: none; } + .el-row--flex.is-justify-center { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } + .el-row--flex.is-justify-end { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; } + .el-row--flex.is-justify-space-between { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; } + .el-row--flex.is-justify-space-around { + -ms-flex-pack: distribute; + justify-content: space-around; } + .el-row--flex.is-align-middle { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } + .el-row--flex.is-align-bottom { + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; } diff --git a/theme/scrollbar.css b/theme/scrollbar.css new file mode 100644 index 0000000..f73b67e --- /dev/null +++ b/theme/scrollbar.css @@ -0,0 +1,296 @@ +/* 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 +--------------------------*/ +.el-scrollbar { + overflow: hidden; + position: relative; } + .el-scrollbar:hover > .el-scrollbar__bar, .el-scrollbar:active > .el-scrollbar__bar, .el-scrollbar:focus > .el-scrollbar__bar { + opacity: 1; + -webkit-transition: opacity 340ms ease-out; + transition: opacity 340ms ease-out; } + .el-scrollbar__wrap { + overflow: scroll; + height: 100%; } + .el-scrollbar__wrap--hidden-default { + scrollbar-width: none; } + .el-scrollbar__wrap--hidden-default::-webkit-scrollbar { + width: 0; + height: 0; } + .el-scrollbar__thumb { + position: relative; + display: block; + width: 0; + height: 0; + cursor: pointer; + border-radius: inherit; + background-color: rgba(144, 147, 153, 0.3); + -webkit-transition: .3s background-color; + transition: .3s background-color; } + .el-scrollbar__thumb:hover { + background-color: rgba(144, 147, 153, 0.5); } + .el-scrollbar__bar { + position: absolute; + right: 2px; + bottom: 2px; + z-index: 1; + border-radius: 4px; + opacity: 0; + -webkit-transition: opacity 120ms ease-out; + transition: opacity 120ms ease-out; } + .el-scrollbar__bar.is-vertical { + width: 6px; + top: 2px; } + .el-scrollbar__bar.is-vertical > div { + width: 100%; } + .el-scrollbar__bar.is-horizontal { + height: 6px; + left: 2px; } + .el-scrollbar__bar.is-horizontal > div { + height: 100%; } diff --git a/theme/select-dropdown.css b/theme/select-dropdown.css new file mode 100644 index 0000000..020be71 --- /dev/null +++ b/theme/select-dropdown.css @@ -0,0 +1,623 @@ +/* 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 +--------------------------*/ +/* 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 +--------------------------*/ +.el-popper .popper__arrow, +.el-popper .popper__arrow::after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; } + +.el-popper .popper__arrow { + border-width: 6px; + -webkit-filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); + filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); } + +.el-popper .popper__arrow::after { + content: " "; + border-width: 6px; } + +.el-popper[x-placement^="top"] { + margin-bottom: 12px; } + +.el-popper[x-placement^="top"] .popper__arrow { + bottom: -6px; + left: 50%; + margin-right: 3px; + border-top-color: #EBEEF5; + border-bottom-width: 0; } + .el-popper[x-placement^="top"] .popper__arrow::after { + bottom: 1px; + margin-left: -6px; + border-top-color: #FFFFFF; + border-bottom-width: 0; } + +.el-popper[x-placement^="bottom"] { + margin-top: 12px; } + +.el-popper[x-placement^="bottom"] .popper__arrow { + top: -6px; + left: 50%; + margin-right: 3px; + border-top-width: 0; + border-bottom-color: #EBEEF5; } + .el-popper[x-placement^="bottom"] .popper__arrow::after { + top: 1px; + margin-left: -6px; + border-top-width: 0; + border-bottom-color: #FFFFFF; } + +.el-popper[x-placement^="right"] { + margin-left: 12px; } + +.el-popper[x-placement^="right"] .popper__arrow { + top: 50%; + left: -6px; + margin-bottom: 3px; + border-right-color: #EBEEF5; + border-left-width: 0; } + .el-popper[x-placement^="right"] .popper__arrow::after { + bottom: -6px; + left: 1px; + border-right-color: #FFFFFF; + border-left-width: 0; } + +.el-popper[x-placement^="left"] { + margin-right: 12px; } + +.el-popper[x-placement^="left"] .popper__arrow { + top: 50%; + right: -6px; + margin-bottom: 3px; + border-right-width: 0; + border-left-color: #EBEEF5; } + .el-popper[x-placement^="left"] .popper__arrow::after { + right: 1px; + bottom: -6px; + margin-left: -6px; + border-right-width: 0; + border-left-color: #FFFFFF; } + +.el-select-dropdown { + position: absolute; + z-index: 1001; + border: solid 1px #E4E7ED; + border-radius: 4px; + background-color: #FFFFFF; + -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + -webkit-box-sizing: border-box; + box-sizing: border-box; + margin: 5px 0; } + .el-select-dropdown.is-multiple .el-select-dropdown__item.selected { + color: #00B9FF; + background-color: #FFFFFF; } + .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover { + background-color: #F5F7FA; } + .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after { + position: absolute; + right: 20px; + font-family: 'element-icons'; + content: "\e6da"; + font-size: 12px; + font-weight: bold; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } + .el-select-dropdown .el-scrollbar.is-empty .el-select-dropdown__list { + padding: 0; } + +.el-select-dropdown__empty { + padding: 10px 0; + margin: 0; + text-align: center; + color: #999; + font-size: 14px; } + +.el-select-dropdown__wrap { + max-height: 274px; } + +.el-select-dropdown__list { + list-style: none; + padding: 6px 0; + margin: 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; } diff --git a/theme/select.css b/theme/select.css new file mode 100644 index 0000000..4378e28 --- /dev/null +++ b/theme/select.css @@ -0,0 +1,2825 @@ +/* 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 +--------------------------*/ +/* 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 +--------------------------*/ +/* 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 +--------------------------*/ +.el-popper .popper__arrow, +.el-popper .popper__arrow::after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; } + +.el-popper .popper__arrow { + border-width: 6px; + -webkit-filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); + filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); } + +.el-popper .popper__arrow::after { + content: " "; + border-width: 6px; } + +.el-popper[x-placement^="top"] { + margin-bottom: 12px; } + +.el-popper[x-placement^="top"] .popper__arrow { + bottom: -6px; + left: 50%; + margin-right: 3px; + border-top-color: #EBEEF5; + border-bottom-width: 0; } + .el-popper[x-placement^="top"] .popper__arrow::after { + bottom: 1px; + margin-left: -6px; + border-top-color: #FFFFFF; + border-bottom-width: 0; } + +.el-popper[x-placement^="bottom"] { + margin-top: 12px; } + +.el-popper[x-placement^="bottom"] .popper__arrow { + top: -6px; + left: 50%; + margin-right: 3px; + border-top-width: 0; + border-bottom-color: #EBEEF5; } + .el-popper[x-placement^="bottom"] .popper__arrow::after { + top: 1px; + margin-left: -6px; + border-top-width: 0; + border-bottom-color: #FFFFFF; } + +.el-popper[x-placement^="right"] { + margin-left: 12px; } + +.el-popper[x-placement^="right"] .popper__arrow { + top: 50%; + left: -6px; + margin-bottom: 3px; + border-right-color: #EBEEF5; + border-left-width: 0; } + .el-popper[x-placement^="right"] .popper__arrow::after { + bottom: -6px; + left: 1px; + border-right-color: #FFFFFF; + border-left-width: 0; } + +.el-popper[x-placement^="left"] { + margin-right: 12px; } + +.el-popper[x-placement^="left"] .popper__arrow { + top: 50%; + right: -6px; + margin-bottom: 3px; + border-right-width: 0; + border-left-color: #EBEEF5; } + .el-popper[x-placement^="left"] .popper__arrow::after { + right: 1px; + bottom: -6px; + margin-left: -6px; + border-right-width: 0; + border-left-color: #FFFFFF; } + +.el-select-dropdown { + position: absolute; + z-index: 1001; + border: solid 1px #E4E7ED; + border-radius: 4px; + background-color: #FFFFFF; + -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + -webkit-box-sizing: border-box; + box-sizing: border-box; + margin: 5px 0; } + .el-select-dropdown.is-multiple .el-select-dropdown__item.selected { + color: #00B9FF; + background-color: #FFFFFF; } + .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover { + background-color: #F5F7FA; } + .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after { + position: absolute; + right: 20px; + font-family: 'element-icons'; + content: "\e6da"; + font-size: 12px; + font-weight: bold; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } + .el-select-dropdown .el-scrollbar.is-empty .el-select-dropdown__list { + padding: 0; } + +.el-select-dropdown__empty { + padding: 10px 0; + margin: 0; + text-align: center; + color: #999; + font-size: 14px; } + +.el-select-dropdown__wrap { + max-height: 274px; } + +.el-select-dropdown__list { + list-style: none; + padding: 6px 0; + margin: 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; } + +/* 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 +--------------------------*/ +.el-textarea { + position: relative; + display: inline-block; + width: 100%; + vertical-align: bottom; + font-size: 14px; } + .el-textarea__inner { + display: block; + resize: vertical; + padding: 5px 15px; + line-height: 1.5; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + font-size: inherit; + color: #606266; + background-color: #FFFFFF; + background-image: none; + border: 1px solid #DCDFE6; + border-radius: 4px; + -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); } + .el-textarea__inner::-webkit-input-placeholder { + color: #C0C4CC; } + .el-textarea__inner::-moz-placeholder { + color: #C0C4CC; } + .el-textarea__inner::-ms-input-placeholder { + color: #C0C4CC; } + .el-textarea__inner::placeholder { + color: #C0C4CC; } + .el-textarea__inner:hover { + border-color: #C0C4CC; } + .el-textarea__inner:focus { + outline: none; + border-color: #00B9FF; } + .el-textarea .el-input__count { + color: #909399; + background: #FFFFFF; + position: absolute; + font-size: 12px; + bottom: 5px; + right: 10px; } + .el-textarea.is-disabled .el-textarea__inner { + background-color: #F5F7FA; + border-color: #E4E7ED; + color: #C0C4CC; + cursor: not-allowed; } + .el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder { + color: #C0C4CC; } + .el-textarea.is-disabled .el-textarea__inner::-moz-placeholder { + color: #C0C4CC; } + .el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder { + color: #C0C4CC; } + .el-textarea.is-disabled .el-textarea__inner::placeholder { + color: #C0C4CC; } + .el-textarea.is-exceed .el-textarea__inner { + border-color: #F56C6C; } + .el-textarea.is-exceed .el-input__count { + color: #F56C6C; } + +.el-input { + position: relative; + font-size: 14px; + display: inline-block; + width: 100%; } + .el-input::-webkit-scrollbar { + z-index: 11; + width: 6px; } + .el-input::-webkit-scrollbar:horizontal { + height: 6px; } + .el-input::-webkit-scrollbar-thumb { + border-radius: 5px; + width: 6px; + background: #b4bccc; } + .el-input::-webkit-scrollbar-corner { + background: #fff; } + .el-input::-webkit-scrollbar-track { + background: #fff; } + .el-input::-webkit-scrollbar-track-piece { + background: #fff; + width: 6px; } + .el-input .el-input__clear { + color: #C0C4CC; + font-size: 14px; + cursor: pointer; + -webkit-transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); } + .el-input .el-input__clear:hover { + color: #909399; } + .el-input .el-input__count { + height: 100%; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #909399; + font-size: 12px; } + .el-input .el-input__count .el-input__count-inner { + background: #FFFFFF; + line-height: initial; + display: inline-block; + padding: 0 5px; } + .el-input__inner { + -webkit-appearance: none; + background-color: #FFFFFF; + background-image: none; + border-radius: 4px; + border: 1px solid #DCDFE6; + -webkit-box-sizing: border-box; + box-sizing: border-box; + color: #606266; + display: inline-block; + font-size: inherit; + height: 40px; + line-height: 40px; + outline: none; + padding: 0 15px; + -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + width: 100%; } + .el-input__inner::-webkit-input-placeholder { + color: #C0C4CC; } + .el-input__inner::-moz-placeholder { + color: #C0C4CC; } + .el-input__inner::-ms-input-placeholder { + color: #C0C4CC; } + .el-input__inner::placeholder { + color: #C0C4CC; } + .el-input__inner:hover { + border-color: #C0C4CC; } + .el-input__inner:focus { + outline: none; + border-color: #00B9FF; } + .el-input__suffix { + position: absolute; + height: 100%; + right: 5px; + top: 0; + text-align: center; + color: #C0C4CC; + -webkit-transition: all .3s; + transition: all .3s; + pointer-events: none; } + .el-input__suffix-inner { + pointer-events: all; } + .el-input__prefix { + position: absolute; + height: 100%; + left: 5px; + top: 0; + text-align: center; + color: #C0C4CC; + -webkit-transition: all .3s; + transition: all .3s; } + .el-input__icon { + height: 100%; + width: 25px; + text-align: center; + -webkit-transition: all .3s; + transition: all .3s; + line-height: 40px; } + .el-input__icon:after { + content: ''; + height: 100%; + width: 0; + display: inline-block; + vertical-align: middle; } + .el-input__validateIcon { + pointer-events: none; } + .el-input.is-active .el-input__inner { + outline: none; + border-color: #00B9FF; } + .el-input.is-disabled .el-input__inner { + background-color: #F5F7FA; + border-color: #E4E7ED; + color: #C0C4CC; + cursor: not-allowed; } + .el-input.is-disabled .el-input__inner::-webkit-input-placeholder { + color: #C0C4CC; } + .el-input.is-disabled .el-input__inner::-moz-placeholder { + color: #C0C4CC; } + .el-input.is-disabled .el-input__inner::-ms-input-placeholder { + color: #C0C4CC; } + .el-input.is-disabled .el-input__inner::placeholder { + color: #C0C4CC; } + .el-input.is-disabled .el-input__icon { + cursor: not-allowed; } + .el-input.is-exceed .el-input__inner { + border-color: #F56C6C; } + .el-input.is-exceed .el-input__suffix .el-input__count { + color: #F56C6C; } + .el-input--suffix .el-input__inner { + padding-right: 30px; } + .el-input--prefix .el-input__inner { + padding-left: 30px; } + .el-input--medium { + font-size: 14px; } + .el-input--medium .el-input__inner { + height: 36px; + line-height: 36px; } + .el-input--medium .el-input__icon { + line-height: 36px; } + .el-input--small { + font-size: 13px; } + .el-input--small .el-input__inner { + height: 32px; + line-height: 32px; } + .el-input--small .el-input__icon { + line-height: 32px; } + .el-input--mini { + font-size: 12px; } + .el-input--mini .el-input__inner { + height: 28px; + line-height: 28px; } + .el-input--mini .el-input__icon { + line-height: 28px; } + +.el-input-group { + line-height: normal; + display: inline-table; + width: 100%; + border-collapse: separate; + border-spacing: 0; } + .el-input-group > .el-input__inner { + vertical-align: middle; + display: table-cell; } + .el-input-group__append, .el-input-group__prepend { + background-color: #F5F7FA; + color: #909399; + vertical-align: middle; + display: table-cell; + position: relative; + border: 1px solid #DCDFE6; + border-radius: 4px; + padding: 0 20px; + width: 1px; + white-space: nowrap; } + .el-input-group__append:focus, .el-input-group__prepend:focus { + outline: none; } + .el-input-group__append .el-select, + .el-input-group__append .el-button, .el-input-group__prepend .el-select, + .el-input-group__prepend .el-button { + display: inline-block; + margin: -10px -20px; } + .el-input-group__append button.el-button, + .el-input-group__append div.el-select .el-input__inner, + .el-input-group__append div.el-select:hover .el-input__inner, .el-input-group__prepend button.el-button, + .el-input-group__prepend div.el-select .el-input__inner, + .el-input-group__prepend div.el-select:hover .el-input__inner { + border-color: transparent; + background-color: transparent; + color: inherit; + border-top: 0; + border-bottom: 0; } + .el-input-group__append .el-button, + .el-input-group__append .el-input, .el-input-group__prepend .el-button, + .el-input-group__prepend .el-input { + font-size: inherit; } + .el-input-group__prepend { + border-right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + .el-input-group__append { + border-left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + .el-input-group--prepend .el-input__inner { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + .el-input-group--prepend .el-select .el-input.is-focus .el-input__inner { + border-color: transparent; } + .el-input-group--append .el-input__inner { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + .el-input-group--append .el-select .el-input.is-focus .el-input__inner { + border-color: transparent; } + +/** disalbe default clear on IE */ +.el-input__inner::-ms-clear { + display: none; + width: 0; + height: 0; } + +/* 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 +--------------------------*/ +.el-tag { + background-color: #e6f8ff; + border-color: #ccf1ff; + color: #00b9ff; + display: inline-block; + height: 32px; + padding: 0 10px; + line-height: 30px; + font-size: 12px; + color: #00B9FF; + border-width: 1px; + border-style: solid; + border-radius: 4px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + white-space: nowrap; } + .el-tag.is-hit { + border-color: #00B9FF; } + .el-tag .el-tag__close { + color: #00b9ff; } + .el-tag .el-tag__close:hover { + color: #FFFFFF; + background-color: #00b9ff; } + .el-tag.el-tag--info { + background-color: #f4f4f5; + border-color: #e9e9eb; + color: #909399; } + .el-tag.el-tag--info.is-hit { + border-color: #909399; } + .el-tag.el-tag--info .el-tag__close { + color: #909399; } + .el-tag.el-tag--info .el-tag__close:hover { + color: #FFFFFF; + background-color: #909399; } + .el-tag.el-tag--success { + background-color: #f0f9eb; + border-color: #e1f3d8; + color: #67c23a; } + .el-tag.el-tag--success.is-hit { + border-color: #67C23A; } + .el-tag.el-tag--success .el-tag__close { + color: #67c23a; } + .el-tag.el-tag--success .el-tag__close:hover { + color: #FFFFFF; + background-color: #67c23a; } + .el-tag.el-tag--warning { + background-color: #fdf6ec; + border-color: #faecd8; + color: #e6a23c; } + .el-tag.el-tag--warning.is-hit { + border-color: #E6A23C; } + .el-tag.el-tag--warning .el-tag__close { + color: #e6a23c; } + .el-tag.el-tag--warning .el-tag__close:hover { + color: #FFFFFF; + background-color: #e6a23c; } + .el-tag.el-tag--danger { + background-color: #fef0f0; + border-color: #fde2e2; + color: #f56c6c; } + .el-tag.el-tag--danger.is-hit { + border-color: #F56C6C; } + .el-tag.el-tag--danger .el-tag__close { + color: #f56c6c; } + .el-tag.el-tag--danger .el-tag__close:hover { + color: #FFFFFF; + background-color: #f56c6c; } + .el-tag .el-icon-close { + border-radius: 50%; + text-align: center; + position: relative; + cursor: pointer; + font-size: 12px; + height: 16px; + width: 16px; + line-height: 16px; + vertical-align: middle; + top: -1px; + right: -5px; } + .el-tag .el-icon-close::before { + display: block; } + .el-tag--dark { + background-color: #00b9ff; + border-color: #00b9ff; + color: white; } + .el-tag--dark.is-hit { + border-color: #00B9FF; } + .el-tag--dark .el-tag__close { + color: white; } + .el-tag--dark .el-tag__close:hover { + color: #FFFFFF; + background-color: #33c7ff; } + .el-tag--dark.el-tag--info { + background-color: #909399; + border-color: #909399; + color: white; } + .el-tag--dark.el-tag--info.is-hit { + border-color: #909399; } + .el-tag--dark.el-tag--info .el-tag__close { + color: white; } + .el-tag--dark.el-tag--info .el-tag__close:hover { + color: #FFFFFF; + background-color: #a6a9ad; } + .el-tag--dark.el-tag--success { + background-color: #67c23a; + border-color: #67c23a; + color: white; } + .el-tag--dark.el-tag--success.is-hit { + border-color: #67C23A; } + .el-tag--dark.el-tag--success .el-tag__close { + color: white; } + .el-tag--dark.el-tag--success .el-tag__close:hover { + color: #FFFFFF; + background-color: #85ce61; } + .el-tag--dark.el-tag--warning { + background-color: #e6a23c; + border-color: #e6a23c; + color: white; } + .el-tag--dark.el-tag--warning.is-hit { + border-color: #E6A23C; } + .el-tag--dark.el-tag--warning .el-tag__close { + color: white; } + .el-tag--dark.el-tag--warning .el-tag__close:hover { + color: #FFFFFF; + background-color: #ebb563; } + .el-tag--dark.el-tag--danger { + background-color: #f56c6c; + border-color: #f56c6c; + color: white; } + .el-tag--dark.el-tag--danger.is-hit { + border-color: #F56C6C; } + .el-tag--dark.el-tag--danger .el-tag__close { + color: white; } + .el-tag--dark.el-tag--danger .el-tag__close:hover { + color: #FFFFFF; + background-color: #f78989; } + .el-tag--plain { + background-color: white; + border-color: #99e3ff; + color: #00b9ff; } + .el-tag--plain.is-hit { + border-color: #00B9FF; } + .el-tag--plain .el-tag__close { + color: #00b9ff; } + .el-tag--plain .el-tag__close:hover { + color: #FFFFFF; + background-color: #00b9ff; } + .el-tag--plain.el-tag--info { + background-color: white; + border-color: #d3d4d6; + color: #909399; } + .el-tag--plain.el-tag--info.is-hit { + border-color: #909399; } + .el-tag--plain.el-tag--info .el-tag__close { + color: #909399; } + .el-tag--plain.el-tag--info .el-tag__close:hover { + color: #FFFFFF; + background-color: #909399; } + .el-tag--plain.el-tag--success { + background-color: white; + border-color: #c2e7b0; + color: #67c23a; } + .el-tag--plain.el-tag--success.is-hit { + border-color: #67C23A; } + .el-tag--plain.el-tag--success .el-tag__close { + color: #67c23a; } + .el-tag--plain.el-tag--success .el-tag__close:hover { + color: #FFFFFF; + background-color: #67c23a; } + .el-tag--plain.el-tag--warning { + background-color: white; + border-color: #f5dab1; + color: #e6a23c; } + .el-tag--plain.el-tag--warning.is-hit { + border-color: #E6A23C; } + .el-tag--plain.el-tag--warning .el-tag__close { + color: #e6a23c; } + .el-tag--plain.el-tag--warning .el-tag__close:hover { + color: #FFFFFF; + background-color: #e6a23c; } + .el-tag--plain.el-tag--danger { + background-color: white; + border-color: #fbc4c4; + color: #f56c6c; } + .el-tag--plain.el-tag--danger.is-hit { + border-color: #F56C6C; } + .el-tag--plain.el-tag--danger .el-tag__close { + color: #f56c6c; } + .el-tag--plain.el-tag--danger .el-tag__close:hover { + color: #FFFFFF; + background-color: #f56c6c; } + .el-tag--medium { + height: 28px; + line-height: 26px; } + .el-tag--medium .el-icon-close { + -webkit-transform: scale(0.8); + transform: scale(0.8); } + .el-tag--small { + height: 24px; + padding: 0 8px; + line-height: 22px; } + .el-tag--small .el-icon-close { + -webkit-transform: scale(0.8); + transform: scale(0.8); } + .el-tag--mini { + height: 20px; + padding: 0 5px; + line-height: 19px; } + .el-tag--mini .el-icon-close { + margin-left: -3px; + -webkit-transform: scale(0.7); + transform: scale(0.7); } + +/* 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 +--------------------------*/ +.el-select-dropdown__item { + font-size: 14px; + padding: 0 20px; + position: relative; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: #606266; + height: 34px; + line-height: 34px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + cursor: pointer; } + .el-select-dropdown__item.is-disabled { + color: #C0C4CC; + cursor: not-allowed; } + .el-select-dropdown__item.is-disabled:hover { + background-color: #FFFFFF; } + .el-select-dropdown__item.hover, .el-select-dropdown__item:hover { + background-color: #F5F7FA; } + .el-select-dropdown__item.selected { + color: #00B9FF; + font-weight: bold; } + +/* 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 +--------------------------*/ +.el-select-group { + margin: 0; + padding: 0; } + .el-select-group__wrap { + position: relative; + list-style: none; + margin: 0; + padding: 0; } + .el-select-group__wrap:not(:last-of-type) { + padding-bottom: 24px; } + .el-select-group__wrap:not(:last-of-type)::after { + content: ''; + position: absolute; + display: block; + left: 20px; + right: 20px; + bottom: 12px; + height: 1px; + background: #E4E7ED; } + .el-select-group__title { + padding-left: 20px; + font-size: 12px; + color: #909399; + line-height: 30px; } + .el-select-group .el-select-dropdown__item { + padding-left: 20px; } + +/* 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 +--------------------------*/ +.el-scrollbar { + overflow: hidden; + position: relative; } + .el-scrollbar:hover > .el-scrollbar__bar, .el-scrollbar:active > .el-scrollbar__bar, .el-scrollbar:focus > .el-scrollbar__bar { + opacity: 1; + -webkit-transition: opacity 340ms ease-out; + transition: opacity 340ms ease-out; } + .el-scrollbar__wrap { + overflow: scroll; + height: 100%; } + .el-scrollbar__wrap--hidden-default { + scrollbar-width: none; } + .el-scrollbar__wrap--hidden-default::-webkit-scrollbar { + width: 0; + height: 0; } + .el-scrollbar__thumb { + position: relative; + display: block; + width: 0; + height: 0; + cursor: pointer; + border-radius: inherit; + background-color: rgba(144, 147, 153, 0.3); + -webkit-transition: .3s background-color; + transition: .3s background-color; } + .el-scrollbar__thumb:hover { + background-color: rgba(144, 147, 153, 0.5); } + .el-scrollbar__bar { + position: absolute; + right: 2px; + bottom: 2px; + z-index: 1; + border-radius: 4px; + opacity: 0; + -webkit-transition: opacity 120ms ease-out; + transition: opacity 120ms ease-out; } + .el-scrollbar__bar.is-vertical { + width: 6px; + top: 2px; } + .el-scrollbar__bar.is-vertical > div { + width: 100%; } + .el-scrollbar__bar.is-horizontal { + height: 6px; + left: 2px; } + .el-scrollbar__bar.is-horizontal > div { + height: 100%; } + +.el-select { + display: inline-block; + position: relative; } + .el-select .el-select__tags +> span { + display: contents; } + .el-select:hover .el-input__inner { + border-color: #C0C4CC; } + .el-select .el-input__inner { + cursor: pointer; + padding-right: 35px; } + .el-select .el-input__inner:focus { + border-color: #00B9FF; } + .el-select .el-input .el-select__caret { + color: #C0C4CC; + font-size: 14px; + -webkit-transition: -webkit-transform .3s; + transition: -webkit-transform .3s; + transition: transform .3s; + transition: transform .3s, -webkit-transform .3s; + -webkit-transform: rotateZ(180deg); + transform: rotateZ(180deg); + cursor: pointer; } + .el-select .el-input .el-select__caret.is-reverse { + -webkit-transform: rotateZ(0deg); + transform: rotateZ(0deg); } + .el-select .el-input .el-select__caret.is-show-close { + font-size: 14px; + text-align: center; + -webkit-transform: rotateZ(180deg); + transform: rotateZ(180deg); + border-radius: 100%; + color: #C0C4CC; + -webkit-transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); } + .el-select .el-input .el-select__caret.is-show-close:hover { + color: #909399; } + .el-select .el-input.is-disabled .el-input__inner { + cursor: not-allowed; } + .el-select .el-input.is-disabled .el-input__inner:hover { + border-color: #E4E7ED; } + .el-select .el-input.is-focus .el-input__inner { + border-color: #00B9FF; } + .el-select > .el-input { + display: block; } + .el-select__input { + border: none; + outline: none; + padding: 0; + margin-left: 15px; + color: #666; + font-size: 14px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + height: 28px; + background-color: transparent; } + .el-select__input.is-mini { + height: 14px; } + .el-select__close { + cursor: pointer; + position: absolute; + top: 8px; + z-index: 1000; + right: 25px; + color: #C0C4CC; + line-height: 18px; + font-size: 14px; } + .el-select__close:hover { + color: #909399; } + .el-select__tags { + position: absolute; + line-height: normal; + white-space: normal; + z-index: 1; + top: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } + .el-select .el-tag__close { + margin-top: -2px; } + .el-select .el-tag { + -webkit-box-sizing: border-box; + box-sizing: border-box; + border-color: transparent; + margin: 2px 0 2px 6px; + background-color: #f0f2f5; } + .el-select .el-tag__close.el-icon-close { + background-color: #C0C4CC; + right: -7px; + top: 0; + color: #FFFFFF; } + .el-select .el-tag__close.el-icon-close:hover { + background-color: #909399; } + .el-select .el-tag__close.el-icon-close::before { + display: block; + -webkit-transform: translate(0, 0.5px); + transform: translate(0, 0.5px); } diff --git a/theme/slider.css b/theme/slider.css new file mode 100644 index 0000000..4236e3f --- /dev/null +++ b/theme/slider.css @@ -0,0 +1,1677 @@ +/* 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 + -------------------------- */ +/* 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 +--------------------------*/ +/* 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 +--------------------------*/ +.el-textarea { + position: relative; + display: inline-block; + width: 100%; + vertical-align: bottom; + font-size: 14px; } + .el-textarea__inner { + display: block; + resize: vertical; + padding: 5px 15px; + line-height: 1.5; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + font-size: inherit; + color: #606266; + background-color: #FFFFFF; + background-image: none; + border: 1px solid #DCDFE6; + border-radius: 4px; + -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); } + .el-textarea__inner::-webkit-input-placeholder { + color: #C0C4CC; } + .el-textarea__inner::-moz-placeholder { + color: #C0C4CC; } + .el-textarea__inner::-ms-input-placeholder { + color: #C0C4CC; } + .el-textarea__inner::placeholder { + color: #C0C4CC; } + .el-textarea__inner:hover { + border-color: #C0C4CC; } + .el-textarea__inner:focus { + outline: none; + border-color: #00B9FF; } + .el-textarea .el-input__count { + color: #909399; + background: #FFFFFF; + position: absolute; + font-size: 12px; + bottom: 5px; + right: 10px; } + .el-textarea.is-disabled .el-textarea__inner { + background-color: #F5F7FA; + border-color: #E4E7ED; + color: #C0C4CC; + cursor: not-allowed; } + .el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder { + color: #C0C4CC; } + .el-textarea.is-disabled .el-textarea__inner::-moz-placeholder { + color: #C0C4CC; } + .el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder { + color: #C0C4CC; } + .el-textarea.is-disabled .el-textarea__inner::placeholder { + color: #C0C4CC; } + .el-textarea.is-exceed .el-textarea__inner { + border-color: #F56C6C; } + .el-textarea.is-exceed .el-input__count { + color: #F56C6C; } + +.el-input { + position: relative; + font-size: 14px; + display: inline-block; + width: 100%; } + .el-input::-webkit-scrollbar { + z-index: 11; + width: 6px; } + .el-input::-webkit-scrollbar:horizontal { + height: 6px; } + .el-input::-webkit-scrollbar-thumb { + border-radius: 5px; + width: 6px; + background: #b4bccc; } + .el-input::-webkit-scrollbar-corner { + background: #fff; } + .el-input::-webkit-scrollbar-track { + background: #fff; } + .el-input::-webkit-scrollbar-track-piece { + background: #fff; + width: 6px; } + .el-input .el-input__clear { + color: #C0C4CC; + font-size: 14px; + cursor: pointer; + -webkit-transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); } + .el-input .el-input__clear:hover { + color: #909399; } + .el-input .el-input__count { + height: 100%; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #909399; + font-size: 12px; } + .el-input .el-input__count .el-input__count-inner { + background: #FFFFFF; + line-height: initial; + display: inline-block; + padding: 0 5px; } + .el-input__inner { + -webkit-appearance: none; + background-color: #FFFFFF; + background-image: none; + border-radius: 4px; + border: 1px solid #DCDFE6; + -webkit-box-sizing: border-box; + box-sizing: border-box; + color: #606266; + display: inline-block; + font-size: inherit; + height: 40px; + line-height: 40px; + outline: none; + padding: 0 15px; + -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + width: 100%; } + .el-input__inner::-webkit-input-placeholder { + color: #C0C4CC; } + .el-input__inner::-moz-placeholder { + color: #C0C4CC; } + .el-input__inner::-ms-input-placeholder { + color: #C0C4CC; } + .el-input__inner::placeholder { + color: #C0C4CC; } + .el-input__inner:hover { + border-color: #C0C4CC; } + .el-input__inner:focus { + outline: none; + border-color: #00B9FF; } + .el-input__suffix { + position: absolute; + height: 100%; + right: 5px; + top: 0; + text-align: center; + color: #C0C4CC; + -webkit-transition: all .3s; + transition: all .3s; + pointer-events: none; } + .el-input__suffix-inner { + pointer-events: all; } + .el-input__prefix { + position: absolute; + height: 100%; + left: 5px; + top: 0; + text-align: center; + color: #C0C4CC; + -webkit-transition: all .3s; + transition: all .3s; } + .el-input__icon { + height: 100%; + width: 25px; + text-align: center; + -webkit-transition: all .3s; + transition: all .3s; + line-height: 40px; } + .el-input__icon:after { + content: ''; + height: 100%; + width: 0; + display: inline-block; + vertical-align: middle; } + .el-input__validateIcon { + pointer-events: none; } + .el-input.is-active .el-input__inner { + outline: none; + border-color: #00B9FF; } + .el-input.is-disabled .el-input__inner { + background-color: #F5F7FA; + border-color: #E4E7ED; + color: #C0C4CC; + cursor: not-allowed; } + .el-input.is-disabled .el-input__inner::-webkit-input-placeholder { + color: #C0C4CC; } + .el-input.is-disabled .el-input__inner::-moz-placeholder { + color: #C0C4CC; } + .el-input.is-disabled .el-input__inner::-ms-input-placeholder { + color: #C0C4CC; } + .el-input.is-disabled .el-input__inner::placeholder { + color: #C0C4CC; } + .el-input.is-disabled .el-input__icon { + cursor: not-allowed; } + .el-input.is-exceed .el-input__inner { + border-color: #F56C6C; } + .el-input.is-exceed .el-input__suffix .el-input__count { + color: #F56C6C; } + .el-input--suffix .el-input__inner { + padding-right: 30px; } + .el-input--prefix .el-input__inner { + padding-left: 30px; } + .el-input--medium { + font-size: 14px; } + .el-input--medium .el-input__inner { + height: 36px; + line-height: 36px; } + .el-input--medium .el-input__icon { + line-height: 36px; } + .el-input--small { + font-size: 13px; } + .el-input--small .el-input__inner { + height: 32px; + line-height: 32px; } + .el-input--small .el-input__icon { + line-height: 32px; } + .el-input--mini { + font-size: 12px; } + .el-input--mini .el-input__inner { + height: 28px; + line-height: 28px; } + .el-input--mini .el-input__icon { + line-height: 28px; } + +.el-input-group { + line-height: normal; + display: inline-table; + width: 100%; + border-collapse: separate; + border-spacing: 0; } + .el-input-group > .el-input__inner { + vertical-align: middle; + display: table-cell; } + .el-input-group__append, .el-input-group__prepend { + background-color: #F5F7FA; + color: #909399; + vertical-align: middle; + display: table-cell; + position: relative; + border: 1px solid #DCDFE6; + border-radius: 4px; + padding: 0 20px; + width: 1px; + white-space: nowrap; } + .el-input-group__append:focus, .el-input-group__prepend:focus { + outline: none; } + .el-input-group__append .el-select, + .el-input-group__append .el-button, .el-input-group__prepend .el-select, + .el-input-group__prepend .el-button { + display: inline-block; + margin: -10px -20px; } + .el-input-group__append button.el-button, + .el-input-group__append div.el-select .el-input__inner, + .el-input-group__append div.el-select:hover .el-input__inner, .el-input-group__prepend button.el-button, + .el-input-group__prepend div.el-select .el-input__inner, + .el-input-group__prepend div.el-select:hover .el-input__inner { + border-color: transparent; + background-color: transparent; + color: inherit; + border-top: 0; + border-bottom: 0; } + .el-input-group__append .el-button, + .el-input-group__append .el-input, .el-input-group__prepend .el-button, + .el-input-group__prepend .el-input { + font-size: inherit; } + .el-input-group__prepend { + border-right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + .el-input-group__append { + border-left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + .el-input-group--prepend .el-input__inner { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + .el-input-group--prepend .el-select .el-input.is-focus .el-input__inner { + border-color: transparent; } + .el-input-group--append .el-input__inner { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + .el-input-group--append .el-select .el-input.is-focus .el-input__inner { + border-color: transparent; } + +/** disalbe default clear on IE */ +.el-input__inner::-ms-clear { + display: none; + width: 0; + height: 0; } + +.el-input-number { + position: relative; + display: inline-block; + width: 180px; + line-height: 38px; } + .el-input-number .el-input { + display: block; } + .el-input-number .el-input__inner { + -webkit-appearance: none; + padding-left: 50px; + padding-right: 50px; + text-align: center; } + .el-input-number__increase, .el-input-number__decrease { + position: absolute; + z-index: 1; + top: 1px; + width: 40px; + height: auto; + text-align: center; + background: #F5F7FA; + color: #606266; + cursor: pointer; + font-size: 13px; } + .el-input-number__increase:hover, .el-input-number__decrease:hover { + color: #00B9FF; } + .el-input-number__increase:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled), .el-input-number__decrease:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) { + border-color: #00B9FF; } + .el-input-number__increase.is-disabled, .el-input-number__decrease.is-disabled { + color: #C0C4CC; + cursor: not-allowed; } + .el-input-number__increase { + right: 1px; + border-radius: 0 4px 4px 0; + border-left: 1px solid #DCDFE6; } + .el-input-number__decrease { + left: 1px; + border-radius: 4px 0 0 4px; + border-right: 1px solid #DCDFE6; } + .el-input-number.is-disabled .el-input-number__increase, .el-input-number.is-disabled .el-input-number__decrease { + border-color: #E4E7ED; + color: #E4E7ED; } + .el-input-number.is-disabled .el-input-number__increase:hover, .el-input-number.is-disabled .el-input-number__decrease:hover { + color: #E4E7ED; + cursor: not-allowed; } + .el-input-number--medium { + width: 200px; + line-height: 34px; } + .el-input-number--medium .el-input-number__increase, .el-input-number--medium .el-input-number__decrease { + width: 36px; + font-size: 14px; } + .el-input-number--medium .el-input__inner { + padding-left: 43px; + padding-right: 43px; } + .el-input-number--small { + width: 130px; + line-height: 30px; } + .el-input-number--small .el-input-number__increase, .el-input-number--small .el-input-number__decrease { + width: 32px; + font-size: 13px; } + .el-input-number--small .el-input-number__increase [class*=el-icon], .el-input-number--small .el-input-number__decrease [class*=el-icon] { + -webkit-transform: scale(0.9); + transform: scale(0.9); } + .el-input-number--small .el-input__inner { + padding-left: 39px; + padding-right: 39px; } + .el-input-number--mini { + width: 130px; + line-height: 26px; } + .el-input-number--mini .el-input-number__increase, .el-input-number--mini .el-input-number__decrease { + width: 28px; + font-size: 12px; } + .el-input-number--mini .el-input-number__increase [class*=el-icon], .el-input-number--mini .el-input-number__decrease [class*=el-icon] { + -webkit-transform: scale(0.8); + transform: scale(0.8); } + .el-input-number--mini .el-input__inner { + padding-left: 35px; + padding-right: 35px; } + .el-input-number.is-without-controls .el-input__inner { + padding-left: 15px; + padding-right: 15px; } + .el-input-number.is-controls-right .el-input__inner { + padding-left: 15px; + padding-right: 50px; } + .el-input-number.is-controls-right .el-input-number__increase, .el-input-number.is-controls-right .el-input-number__decrease { + height: auto; + line-height: 19px; } + .el-input-number.is-controls-right .el-input-number__increase [class*=el-icon], .el-input-number.is-controls-right .el-input-number__decrease [class*=el-icon] { + -webkit-transform: scale(0.8); + transform: scale(0.8); } + .el-input-number.is-controls-right .el-input-number__increase { + border-radius: 0 4px 0 0; + border-bottom: 1px solid #DCDFE6; } + .el-input-number.is-controls-right .el-input-number__decrease { + right: 1px; + bottom: 1px; + top: auto; + left: auto; + border-right: none; + border-left: 1px solid #DCDFE6; + border-radius: 0 0 4px 0; } + .el-input-number.is-controls-right[class*=medium] [class*=increase], .el-input-number.is-controls-right[class*=medium] [class*=decrease] { + line-height: 17px; } + .el-input-number.is-controls-right[class*=small] [class*=increase], .el-input-number.is-controls-right[class*=small] [class*=decrease] { + line-height: 15px; } + .el-input-number.is-controls-right[class*=mini] [class*=increase], .el-input-number.is-controls-right[class*=mini] [class*=decrease] { + line-height: 13px; } + +/* 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 +--------------------------*/ +.el-tooltip:focus:not(.focusing), .el-tooltip:focus:hover { + outline-width: 0; } + +.el-tooltip__popper { + position: absolute; + border-radius: 4px; + padding: 10px; + z-index: 2000; + font-size: 12px; + line-height: 1.2; + min-width: 10px; + word-wrap: break-word; } + .el-tooltip__popper .popper__arrow, + .el-tooltip__popper .popper__arrow::after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; } + .el-tooltip__popper .popper__arrow { + border-width: 6px; } + .el-tooltip__popper .popper__arrow::after { + content: " "; + border-width: 5px; } + .el-tooltip__popper[x-placement^="top"] { + margin-bottom: 12px; } + .el-tooltip__popper[x-placement^="top"] .popper__arrow { + bottom: -6px; + border-top-color: #303133; + border-bottom-width: 0; } + .el-tooltip__popper[x-placement^="top"] .popper__arrow::after { + bottom: 1px; + margin-left: -5px; + border-top-color: #303133; + border-bottom-width: 0; } + .el-tooltip__popper[x-placement^="bottom"] { + margin-top: 12px; } + .el-tooltip__popper[x-placement^="bottom"] .popper__arrow { + top: -6px; + border-top-width: 0; + border-bottom-color: #303133; } + .el-tooltip__popper[x-placement^="bottom"] .popper__arrow::after { + top: 1px; + margin-left: -5px; + border-top-width: 0; + border-bottom-color: #303133; } + .el-tooltip__popper[x-placement^="right"] { + margin-left: 12px; } + .el-tooltip__popper[x-placement^="right"] .popper__arrow { + left: -6px; + border-right-color: #303133; + border-left-width: 0; } + .el-tooltip__popper[x-placement^="right"] .popper__arrow::after { + bottom: -5px; + left: 1px; + border-right-color: #303133; + border-left-width: 0; } + .el-tooltip__popper[x-placement^="left"] { + margin-right: 12px; } + .el-tooltip__popper[x-placement^="left"] .popper__arrow { + right: -6px; + border-right-width: 0; + border-left-color: #303133; } + .el-tooltip__popper[x-placement^="left"] .popper__arrow::after { + right: 1px; + bottom: -5px; + margin-left: -5px; + border-right-width: 0; + border-left-color: #303133; } + .el-tooltip__popper.is-dark { + background: #303133; + color: #FFFFFF; } + .el-tooltip__popper.is-light { + background: #FFFFFF; + border: 1px solid #303133; } + .el-tooltip__popper.is-light[x-placement^="top"] .popper__arrow { + border-top-color: #303133; } + .el-tooltip__popper.is-light[x-placement^="top"] .popper__arrow::after { + border-top-color: #FFFFFF; } + .el-tooltip__popper.is-light[x-placement^="bottom"] .popper__arrow { + border-bottom-color: #303133; } + .el-tooltip__popper.is-light[x-placement^="bottom"] .popper__arrow::after { + border-bottom-color: #FFFFFF; } + .el-tooltip__popper.is-light[x-placement^="left"] .popper__arrow { + border-left-color: #303133; } + .el-tooltip__popper.is-light[x-placement^="left"] .popper__arrow::after { + border-left-color: #FFFFFF; } + .el-tooltip__popper.is-light[x-placement^="right"] .popper__arrow { + border-right-color: #303133; } + .el-tooltip__popper.is-light[x-placement^="right"] .popper__arrow::after { + border-right-color: #FFFFFF; } + +/* 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 +--------------------------*/ +.el-slider::before, +.el-slider::after { + display: table; + content: ""; } + +.el-slider::after { + clear: both; } + +.el-slider__runway { + width: 100%; + height: 6px; + margin: 16px 0; + background-color: #E4E7ED; + border-radius: 3px; + position: relative; + cursor: pointer; + vertical-align: middle; } + .el-slider__runway.show-input { + margin-right: 160px; + width: auto; } + .el-slider__runway.disabled { + cursor: default; } + .el-slider__runway.disabled .el-slider__bar { + background-color: #C0C4CC; } + .el-slider__runway.disabled .el-slider__button { + border-color: #C0C4CC; } + .el-slider__runway.disabled .el-slider__button-wrapper:hover, .el-slider__runway.disabled .el-slider__button-wrapper.hover { + cursor: not-allowed; } + .el-slider__runway.disabled .el-slider__button-wrapper.dragging { + cursor: not-allowed; } + .el-slider__runway.disabled .el-slider__button:hover, .el-slider__runway.disabled .el-slider__button.hover, .el-slider__runway.disabled .el-slider__button.dragging { + -webkit-transform: scale(1); + transform: scale(1); } + .el-slider__runway.disabled .el-slider__button:hover, .el-slider__runway.disabled .el-slider__button.hover { + cursor: not-allowed; } + .el-slider__runway.disabled .el-slider__button.dragging { + cursor: not-allowed; } + +.el-slider__input { + float: right; + margin-top: 3px; + width: 130px; } + .el-slider__input.el-input-number--mini { + margin-top: 5px; } + .el-slider__input.el-input-number--medium { + margin-top: 0; } + .el-slider__input.el-input-number--large { + margin-top: -2px; } + +.el-slider__bar { + height: 6px; + background-color: #00B9FF; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + position: absolute; } + +.el-slider__button-wrapper { + height: 36px; + width: 36px; + position: absolute; + z-index: 1001; + top: -15px; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + background-color: transparent; + text-align: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + line-height: normal; } + .el-slider__button-wrapper::after { + display: inline-block; + content: ""; + height: 100%; + vertical-align: middle; } + .el-slider__button-wrapper .el-tooltip { + vertical-align: middle; + display: inline-block; } + .el-slider__button-wrapper:hover, .el-slider__button-wrapper.hover { + cursor: -webkit-grab; + cursor: grab; } + .el-slider__button-wrapper.dragging { + cursor: -webkit-grabbing; + cursor: grabbing; } + +.el-slider__button { + width: 16px; + height: 16px; + border: solid 2px #00B9FF; + background-color: #FFFFFF; + border-radius: 50%; + -webkit-transition: .2s; + transition: .2s; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + .el-slider__button:hover, .el-slider__button.hover, .el-slider__button.dragging { + -webkit-transform: scale(1.2); + transform: scale(1.2); } + .el-slider__button:hover, .el-slider__button.hover { + cursor: -webkit-grab; + cursor: grab; } + .el-slider__button.dragging { + cursor: -webkit-grabbing; + cursor: grabbing; } + +.el-slider__stop { + position: absolute; + height: 6px; + width: 6px; + border-radius: 100%; + background-color: #FFFFFF; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); } + +.el-slider__marks { + top: 0; + left: 12px; + width: 18px; + height: 100%; } + .el-slider__marks-text { + position: absolute; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + font-size: 14px; + color: #909399; + margin-top: 15px; } + +.el-slider.is-vertical { + position: relative; } + .el-slider.is-vertical .el-slider__runway { + width: 6px; + height: 100%; + margin: 0 16px; } + .el-slider.is-vertical .el-slider__bar { + width: 6px; + height: auto; + border-radius: 0 0 3px 3px; } + .el-slider.is-vertical .el-slider__button-wrapper { + top: auto; + left: -15px; + -webkit-transform: translateY(50%); + transform: translateY(50%); } + .el-slider.is-vertical .el-slider__stop { + -webkit-transform: translateY(50%); + transform: translateY(50%); } + .el-slider.is-vertical.el-slider--with-input { + padding-bottom: 58px; } + .el-slider.is-vertical.el-slider--with-input .el-slider__input { + overflow: visible; + float: none; + position: absolute; + bottom: 22px; + width: 36px; + margin-top: 15px; } + .el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input__inner { + text-align: center; + padding-left: 5px; + padding-right: 5px; } + .el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__decrease, + .el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__increase { + top: 32px; + margin-top: -1px; + border: 1px solid #DCDFE6; + line-height: 20px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); } + .el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__decrease { + width: 18px; + right: 18px; + border-bottom-left-radius: 4px; } + .el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__increase { + width: 19px; + border-bottom-right-radius: 4px; } + .el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__increase ~ .el-input .el-input__inner { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } + .el-slider.is-vertical.el-slider--with-input .el-slider__input:hover .el-input-number__decrease, + .el-slider.is-vertical.el-slider--with-input .el-slider__input:hover .el-input-number__increase { + border-color: #C0C4CC; } + .el-slider.is-vertical.el-slider--with-input .el-slider__input:active .el-input-number__decrease, + .el-slider.is-vertical.el-slider--with-input .el-slider__input:active .el-input-number__increase { + border-color: #00B9FF; } + .el-slider.is-vertical .el-slider__marks-text { + margin-top: 0; + left: 15px; + -webkit-transform: translateY(50%); + transform: translateY(50%); } diff --git a/theme/spinner.css b/theme/spinner.css new file mode 100644 index 0000000..c856710 --- /dev/null +++ b/theme/spinner.css @@ -0,0 +1,180 @@ +/* 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 + -------------------------- */ +.el-time-spinner { + width: 100%; + white-space: nowrap; } + +.el-spinner { + display: inline-block; + vertical-align: middle; } + +.el-spinner-inner { + -webkit-animation: rotate 2s linear infinite; + animation: rotate 2s linear infinite; + width: 50px; + height: 50px; } + .el-spinner-inner .path { + stroke: #ececec; + stroke-linecap: round; + -webkit-animation: dash 1.5s ease-in-out infinite; + animation: dash 1.5s ease-in-out infinite; } + +@-webkit-keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } + +@keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } + +@-webkit-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; } } + +@keyframes dash { + 0% { + stroke-dasharray: 1, 150; + stroke-dashoffset: 0; } + 50% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -35; } + 100% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -124; } } diff --git a/theme/step.css b/theme/step.css new file mode 100644 index 0000000..ec12b57 --- /dev/null +++ b/theme/step.css @@ -0,0 +1,485 @@ +/* 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 +--------------------------*/ +.el-step { + position: relative; + -ms-flex-negative: 1; + flex-shrink: 1; } + .el-step:last-of-type .el-step__line { + display: none; } + .el-step:last-of-type.is-flex { + -ms-flex-preferred-size: auto !important; + flex-basis: auto !important; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; } + .el-step:last-of-type .el-step__main, .el-step:last-of-type .el-step__description { + padding-right: 0; } + .el-step__head { + position: relative; + width: 100%; } + .el-step__head.is-process { + color: #303133; + border-color: #303133; } + .el-step__head.is-wait { + color: #C0C4CC; + border-color: #C0C4CC; } + .el-step__head.is-success { + color: #67C23A; + border-color: #67C23A; } + .el-step__head.is-error { + color: #F56C6C; + border-color: #F56C6C; } + .el-step__head.is-finish { + color: #00B9FF; + border-color: #00B9FF; } + .el-step__icon { + position: relative; + z-index: 1; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 24px; + height: 24px; + font-size: 14px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + background: #FFFFFF; + -webkit-transition: .15s ease-out; + transition: .15s ease-out; } + .el-step__icon.is-text { + border-radius: 50%; + border: 2px solid; + border-color: inherit; } + .el-step__icon.is-icon { + width: 40px; } + .el-step__icon-inner { + display: inline-block; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + text-align: center; + font-weight: bold; + line-height: 1; + color: inherit; } + .el-step__icon-inner[class*=el-icon]:not(.is-status) { + font-size: 25px; + font-weight: normal; } + .el-step__icon-inner.is-status { + -webkit-transform: translateY(1px); + transform: translateY(1px); } + .el-step__line { + position: absolute; + border-color: inherit; + background-color: #C0C4CC; } + .el-step__line-inner { + display: block; + border-width: 1px; + border-style: solid; + border-color: inherit; + -webkit-transition: .15s ease-out; + transition: .15s ease-out; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 0; + height: 0; } + .el-step__main { + white-space: normal; + text-align: left; } + .el-step__title { + font-size: 16px; + line-height: 38px; } + .el-step__title.is-process { + font-weight: bold; + color: #303133; } + .el-step__title.is-wait { + color: #C0C4CC; } + .el-step__title.is-success { + color: #67C23A; } + .el-step__title.is-error { + color: #F56C6C; } + .el-step__title.is-finish { + color: #00B9FF; } + .el-step__description { + padding-right: 10%; + margin-top: -5px; + font-size: 12px; + line-height: 20px; + font-weight: normal; } + .el-step__description.is-process { + color: #303133; } + .el-step__description.is-wait { + color: #C0C4CC; } + .el-step__description.is-success { + color: #67C23A; } + .el-step__description.is-error { + color: #F56C6C; } + .el-step__description.is-finish { + color: #00B9FF; } + .el-step.is-horizontal { + display: inline-block; } + .el-step.is-horizontal .el-step__line { + height: 2px; + top: 11px; + left: 0; + right: 0; } + .el-step.is-vertical { + display: -webkit-box; + display: -ms-flexbox; + display: flex; } + .el-step.is-vertical .el-step__head { + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + width: 24px; } + .el-step.is-vertical .el-step__main { + padding-left: 10px; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; } + .el-step.is-vertical .el-step__title { + line-height: 24px; + padding-bottom: 8px; } + .el-step.is-vertical .el-step__line { + width: 2px; + top: 0; + bottom: 0; + left: 11px; } + .el-step.is-vertical .el-step__icon.is-icon { + width: 24px; } + .el-step.is-center .el-step__head { + text-align: center; } + .el-step.is-center .el-step__main { + text-align: center; } + .el-step.is-center .el-step__description { + padding-left: 20%; + padding-right: 20%; } + .el-step.is-center .el-step__line { + left: 50%; + right: -50%; } + .el-step.is-simple { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } + .el-step.is-simple .el-step__head { + width: auto; + font-size: 0; + padding-right: 10px; } + .el-step.is-simple .el-step__icon { + background: transparent; + width: 16px; + height: 16px; + font-size: 12px; } + .el-step.is-simple .el-step__icon-inner[class*=el-icon]:not(.is-status) { + font-size: 18px; } + .el-step.is-simple .el-step__icon-inner.is-status { + -webkit-transform: scale(0.8) translateY(1px); + transform: scale(0.8) translateY(1px); } + .el-step.is-simple .el-step__main { + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; } + .el-step.is-simple .el-step__title { + font-size: 16px; + line-height: 20px; } + .el-step.is-simple:not(:last-of-type) .el-step__title { + max-width: 50%; + word-break: break-all; } + .el-step.is-simple .el-step__arrow { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } + .el-step.is-simple .el-step__arrow::before, .el-step.is-simple .el-step__arrow::after { + content: ''; + display: inline-block; + position: absolute; + height: 15px; + width: 1px; + background: #C0C4CC; } + .el-step.is-simple .el-step__arrow::before { + -webkit-transform: rotate(-45deg) translateY(-4px); + transform: rotate(-45deg) translateY(-4px); + -webkit-transform-origin: 0 0; + transform-origin: 0 0; } + .el-step.is-simple .el-step__arrow::after { + -webkit-transform: rotate(45deg) translateY(4px); + transform: rotate(45deg) translateY(4px); + -webkit-transform-origin: 100% 100%; + transform-origin: 100% 100%; } + .el-step.is-simple:last-of-type .el-step__arrow { + display: none; } diff --git a/theme/steps.css b/theme/steps.css new file mode 100644 index 0000000..85c0bb5 --- /dev/null +++ b/theme/steps.css @@ -0,0 +1,146 @@ +/* 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 + -------------------------- */ +.el-steps { + display: -webkit-box; + display: -ms-flexbox; + display: flex; } + .el-steps--simple { + padding: 13px 8%; + border-radius: 4px; + background: #F5F7FA; } + .el-steps--horizontal { + white-space: nowrap; } + .el-steps--vertical { + height: 100%; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column; + flex-flow: column; } diff --git a/theme/submenu.css b/theme/submenu.css new file mode 100644 index 0000000..e69de29 diff --git a/theme/switch.css b/theme/switch.css new file mode 100644 index 0000000..f18d8c6 --- /dev/null +++ b/theme/switch.css @@ -0,0 +1,333 @@ +/* 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 +--------------------------*/ +.el-switch { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: relative; + font-size: 14px; + line-height: 20px; + height: 20px; + vertical-align: middle; } + .el-switch.is-disabled .el-switch__core, + .el-switch.is-disabled .el-switch__label { + cursor: not-allowed; } + .el-switch__label { + -webkit-transition: .2s; + transition: .2s; + height: 20px; + display: inline-block; + font-size: 14px; + font-weight: 500; + cursor: pointer; + vertical-align: middle; + color: #303133; } + .el-switch__label.is-active { + color: #00B9FF; } + .el-switch__label--left { + margin-right: 10px; } + .el-switch__label--right { + margin-left: 10px; } + .el-switch__label * { + line-height: 1; + font-size: 14px; + display: inline-block; } + .el-switch__input { + position: absolute; + width: 0; + height: 0; + opacity: 0; + margin: 0; } + .el-switch__core { + margin: 0; + display: inline-block; + position: relative; + width: 40px; + height: 20px; + border: 1px solid #DCDFE6; + outline: none; + border-radius: 10px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + background: #DCDFE6; + cursor: pointer; + -webkit-transition: border-color .3s, background-color .3s; + transition: border-color .3s, background-color .3s; + vertical-align: middle; } + .el-switch__core:after { + content: ""; + position: absolute; + top: 1px; + left: 1px; + border-radius: 100%; + -webkit-transition: all .3s; + transition: all .3s; + width: 16px; + height: 16px; + background-color: #FFFFFF; } + .el-switch.is-checked .el-switch__core { + border-color: #00B9FF; + background-color: #00B9FF; } + .el-switch.is-checked .el-switch__core::after { + left: 100%; + margin-left: -17px; } + .el-switch.is-disabled { + opacity: 0.6; } + .el-switch--wide .el-switch__label.el-switch__label--left span { + left: 10px; } + .el-switch--wide .el-switch__label.el-switch__label--right span { + right: 10px; } + .el-switch .label-fade-enter, + .el-switch .label-fade-leave-active { + opacity: 0; } diff --git a/theme/tab-pane.css b/theme/tab-pane.css new file mode 100644 index 0000000..e69de29 diff --git a/theme/table-column.css b/theme/table-column.css new file mode 100644 index 0000000..8bc953a --- /dev/null +++ b/theme/table-column.css @@ -0,0 +1,1410 @@ +@charset "UTF-8"; +/* 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 +--------------------------*/ +/* 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 +--------------------------*/ +.el-checkbox { + color: #606266; + font-weight: 500; + font-size: 14px; + position: relative; + cursor: pointer; + display: inline-block; + white-space: nowrap; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + margin-right: 30px; } + .el-checkbox.is-bordered { + padding: 9px 20px 9px 10px; + border-radius: 4px; + border: 1px solid #DCDFE6; + -webkit-box-sizing: border-box; + box-sizing: border-box; + line-height: normal; + height: 40px; } + .el-checkbox.is-bordered.is-checked { + border-color: #00B9FF; } + .el-checkbox.is-bordered.is-disabled { + border-color: #EBEEF5; + cursor: not-allowed; } + .el-checkbox.is-bordered + .el-checkbox.is-bordered { + margin-left: 10px; } + .el-checkbox.is-bordered.el-checkbox--medium { + padding: 7px 20px 7px 10px; + border-radius: 4px; + height: 36px; } + .el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__label { + line-height: 17px; + font-size: 14px; } + .el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__inner { + height: 14px; + width: 14px; } + .el-checkbox.is-bordered.el-checkbox--small { + padding: 5px 15px 5px 10px; + border-radius: 3px; + height: 32px; } + .el-checkbox.is-bordered.el-checkbox--small .el-checkbox__label { + line-height: 15px; + font-size: 12px; } + .el-checkbox.is-bordered.el-checkbox--small .el-checkbox__inner { + height: 12px; + width: 12px; } + .el-checkbox.is-bordered.el-checkbox--small .el-checkbox__inner::after { + height: 6px; + width: 2px; } + .el-checkbox.is-bordered.el-checkbox--mini { + padding: 3px 15px 3px 10px; + border-radius: 3px; + height: 28px; } + .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__label { + line-height: 12px; + font-size: 12px; } + .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__inner { + height: 12px; + width: 12px; } + .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__inner::after { + height: 6px; + width: 2px; } + .el-checkbox__input { + white-space: nowrap; + cursor: pointer; + outline: none; + display: inline-block; + line-height: 1; + position: relative; + vertical-align: middle; } + .el-checkbox__input.is-disabled .el-checkbox__inner { + background-color: #edf2fc; + border-color: #DCDFE6; + cursor: not-allowed; } + .el-checkbox__input.is-disabled .el-checkbox__inner::after { + cursor: not-allowed; + border-color: #C0C4CC; } + .el-checkbox__input.is-disabled .el-checkbox__inner + .el-checkbox__label { + cursor: not-allowed; } + .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner { + background-color: #F2F6FC; + border-color: #DCDFE6; } + .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after { + border-color: #C0C4CC; } + .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner { + background-color: #F2F6FC; + border-color: #DCDFE6; } + .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner::before { + background-color: #C0C4CC; + border-color: #C0C4CC; } + .el-checkbox__input.is-disabled + span.el-checkbox__label { + color: #C0C4CC; + cursor: not-allowed; } + .el-checkbox__input.is-checked .el-checkbox__inner { + background-color: #00B9FF; + border-color: #00B9FF; } + .el-checkbox__input.is-checked .el-checkbox__inner::after { + -webkit-transform: rotate(45deg) scaleY(1); + transform: rotate(45deg) scaleY(1); } + .el-checkbox__input.is-checked + .el-checkbox__label { + color: #00B9FF; } + .el-checkbox__input.is-focus { + /*focus时 视觉上区分*/ } + .el-checkbox__input.is-focus .el-checkbox__inner { + border-color: #00B9FF; } + .el-checkbox__input.is-indeterminate .el-checkbox__inner { + background-color: #00B9FF; + border-color: #00B9FF; } + .el-checkbox__input.is-indeterminate .el-checkbox__inner::before { + content: ''; + position: absolute; + display: block; + background-color: #FFFFFF; + height: 2px; + -webkit-transform: scale(0.5); + transform: scale(0.5); + left: 0; + right: 0; + top: 5px; } + .el-checkbox__input.is-indeterminate .el-checkbox__inner::after { + display: none; } + .el-checkbox__inner { + display: inline-block; + position: relative; + border: 1px solid #DCDFE6; + border-radius: 2px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 14px; + height: 14px; + background-color: #FFFFFF; + z-index: 1; + -webkit-transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46); + transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46); } + .el-checkbox__inner:hover { + border-color: #00B9FF; } + .el-checkbox__inner::after { + -webkit-box-sizing: content-box; + box-sizing: content-box; + content: ""; + border: 1px solid #FFFFFF; + border-left: 0; + border-top: 0; + height: 7px; + left: 4px; + position: absolute; + top: 1px; + -webkit-transform: rotate(45deg) scaleY(0); + transform: rotate(45deg) scaleY(0); + width: 3px; + -webkit-transition: -webkit-transform .15s ease-in .05s; + transition: -webkit-transform .15s ease-in .05s; + transition: transform .15s ease-in .05s; + transition: transform .15s ease-in .05s, -webkit-transform .15s ease-in .05s; + -webkit-transform-origin: center; + transform-origin: center; } + .el-checkbox__original { + opacity: 0; + outline: none; + position: absolute; + margin: 0; + width: 0; + height: 0; + z-index: -1; } + .el-checkbox__label { + display: inline-block; + padding-left: 10px; + line-height: 19px; + font-size: 14px; } + .el-checkbox:last-of-type { + margin-right: 0; } + +.el-checkbox-button { + position: relative; + display: inline-block; } + .el-checkbox-button__inner { + display: inline-block; + line-height: 1; + font-weight: 500; + white-space: nowrap; + vertical-align: middle; + cursor: pointer; + background: #FFFFFF; + border: 1px solid #DCDFE6; + border-left: 0; + color: #606266; + -webkit-appearance: none; + text-align: center; + -webkit-box-sizing: border-box; + box-sizing: border-box; + outline: none; + margin: 0; + position: relative; + -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + padding: 12px 20px; + font-size: 14px; + border-radius: 0; } + .el-checkbox-button__inner.is-round { + padding: 12px 20px; } + .el-checkbox-button__inner:hover { + color: #00B9FF; } + .el-checkbox-button__inner [class*="el-icon-"] { + line-height: 0.9; } + .el-checkbox-button__inner [class*="el-icon-"] + span { + margin-left: 5px; } + .el-checkbox-button__original { + opacity: 0; + outline: none; + position: absolute; + margin: 0; + z-index: -1; } + .el-checkbox-button.is-checked .el-checkbox-button__inner { + color: #FFFFFF; + background-color: #00B9FF; + border-color: #00B9FF; + -webkit-box-shadow: -1px 0 0 0 #66d5ff; + box-shadow: -1px 0 0 0 #66d5ff; } + .el-checkbox-button.is-checked:first-child .el-checkbox-button__inner { + border-left-color: #00B9FF; } + .el-checkbox-button.is-disabled .el-checkbox-button__inner { + color: #C0C4CC; + cursor: not-allowed; + background-image: none; + background-color: #FFFFFF; + border-color: #EBEEF5; + -webkit-box-shadow: none; + box-shadow: none; } + .el-checkbox-button.is-disabled:first-child .el-checkbox-button__inner { + border-left-color: #EBEEF5; } + .el-checkbox-button:first-child .el-checkbox-button__inner { + border-left: 1px solid #DCDFE6; + border-radius: 4px 0 0 4px; + -webkit-box-shadow: none !important; + box-shadow: none !important; } + .el-checkbox-button.is-focus .el-checkbox-button__inner { + border-color: #00B9FF; } + .el-checkbox-button:last-child .el-checkbox-button__inner { + border-radius: 0 4px 4px 0; } + .el-checkbox-button--medium .el-checkbox-button__inner { + padding: 10px 20px; + font-size: 14px; + border-radius: 0; } + .el-checkbox-button--medium .el-checkbox-button__inner.is-round { + padding: 10px 20px; } + .el-checkbox-button--small .el-checkbox-button__inner { + padding: 9px 15px; + font-size: 12px; + border-radius: 0; } + .el-checkbox-button--small .el-checkbox-button__inner.is-round { + padding: 9px 15px; } + .el-checkbox-button--mini .el-checkbox-button__inner { + padding: 7px 15px; + font-size: 12px; + border-radius: 0; } + .el-checkbox-button--mini .el-checkbox-button__inner.is-round { + padding: 7px 15px; } + +.el-checkbox-group { + font-size: 0; } + +/* 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 +--------------------------*/ +.el-tag { + background-color: #e6f8ff; + border-color: #ccf1ff; + color: #00b9ff; + display: inline-block; + height: 32px; + padding: 0 10px; + line-height: 30px; + font-size: 12px; + color: #00B9FF; + border-width: 1px; + border-style: solid; + border-radius: 4px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + white-space: nowrap; } + .el-tag.is-hit { + border-color: #00B9FF; } + .el-tag .el-tag__close { + color: #00b9ff; } + .el-tag .el-tag__close:hover { + color: #FFFFFF; + background-color: #00b9ff; } + .el-tag.el-tag--info { + background-color: #f4f4f5; + border-color: #e9e9eb; + color: #909399; } + .el-tag.el-tag--info.is-hit { + border-color: #909399; } + .el-tag.el-tag--info .el-tag__close { + color: #909399; } + .el-tag.el-tag--info .el-tag__close:hover { + color: #FFFFFF; + background-color: #909399; } + .el-tag.el-tag--success { + background-color: #f0f9eb; + border-color: #e1f3d8; + color: #67c23a; } + .el-tag.el-tag--success.is-hit { + border-color: #67C23A; } + .el-tag.el-tag--success .el-tag__close { + color: #67c23a; } + .el-tag.el-tag--success .el-tag__close:hover { + color: #FFFFFF; + background-color: #67c23a; } + .el-tag.el-tag--warning { + background-color: #fdf6ec; + border-color: #faecd8; + color: #e6a23c; } + .el-tag.el-tag--warning.is-hit { + border-color: #E6A23C; } + .el-tag.el-tag--warning .el-tag__close { + color: #e6a23c; } + .el-tag.el-tag--warning .el-tag__close:hover { + color: #FFFFFF; + background-color: #e6a23c; } + .el-tag.el-tag--danger { + background-color: #fef0f0; + border-color: #fde2e2; + color: #f56c6c; } + .el-tag.el-tag--danger.is-hit { + border-color: #F56C6C; } + .el-tag.el-tag--danger .el-tag__close { + color: #f56c6c; } + .el-tag.el-tag--danger .el-tag__close:hover { + color: #FFFFFF; + background-color: #f56c6c; } + .el-tag .el-icon-close { + border-radius: 50%; + text-align: center; + position: relative; + cursor: pointer; + font-size: 12px; + height: 16px; + width: 16px; + line-height: 16px; + vertical-align: middle; + top: -1px; + right: -5px; } + .el-tag .el-icon-close::before { + display: block; } + .el-tag--dark { + background-color: #00b9ff; + border-color: #00b9ff; + color: white; } + .el-tag--dark.is-hit { + border-color: #00B9FF; } + .el-tag--dark .el-tag__close { + color: white; } + .el-tag--dark .el-tag__close:hover { + color: #FFFFFF; + background-color: #33c7ff; } + .el-tag--dark.el-tag--info { + background-color: #909399; + border-color: #909399; + color: white; } + .el-tag--dark.el-tag--info.is-hit { + border-color: #909399; } + .el-tag--dark.el-tag--info .el-tag__close { + color: white; } + .el-tag--dark.el-tag--info .el-tag__close:hover { + color: #FFFFFF; + background-color: #a6a9ad; } + .el-tag--dark.el-tag--success { + background-color: #67c23a; + border-color: #67c23a; + color: white; } + .el-tag--dark.el-tag--success.is-hit { + border-color: #67C23A; } + .el-tag--dark.el-tag--success .el-tag__close { + color: white; } + .el-tag--dark.el-tag--success .el-tag__close:hover { + color: #FFFFFF; + background-color: #85ce61; } + .el-tag--dark.el-tag--warning { + background-color: #e6a23c; + border-color: #e6a23c; + color: white; } + .el-tag--dark.el-tag--warning.is-hit { + border-color: #E6A23C; } + .el-tag--dark.el-tag--warning .el-tag__close { + color: white; } + .el-tag--dark.el-tag--warning .el-tag__close:hover { + color: #FFFFFF; + background-color: #ebb563; } + .el-tag--dark.el-tag--danger { + background-color: #f56c6c; + border-color: #f56c6c; + color: white; } + .el-tag--dark.el-tag--danger.is-hit { + border-color: #F56C6C; } + .el-tag--dark.el-tag--danger .el-tag__close { + color: white; } + .el-tag--dark.el-tag--danger .el-tag__close:hover { + color: #FFFFFF; + background-color: #f78989; } + .el-tag--plain { + background-color: white; + border-color: #99e3ff; + color: #00b9ff; } + .el-tag--plain.is-hit { + border-color: #00B9FF; } + .el-tag--plain .el-tag__close { + color: #00b9ff; } + .el-tag--plain .el-tag__close:hover { + color: #FFFFFF; + background-color: #00b9ff; } + .el-tag--plain.el-tag--info { + background-color: white; + border-color: #d3d4d6; + color: #909399; } + .el-tag--plain.el-tag--info.is-hit { + border-color: #909399; } + .el-tag--plain.el-tag--info .el-tag__close { + color: #909399; } + .el-tag--plain.el-tag--info .el-tag__close:hover { + color: #FFFFFF; + background-color: #909399; } + .el-tag--plain.el-tag--success { + background-color: white; + border-color: #c2e7b0; + color: #67c23a; } + .el-tag--plain.el-tag--success.is-hit { + border-color: #67C23A; } + .el-tag--plain.el-tag--success .el-tag__close { + color: #67c23a; } + .el-tag--plain.el-tag--success .el-tag__close:hover { + color: #FFFFFF; + background-color: #67c23a; } + .el-tag--plain.el-tag--warning { + background-color: white; + border-color: #f5dab1; + color: #e6a23c; } + .el-tag--plain.el-tag--warning.is-hit { + border-color: #E6A23C; } + .el-tag--plain.el-tag--warning .el-tag__close { + color: #e6a23c; } + .el-tag--plain.el-tag--warning .el-tag__close:hover { + color: #FFFFFF; + background-color: #e6a23c; } + .el-tag--plain.el-tag--danger { + background-color: white; + border-color: #fbc4c4; + color: #f56c6c; } + .el-tag--plain.el-tag--danger.is-hit { + border-color: #F56C6C; } + .el-tag--plain.el-tag--danger .el-tag__close { + color: #f56c6c; } + .el-tag--plain.el-tag--danger .el-tag__close:hover { + color: #FFFFFF; + background-color: #f56c6c; } + .el-tag--medium { + height: 28px; + line-height: 26px; } + .el-tag--medium .el-icon-close { + -webkit-transform: scale(0.8); + transform: scale(0.8); } + .el-tag--small { + height: 24px; + padding: 0 8px; + line-height: 22px; } + .el-tag--small .el-icon-close { + -webkit-transform: scale(0.8); + transform: scale(0.8); } + .el-tag--mini { + height: 20px; + padding: 0 5px; + line-height: 19px; } + .el-tag--mini .el-icon-close { + margin-left: -3px; + -webkit-transform: scale(0.7); + transform: scale(0.7); } + +/* 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 +--------------------------*/ +.el-table-column--selection .cell { + padding-left: 14px; + padding-right: 14px; } + +.el-table-filter { + border: solid 1px #EBEEF5; + border-radius: 2px; + background-color: #FFFFFF; + -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + -webkit-box-sizing: border-box; + box-sizing: border-box; + margin: 2px 0; + /** used for dropdown mode */ } + .el-table-filter__list { + padding: 5px 0; + margin: 0; + list-style: none; + min-width: 100px; } + .el-table-filter__list-item { + line-height: 36px; + padding: 0 10px; + cursor: pointer; + font-size: 14px; } + .el-table-filter__list-item:hover { + background-color: #e6f8ff; + color: #33c7ff; } + .el-table-filter__list-item.is-active { + background-color: #00B9FF; + color: #FFFFFF; } + .el-table-filter__content { + min-width: 100px; } + .el-table-filter__bottom { + border-top: 1px solid #EBEEF5; + padding: 8px; } + .el-table-filter__bottom button { + background: transparent; + border: none; + color: #606266; + cursor: pointer; + font-size: 13px; + padding: 0 3px; } + .el-table-filter__bottom button:hover { + color: #00B9FF; } + .el-table-filter__bottom button:focus { + outline: none; } + .el-table-filter__bottom button.is-disabled { + color: #C0C4CC; + cursor: not-allowed; } + .el-table-filter__wrap { + max-height: 280px; } + .el-table-filter__checkbox-group { + padding: 10px; } + .el-table-filter__checkbox-group label.el-checkbox { + display: block; + margin-right: 5px; + margin-bottom: 8px; + margin-left: 5px; } + .el-table-filter__checkbox-group .el-checkbox:last-child { + margin-bottom: 0; } diff --git a/theme/table.css b/theme/table.css new file mode 100644 index 0000000..b3fe2bd --- /dev/null +++ b/theme/table.css @@ -0,0 +1,2047 @@ +@charset "UTF-8"; +/* 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 +--------------------------*/ +/* 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 +--------------------------*/ +.el-checkbox { + color: #606266; + font-weight: 500; + font-size: 14px; + position: relative; + cursor: pointer; + display: inline-block; + white-space: nowrap; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + margin-right: 30px; } + .el-checkbox.is-bordered { + padding: 9px 20px 9px 10px; + border-radius: 4px; + border: 1px solid #DCDFE6; + -webkit-box-sizing: border-box; + box-sizing: border-box; + line-height: normal; + height: 40px; } + .el-checkbox.is-bordered.is-checked { + border-color: #00B9FF; } + .el-checkbox.is-bordered.is-disabled { + border-color: #EBEEF5; + cursor: not-allowed; } + .el-checkbox.is-bordered + .el-checkbox.is-bordered { + margin-left: 10px; } + .el-checkbox.is-bordered.el-checkbox--medium { + padding: 7px 20px 7px 10px; + border-radius: 4px; + height: 36px; } + .el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__label { + line-height: 17px; + font-size: 14px; } + .el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__inner { + height: 14px; + width: 14px; } + .el-checkbox.is-bordered.el-checkbox--small { + padding: 5px 15px 5px 10px; + border-radius: 3px; + height: 32px; } + .el-checkbox.is-bordered.el-checkbox--small .el-checkbox__label { + line-height: 15px; + font-size: 12px; } + .el-checkbox.is-bordered.el-checkbox--small .el-checkbox__inner { + height: 12px; + width: 12px; } + .el-checkbox.is-bordered.el-checkbox--small .el-checkbox__inner::after { + height: 6px; + width: 2px; } + .el-checkbox.is-bordered.el-checkbox--mini { + padding: 3px 15px 3px 10px; + border-radius: 3px; + height: 28px; } + .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__label { + line-height: 12px; + font-size: 12px; } + .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__inner { + height: 12px; + width: 12px; } + .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__inner::after { + height: 6px; + width: 2px; } + .el-checkbox__input { + white-space: nowrap; + cursor: pointer; + outline: none; + display: inline-block; + line-height: 1; + position: relative; + vertical-align: middle; } + .el-checkbox__input.is-disabled .el-checkbox__inner { + background-color: #edf2fc; + border-color: #DCDFE6; + cursor: not-allowed; } + .el-checkbox__input.is-disabled .el-checkbox__inner::after { + cursor: not-allowed; + border-color: #C0C4CC; } + .el-checkbox__input.is-disabled .el-checkbox__inner + .el-checkbox__label { + cursor: not-allowed; } + .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner { + background-color: #F2F6FC; + border-color: #DCDFE6; } + .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after { + border-color: #C0C4CC; } + .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner { + background-color: #F2F6FC; + border-color: #DCDFE6; } + .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner::before { + background-color: #C0C4CC; + border-color: #C0C4CC; } + .el-checkbox__input.is-disabled + span.el-checkbox__label { + color: #C0C4CC; + cursor: not-allowed; } + .el-checkbox__input.is-checked .el-checkbox__inner { + background-color: #00B9FF; + border-color: #00B9FF; } + .el-checkbox__input.is-checked .el-checkbox__inner::after { + -webkit-transform: rotate(45deg) scaleY(1); + transform: rotate(45deg) scaleY(1); } + .el-checkbox__input.is-checked + .el-checkbox__label { + color: #00B9FF; } + .el-checkbox__input.is-focus { + /*focus时 视觉上区分*/ } + .el-checkbox__input.is-focus .el-checkbox__inner { + border-color: #00B9FF; } + .el-checkbox__input.is-indeterminate .el-checkbox__inner { + background-color: #00B9FF; + border-color: #00B9FF; } + .el-checkbox__input.is-indeterminate .el-checkbox__inner::before { + content: ''; + position: absolute; + display: block; + background-color: #FFFFFF; + height: 2px; + -webkit-transform: scale(0.5); + transform: scale(0.5); + left: 0; + right: 0; + top: 5px; } + .el-checkbox__input.is-indeterminate .el-checkbox__inner::after { + display: none; } + .el-checkbox__inner { + display: inline-block; + position: relative; + border: 1px solid #DCDFE6; + border-radius: 2px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 14px; + height: 14px; + background-color: #FFFFFF; + z-index: 1; + -webkit-transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46); + transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46); } + .el-checkbox__inner:hover { + border-color: #00B9FF; } + .el-checkbox__inner::after { + -webkit-box-sizing: content-box; + box-sizing: content-box; + content: ""; + border: 1px solid #FFFFFF; + border-left: 0; + border-top: 0; + height: 7px; + left: 4px; + position: absolute; + top: 1px; + -webkit-transform: rotate(45deg) scaleY(0); + transform: rotate(45deg) scaleY(0); + width: 3px; + -webkit-transition: -webkit-transform .15s ease-in .05s; + transition: -webkit-transform .15s ease-in .05s; + transition: transform .15s ease-in .05s; + transition: transform .15s ease-in .05s, -webkit-transform .15s ease-in .05s; + -webkit-transform-origin: center; + transform-origin: center; } + .el-checkbox__original { + opacity: 0; + outline: none; + position: absolute; + margin: 0; + width: 0; + height: 0; + z-index: -1; } + .el-checkbox__label { + display: inline-block; + padding-left: 10px; + line-height: 19px; + font-size: 14px; } + .el-checkbox:last-of-type { + margin-right: 0; } + +.el-checkbox-button { + position: relative; + display: inline-block; } + .el-checkbox-button__inner { + display: inline-block; + line-height: 1; + font-weight: 500; + white-space: nowrap; + vertical-align: middle; + cursor: pointer; + background: #FFFFFF; + border: 1px solid #DCDFE6; + border-left: 0; + color: #606266; + -webkit-appearance: none; + text-align: center; + -webkit-box-sizing: border-box; + box-sizing: border-box; + outline: none; + margin: 0; + position: relative; + -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + padding: 12px 20px; + font-size: 14px; + border-radius: 0; } + .el-checkbox-button__inner.is-round { + padding: 12px 20px; } + .el-checkbox-button__inner:hover { + color: #00B9FF; } + .el-checkbox-button__inner [class*="el-icon-"] { + line-height: 0.9; } + .el-checkbox-button__inner [class*="el-icon-"] + span { + margin-left: 5px; } + .el-checkbox-button__original { + opacity: 0; + outline: none; + position: absolute; + margin: 0; + z-index: -1; } + .el-checkbox-button.is-checked .el-checkbox-button__inner { + color: #FFFFFF; + background-color: #00B9FF; + border-color: #00B9FF; + -webkit-box-shadow: -1px 0 0 0 #66d5ff; + box-shadow: -1px 0 0 0 #66d5ff; } + .el-checkbox-button.is-checked:first-child .el-checkbox-button__inner { + border-left-color: #00B9FF; } + .el-checkbox-button.is-disabled .el-checkbox-button__inner { + color: #C0C4CC; + cursor: not-allowed; + background-image: none; + background-color: #FFFFFF; + border-color: #EBEEF5; + -webkit-box-shadow: none; + box-shadow: none; } + .el-checkbox-button.is-disabled:first-child .el-checkbox-button__inner { + border-left-color: #EBEEF5; } + .el-checkbox-button:first-child .el-checkbox-button__inner { + border-left: 1px solid #DCDFE6; + border-radius: 4px 0 0 4px; + -webkit-box-shadow: none !important; + box-shadow: none !important; } + .el-checkbox-button.is-focus .el-checkbox-button__inner { + border-color: #00B9FF; } + .el-checkbox-button:last-child .el-checkbox-button__inner { + border-radius: 0 4px 4px 0; } + .el-checkbox-button--medium .el-checkbox-button__inner { + padding: 10px 20px; + font-size: 14px; + border-radius: 0; } + .el-checkbox-button--medium .el-checkbox-button__inner.is-round { + padding: 10px 20px; } + .el-checkbox-button--small .el-checkbox-button__inner { + padding: 9px 15px; + font-size: 12px; + border-radius: 0; } + .el-checkbox-button--small .el-checkbox-button__inner.is-round { + padding: 9px 15px; } + .el-checkbox-button--mini .el-checkbox-button__inner { + padding: 7px 15px; + font-size: 12px; + border-radius: 0; } + .el-checkbox-button--mini .el-checkbox-button__inner.is-round { + padding: 7px 15px; } + +.el-checkbox-group { + font-size: 0; } + +/* 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 +--------------------------*/ +.el-tag { + background-color: #e6f8ff; + border-color: #ccf1ff; + color: #00b9ff; + display: inline-block; + height: 32px; + padding: 0 10px; + line-height: 30px; + font-size: 12px; + color: #00B9FF; + border-width: 1px; + border-style: solid; + border-radius: 4px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + white-space: nowrap; } + .el-tag.is-hit { + border-color: #00B9FF; } + .el-tag .el-tag__close { + color: #00b9ff; } + .el-tag .el-tag__close:hover { + color: #FFFFFF; + background-color: #00b9ff; } + .el-tag.el-tag--info { + background-color: #f4f4f5; + border-color: #e9e9eb; + color: #909399; } + .el-tag.el-tag--info.is-hit { + border-color: #909399; } + .el-tag.el-tag--info .el-tag__close { + color: #909399; } + .el-tag.el-tag--info .el-tag__close:hover { + color: #FFFFFF; + background-color: #909399; } + .el-tag.el-tag--success { + background-color: #f0f9eb; + border-color: #e1f3d8; + color: #67c23a; } + .el-tag.el-tag--success.is-hit { + border-color: #67C23A; } + .el-tag.el-tag--success .el-tag__close { + color: #67c23a; } + .el-tag.el-tag--success .el-tag__close:hover { + color: #FFFFFF; + background-color: #67c23a; } + .el-tag.el-tag--warning { + background-color: #fdf6ec; + border-color: #faecd8; + color: #e6a23c; } + .el-tag.el-tag--warning.is-hit { + border-color: #E6A23C; } + .el-tag.el-tag--warning .el-tag__close { + color: #e6a23c; } + .el-tag.el-tag--warning .el-tag__close:hover { + color: #FFFFFF; + background-color: #e6a23c; } + .el-tag.el-tag--danger { + background-color: #fef0f0; + border-color: #fde2e2; + color: #f56c6c; } + .el-tag.el-tag--danger.is-hit { + border-color: #F56C6C; } + .el-tag.el-tag--danger .el-tag__close { + color: #f56c6c; } + .el-tag.el-tag--danger .el-tag__close:hover { + color: #FFFFFF; + background-color: #f56c6c; } + .el-tag .el-icon-close { + border-radius: 50%; + text-align: center; + position: relative; + cursor: pointer; + font-size: 12px; + height: 16px; + width: 16px; + line-height: 16px; + vertical-align: middle; + top: -1px; + right: -5px; } + .el-tag .el-icon-close::before { + display: block; } + .el-tag--dark { + background-color: #00b9ff; + border-color: #00b9ff; + color: white; } + .el-tag--dark.is-hit { + border-color: #00B9FF; } + .el-tag--dark .el-tag__close { + color: white; } + .el-tag--dark .el-tag__close:hover { + color: #FFFFFF; + background-color: #33c7ff; } + .el-tag--dark.el-tag--info { + background-color: #909399; + border-color: #909399; + color: white; } + .el-tag--dark.el-tag--info.is-hit { + border-color: #909399; } + .el-tag--dark.el-tag--info .el-tag__close { + color: white; } + .el-tag--dark.el-tag--info .el-tag__close:hover { + color: #FFFFFF; + background-color: #a6a9ad; } + .el-tag--dark.el-tag--success { + background-color: #67c23a; + border-color: #67c23a; + color: white; } + .el-tag--dark.el-tag--success.is-hit { + border-color: #67C23A; } + .el-tag--dark.el-tag--success .el-tag__close { + color: white; } + .el-tag--dark.el-tag--success .el-tag__close:hover { + color: #FFFFFF; + background-color: #85ce61; } + .el-tag--dark.el-tag--warning { + background-color: #e6a23c; + border-color: #e6a23c; + color: white; } + .el-tag--dark.el-tag--warning.is-hit { + border-color: #E6A23C; } + .el-tag--dark.el-tag--warning .el-tag__close { + color: white; } + .el-tag--dark.el-tag--warning .el-tag__close:hover { + color: #FFFFFF; + background-color: #ebb563; } + .el-tag--dark.el-tag--danger { + background-color: #f56c6c; + border-color: #f56c6c; + color: white; } + .el-tag--dark.el-tag--danger.is-hit { + border-color: #F56C6C; } + .el-tag--dark.el-tag--danger .el-tag__close { + color: white; } + .el-tag--dark.el-tag--danger .el-tag__close:hover { + color: #FFFFFF; + background-color: #f78989; } + .el-tag--plain { + background-color: white; + border-color: #99e3ff; + color: #00b9ff; } + .el-tag--plain.is-hit { + border-color: #00B9FF; } + .el-tag--plain .el-tag__close { + color: #00b9ff; } + .el-tag--plain .el-tag__close:hover { + color: #FFFFFF; + background-color: #00b9ff; } + .el-tag--plain.el-tag--info { + background-color: white; + border-color: #d3d4d6; + color: #909399; } + .el-tag--plain.el-tag--info.is-hit { + border-color: #909399; } + .el-tag--plain.el-tag--info .el-tag__close { + color: #909399; } + .el-tag--plain.el-tag--info .el-tag__close:hover { + color: #FFFFFF; + background-color: #909399; } + .el-tag--plain.el-tag--success { + background-color: white; + border-color: #c2e7b0; + color: #67c23a; } + .el-tag--plain.el-tag--success.is-hit { + border-color: #67C23A; } + .el-tag--plain.el-tag--success .el-tag__close { + color: #67c23a; } + .el-tag--plain.el-tag--success .el-tag__close:hover { + color: #FFFFFF; + background-color: #67c23a; } + .el-tag--plain.el-tag--warning { + background-color: white; + border-color: #f5dab1; + color: #e6a23c; } + .el-tag--plain.el-tag--warning.is-hit { + border-color: #E6A23C; } + .el-tag--plain.el-tag--warning .el-tag__close { + color: #e6a23c; } + .el-tag--plain.el-tag--warning .el-tag__close:hover { + color: #FFFFFF; + background-color: #e6a23c; } + .el-tag--plain.el-tag--danger { + background-color: white; + border-color: #fbc4c4; + color: #f56c6c; } + .el-tag--plain.el-tag--danger.is-hit { + border-color: #F56C6C; } + .el-tag--plain.el-tag--danger .el-tag__close { + color: #f56c6c; } + .el-tag--plain.el-tag--danger .el-tag__close:hover { + color: #FFFFFF; + background-color: #f56c6c; } + .el-tag--medium { + height: 28px; + line-height: 26px; } + .el-tag--medium .el-icon-close { + -webkit-transform: scale(0.8); + transform: scale(0.8); } + .el-tag--small { + height: 24px; + padding: 0 8px; + line-height: 22px; } + .el-tag--small .el-icon-close { + -webkit-transform: scale(0.8); + transform: scale(0.8); } + .el-tag--mini { + height: 20px; + padding: 0 5px; + line-height: 19px; } + .el-tag--mini .el-icon-close { + margin-left: -3px; + -webkit-transform: scale(0.7); + transform: scale(0.7); } + +/* 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 +--------------------------*/ +.el-tooltip:focus:not(.focusing), .el-tooltip:focus:hover { + outline-width: 0; } + +.el-tooltip__popper { + position: absolute; + border-radius: 4px; + padding: 10px; + z-index: 2000; + font-size: 12px; + line-height: 1.2; + min-width: 10px; + word-wrap: break-word; } + .el-tooltip__popper .popper__arrow, + .el-tooltip__popper .popper__arrow::after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; } + .el-tooltip__popper .popper__arrow { + border-width: 6px; } + .el-tooltip__popper .popper__arrow::after { + content: " "; + border-width: 5px; } + .el-tooltip__popper[x-placement^="top"] { + margin-bottom: 12px; } + .el-tooltip__popper[x-placement^="top"] .popper__arrow { + bottom: -6px; + border-top-color: #303133; + border-bottom-width: 0; } + .el-tooltip__popper[x-placement^="top"] .popper__arrow::after { + bottom: 1px; + margin-left: -5px; + border-top-color: #303133; + border-bottom-width: 0; } + .el-tooltip__popper[x-placement^="bottom"] { + margin-top: 12px; } + .el-tooltip__popper[x-placement^="bottom"] .popper__arrow { + top: -6px; + border-top-width: 0; + border-bottom-color: #303133; } + .el-tooltip__popper[x-placement^="bottom"] .popper__arrow::after { + top: 1px; + margin-left: -5px; + border-top-width: 0; + border-bottom-color: #303133; } + .el-tooltip__popper[x-placement^="right"] { + margin-left: 12px; } + .el-tooltip__popper[x-placement^="right"] .popper__arrow { + left: -6px; + border-right-color: #303133; + border-left-width: 0; } + .el-tooltip__popper[x-placement^="right"] .popper__arrow::after { + bottom: -5px; + left: 1px; + border-right-color: #303133; + border-left-width: 0; } + .el-tooltip__popper[x-placement^="left"] { + margin-right: 12px; } + .el-tooltip__popper[x-placement^="left"] .popper__arrow { + right: -6px; + border-right-width: 0; + border-left-color: #303133; } + .el-tooltip__popper[x-placement^="left"] .popper__arrow::after { + right: 1px; + bottom: -5px; + margin-left: -5px; + border-right-width: 0; + border-left-color: #303133; } + .el-tooltip__popper.is-dark { + background: #303133; + color: #FFFFFF; } + .el-tooltip__popper.is-light { + background: #FFFFFF; + border: 1px solid #303133; } + .el-tooltip__popper.is-light[x-placement^="top"] .popper__arrow { + border-top-color: #303133; } + .el-tooltip__popper.is-light[x-placement^="top"] .popper__arrow::after { + border-top-color: #FFFFFF; } + .el-tooltip__popper.is-light[x-placement^="bottom"] .popper__arrow { + border-bottom-color: #303133; } + .el-tooltip__popper.is-light[x-placement^="bottom"] .popper__arrow::after { + border-bottom-color: #FFFFFF; } + .el-tooltip__popper.is-light[x-placement^="left"] .popper__arrow { + border-left-color: #303133; } + .el-tooltip__popper.is-light[x-placement^="left"] .popper__arrow::after { + border-left-color: #FFFFFF; } + .el-tooltip__popper.is-light[x-placement^="right"] .popper__arrow { + border-right-color: #303133; } + .el-tooltip__popper.is-light[x-placement^="right"] .popper__arrow::after { + border-right-color: #FFFFFF; } + +/* 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 +--------------------------*/ +.el-table { + position: relative; + overflow: hidden; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + width: 100%; + max-width: 100%; + background-color: #FFFFFF; + font-size: 14px; + color: #606266; } + .el-table__empty-block { + min-height: 60px; + text-align: center; + width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } + .el-table__empty-text { + line-height: 60px; + width: 50%; + color: #909399; } + .el-table__expand-column .cell { + padding: 0; + text-align: center; } + .el-table__expand-icon { + position: relative; + cursor: pointer; + color: #666; + font-size: 12px; + -webkit-transition: -webkit-transform 0.2s ease-in-out; + transition: -webkit-transform 0.2s ease-in-out; + transition: transform 0.2s ease-in-out; + transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; + height: 20px; } + .el-table__expand-icon--expanded { + -webkit-transform: rotate(90deg); + transform: rotate(90deg); } + .el-table__expand-icon > .el-icon { + position: absolute; + left: 50%; + top: 50%; + margin-left: -5px; + margin-top: -5px; } + .el-table__expanded-cell { + background-color: #FFFFFF; } + .el-table__expanded-cell[class*=cell] { + padding: 20px 50px; } + .el-table__expanded-cell:hover { + background-color: transparent !important; } + .el-table__placeholder { + display: inline-block; + width: 20px; } + .el-table__append-wrapper { + overflow: hidden; } + .el-table--fit { + border-right: 0; + border-bottom: 0; } + .el-table--fit th.gutter, .el-table--fit td.gutter { + border-right-width: 1px; } + .el-table--scrollable-x .el-table__body-wrapper { + overflow-x: auto; } + .el-table--scrollable-y .el-table__body-wrapper { + overflow-y: auto; } + .el-table thead { + color: #909399; + font-weight: 500; } + .el-table thead.is-group th { + background: #F5F7FA; } + .el-table th, .el-table td { + padding: 12px 0; + min-width: 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; + text-overflow: ellipsis; + vertical-align: middle; + position: relative; + text-align: left; } + .el-table th.is-center, .el-table td.is-center { + text-align: center; } + .el-table th.is-right, .el-table td.is-right { + text-align: right; } + .el-table th.gutter, .el-table td.gutter { + width: 15px; + border-right-width: 0; + border-bottom-width: 0; + padding: 0; } + .el-table th.is-hidden > *, .el-table td.is-hidden > * { + visibility: hidden; } + .el-table--medium th, .el-table--medium td { + padding: 10px 0; } + .el-table--small { + font-size: 12px; } + .el-table--small th, .el-table--small td { + padding: 8px 0; } + .el-table--mini { + font-size: 12px; } + .el-table--mini th, .el-table--mini td { + padding: 6px 0; } + .el-table tr { + background-color: #FFFFFF; } + .el-table tr input[type="checkbox"] { + margin: 0; } + .el-table th.is-leaf, .el-table td { + border-bottom: 1px solid #EBEEF5; } + .el-table th.is-sortable { + cursor: pointer; } + .el-table th { + overflow: hidden; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-color: #FFFFFF; } + .el-table th > .cell { + display: inline-block; + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: relative; + vertical-align: middle; + padding-left: 10px; + padding-right: 10px; + width: 100%; } + .el-table th > .cell.highlight { + color: #00B9FF; } + .el-table th.required > div::before { + display: inline-block; + content: ""; + width: 8px; + height: 8px; + border-radius: 50%; + background: #ff4d51; + margin-right: 5px; + vertical-align: middle; } + .el-table td div { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .el-table td.gutter { + width: 0; } + .el-table .cell { + -webkit-box-sizing: border-box; + box-sizing: border-box; + overflow: hidden; + text-overflow: ellipsis; + white-space: normal; + word-break: break-all; + line-height: 23px; + padding-left: 10px; + padding-right: 10px; } + .el-table .cell.el-tooltip { + white-space: nowrap; + min-width: 50px; } + .el-table--group, .el-table--border { + border: 1px solid #EBEEF5; } + .el-table--group::after, .el-table--border::after, .el-table::before { + content: ''; + position: absolute; + background-color: #EBEEF5; + z-index: 1; } + .el-table--group::after, .el-table--border::after { + top: 0; + right: 0; + width: 1px; + height: 100%; } + .el-table::before { + left: 0; + bottom: 0; + width: 100%; + height: 1px; } + .el-table--border { + border-right: none; + border-bottom: none; } + .el-table--border.el-loading-parent--relative { + border-color: transparent; } + .el-table--border th, .el-table--border td { + border-right: 1px solid #EBEEF5; } + .el-table--border th:first-child .cell, .el-table--border td:first-child .cell { + padding-left: 10px; } + .el-table--border th.gutter:last-of-type { + border-bottom: 1px solid #EBEEF5; + border-bottom-width: 1px; } + .el-table--border th { + border-bottom: 1px solid #EBEEF5; } + .el-table--hidden { + visibility: hidden; } + .el-table__fixed, .el-table__fixed-right { + position: absolute; + top: 0; + left: 0; + overflow-x: hidden; + overflow-y: hidden; + -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.12); } + .el-table__fixed::before, .el-table__fixed-right::before { + content: ''; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 1px; + background-color: #EBEEF5; + z-index: 4; } + .el-table__fixed-right-patch { + position: absolute; + top: -1px; + right: 0; + background-color: #FFFFFF; + border-bottom: 1px solid #EBEEF5; } + .el-table__fixed-right { + top: 0; + left: auto; + right: 0; } + .el-table__fixed-right .el-table__fixed-header-wrapper, + .el-table__fixed-right .el-table__fixed-body-wrapper, + .el-table__fixed-right .el-table__fixed-footer-wrapper { + left: auto; + right: 0; } + .el-table__fixed-header-wrapper { + position: absolute; + left: 0; + top: 0; + z-index: 3; } + .el-table__fixed-footer-wrapper { + position: absolute; + left: 0; + bottom: 0; + z-index: 3; } + .el-table__fixed-footer-wrapper tbody td { + border-top: 1px solid #EBEEF5; + background-color: #F5F7FA; + color: #606266; } + .el-table__fixed-body-wrapper { + position: absolute; + left: 0; + top: 37px; + overflow: hidden; + z-index: 3; } + .el-table__header-wrapper, .el-table__body-wrapper, .el-table__footer-wrapper { + width: 100%; } + .el-table__footer-wrapper { + margin-top: -1px; } + .el-table__footer-wrapper td { + border-top: 1px solid #EBEEF5; } + .el-table__header, .el-table__body, .el-table__footer { + table-layout: fixed; + border-collapse: separate; } + .el-table__header-wrapper, .el-table__footer-wrapper { + overflow: hidden; } + .el-table__header-wrapper tbody td, .el-table__footer-wrapper tbody td { + background-color: #F5F7FA; + color: #606266; } + .el-table__body-wrapper { + overflow: hidden; + position: relative; } + .el-table__body-wrapper.is-scrolling-none ~ .el-table__fixed, + .el-table__body-wrapper.is-scrolling-none ~ .el-table__fixed-right { + -webkit-box-shadow: none; + box-shadow: none; } + .el-table__body-wrapper.is-scrolling-left ~ .el-table__fixed { + -webkit-box-shadow: none; + box-shadow: none; } + .el-table__body-wrapper.is-scrolling-right ~ .el-table__fixed-right { + -webkit-box-shadow: none; + box-shadow: none; } + .el-table__body-wrapper .el-table--border.is-scrolling-right ~ .el-table__fixed-right { + border-left: 1px solid #EBEEF5; } + .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed { + border-right: 1px solid #EBEEF5; } + .el-table .caret-wrapper { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 34px; + width: 24px; + vertical-align: middle; + cursor: pointer; + overflow: initial; + position: relative; } + .el-table .sort-caret { + width: 0; + height: 0; + border: solid 5px transparent; + position: absolute; + left: 7px; } + .el-table .sort-caret.ascending { + border-bottom-color: #C0C4CC; + top: 5px; } + .el-table .sort-caret.descending { + border-top-color: #C0C4CC; + bottom: 7px; } + .el-table .ascending .sort-caret.ascending { + border-bottom-color: #00B9FF; } + .el-table .descending .sort-caret.descending { + border-top-color: #00B9FF; } + .el-table .hidden-columns { + visibility: hidden; + position: absolute; + z-index: -1; } + .el-table--striped .el-table__body tr.el-table__row--striped td { + background: #FAFAFA; } + .el-table--striped .el-table__body tr.el-table__row--striped.current-row td { + background-color: #e6f8ff; } + .el-table__body tr.hover-row > td, .el-table__body tr.hover-row.current-row > td, .el-table__body tr.hover-row.el-table__row--striped > td, .el-table__body tr.hover-row.el-table__row--striped.current-row > td { + background-color: #F5F7FA; } + .el-table__body tr.current-row > td { + background-color: #e6f8ff; } + .el-table__column-resize-proxy { + position: absolute; + left: 200px; + top: 0; + bottom: 0; + width: 0; + border-left: 1px solid #EBEEF5; + z-index: 10; } + .el-table__column-filter-trigger { + display: inline-block; + line-height: 34px; + cursor: pointer; } + .el-table__column-filter-trigger i { + color: #909399; + font-size: 12px; + -webkit-transform: scale(0.75); + transform: scale(0.75); } + .el-table--enable-row-transition .el-table__body td { + -webkit-transition: background-color .25s ease; + transition: background-color .25s ease; } + .el-table--enable-row-hover .el-table__body tr:hover > td { + background-color: #F5F7FA; } + .el-table--fluid-height .el-table__fixed, + .el-table--fluid-height .el-table__fixed-right { + bottom: 0; + overflow: hidden; } + .el-table [class*=el-table__row--level] .el-table__expand-icon { + display: inline-block; + width: 20px; + line-height: 20px; + height: 20px; + text-align: center; + margin-right: 3px; } diff --git a/theme/tabs.css b/theme/tabs.css new file mode 100644 index 0000000..20d6434 --- /dev/null +++ b/theme/tabs.css @@ -0,0 +1,831 @@ +/* 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 +--------------------------*/ +.el-tabs__header { + padding: 0; + position: relative; + margin: 0 0 15px; } + +.el-tabs__active-bar { + position: absolute; + bottom: 0; + left: 0; + height: 2px; + background-color: #00B9FF; + z-index: 1; + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + list-style: none; } + +.el-tabs__new-tab { + float: right; + border: 1px solid #d3dce6; + height: 18px; + width: 18px; + line-height: 18px; + margin: 12px 0 9px 10px; + border-radius: 3px; + text-align: center; + font-size: 12px; + color: #d3dce6; + cursor: pointer; + -webkit-transition: all .15s; + transition: all .15s; } + .el-tabs__new-tab .el-icon-plus { + -webkit-transform: scale(0.8, 0.8); + transform: scale(0.8, 0.8); } + .el-tabs__new-tab:hover { + color: #00B9FF; } + +.el-tabs__nav-wrap { + overflow: hidden; + margin-bottom: -1px; + position: relative; } + .el-tabs__nav-wrap::after { + content: ""; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 2px; + background-color: #E4E7ED; + z-index: 1; } + .el-tabs__nav-wrap.is-scrollable { + padding: 0 20px; + -webkit-box-sizing: border-box; + box-sizing: border-box; } + +.el-tabs__nav-scroll { + overflow: hidden; } + +.el-tabs__nav-next, .el-tabs__nav-prev { + position: absolute; + cursor: pointer; + line-height: 44px; + font-size: 12px; + color: #909399; } + +.el-tabs__nav-next { + right: 0; } + +.el-tabs__nav-prev { + left: 0; } + +.el-tabs__nav { + white-space: nowrap; + position: relative; + -webkit-transition: -webkit-transform .3s; + transition: -webkit-transform .3s; + transition: transform .3s; + transition: transform .3s, -webkit-transform .3s; + float: left; + z-index: 2; } + .el-tabs__nav.is-stretch { + min-width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; } + .el-tabs__nav.is-stretch > * { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + text-align: center; } + +.el-tabs__item { + padding: 0 20px; + height: 40px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + line-height: 40px; + display: inline-block; + list-style: none; + font-size: 14px; + font-weight: 500; + color: #303133; + position: relative; } + .el-tabs__item:focus, .el-tabs__item:focus:active { + outline: none; } + .el-tabs__item:focus.is-active.is-focus:not(:active) { + -webkit-box-shadow: 0 0 2px 2px #00B9FF inset; + box-shadow: 0 0 2px 2px #00B9FF inset; + border-radius: 3px; } + .el-tabs__item .el-icon-close { + border-radius: 50%; + text-align: center; + -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + margin-left: 5px; } + .el-tabs__item .el-icon-close:before { + -webkit-transform: scale(0.9); + transform: scale(0.9); + display: inline-block; } + .el-tabs__item .el-icon-close:hover { + background-color: #C0C4CC; + color: #FFFFFF; } + .el-tabs__item.is-active { + color: #00B9FF; } + .el-tabs__item:hover { + color: #00B9FF; + cursor: pointer; } + .el-tabs__item.is-disabled { + color: #C0C4CC; + cursor: default; } + +.el-tabs__content { + overflow: hidden; + position: relative; } + +.el-tabs--card > .el-tabs__header { + border-bottom: 1px solid #E4E7ED; } + +.el-tabs--card > .el-tabs__header .el-tabs__nav-wrap::after { + content: none; } + +.el-tabs--card > .el-tabs__header .el-tabs__nav { + border: 1px solid #E4E7ED; + border-bottom: none; + border-radius: 4px 4px 0 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; } + +.el-tabs--card > .el-tabs__header .el-tabs__active-bar { + display: none; } + +.el-tabs--card > .el-tabs__header .el-tabs__item .el-icon-close { + position: relative; + font-size: 12px; + width: 0; + height: 14px; + vertical-align: middle; + line-height: 15px; + overflow: hidden; + top: -1px; + right: -2px; + -webkit-transform-origin: 100% 50%; + transform-origin: 100% 50%; } + +.el-tabs--card > .el-tabs__header .el-tabs__item { + border-bottom: 1px solid transparent; + border-left: 1px solid #E4E7ED; + -webkit-transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } + .el-tabs--card > .el-tabs__header .el-tabs__item:first-child { + border-left: none; } + .el-tabs--card > .el-tabs__header .el-tabs__item.is-closable:hover { + padding-left: 13px; + padding-right: 13px; } + .el-tabs--card > .el-tabs__header .el-tabs__item.is-closable:hover .el-icon-close { + width: 14px; } + .el-tabs--card > .el-tabs__header .el-tabs__item.is-active { + border-bottom-color: #FFFFFF; } + .el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable { + padding-left: 20px; + padding-right: 20px; } + .el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable .el-icon-close { + width: 14px; } + +.el-tabs--border-card { + background: #FFFFFF; + border: 1px solid #DCDFE6; + -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04); } + .el-tabs--border-card > .el-tabs__content { + padding: 15px; } + .el-tabs--border-card > .el-tabs__header { + background-color: #F5F7FA; + border-bottom: 1px solid #E4E7ED; + margin: 0; } + .el-tabs--border-card > .el-tabs__header .el-tabs__nav-wrap::after { + content: none; } + .el-tabs--border-card > .el-tabs__header .el-tabs__item { + -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + border: 1px solid transparent; + margin-top: -1px; + color: #909399; } + .el-tabs--border-card > .el-tabs__header .el-tabs__item:first-child { + margin-left: -1px; } + .el-tabs--border-card > .el-tabs__header .el-tabs__item + .el-tabs__item { + margin-left: -1px; } + .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active { + color: #00B9FF; + background-color: #FFFFFF; + border-right-color: #DCDFE6; + border-left-color: #DCDFE6; } + .el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover { + color: #00B9FF; } + .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-disabled { + color: #C0C4CC; } + .el-tabs--border-card > .el-tabs__header .is-scrollable .el-tabs__item:first-child { + margin-left: 0; } + +.el-tabs--top .el-tabs__item.is-top:nth-child(2), +.el-tabs--top .el-tabs__item.is-bottom:nth-child(2), .el-tabs--bottom .el-tabs__item.is-top:nth-child(2), +.el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2) { + padding-left: 0; } + +.el-tabs--top .el-tabs__item.is-top:last-child, +.el-tabs--top .el-tabs__item.is-bottom:last-child, .el-tabs--bottom .el-tabs__item.is-top:last-child, +.el-tabs--bottom .el-tabs__item.is-bottom:last-child { + padding-right: 0; } + +.el-tabs--top.el-tabs--border-card > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:nth-child(2), +.el-tabs--top .el-tabs--left > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top .el-tabs--right > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--border-card > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--card > .el-tabs__header .el-tabs__item:nth-child(2), +.el-tabs--bottom .el-tabs--left > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom .el-tabs--right > .el-tabs__header .el-tabs__item:nth-child(2) { + padding-left: 20px; } + +.el-tabs--top.el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:last-child, +.el-tabs--top .el-tabs--left > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top .el-tabs--right > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--card > .el-tabs__header .el-tabs__item:last-child, +.el-tabs--bottom .el-tabs--left > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom .el-tabs--right > .el-tabs__header .el-tabs__item:last-child { + padding-right: 20px; } + +.el-tabs--bottom .el-tabs__header.is-bottom { + margin-bottom: 0; + margin-top: 10px; } + +.el-tabs--bottom.el-tabs--border-card .el-tabs__header.is-bottom { + border-bottom: 0; + border-top: 1px solid #DCDFE6; } + +.el-tabs--bottom.el-tabs--border-card .el-tabs__nav-wrap.is-bottom { + margin-top: -1px; + margin-bottom: 0; } + +.el-tabs--bottom.el-tabs--border-card .el-tabs__item.is-bottom:not(.is-active) { + border: 1px solid transparent; } + +.el-tabs--bottom.el-tabs--border-card .el-tabs__item.is-bottom { + margin: 0 -1px -1px -1px; } + +.el-tabs--left, .el-tabs--right { + overflow: hidden; } + .el-tabs--left .el-tabs__header.is-left, + .el-tabs--left .el-tabs__header.is-right, + .el-tabs--left .el-tabs__nav-wrap.is-left, + .el-tabs--left .el-tabs__nav-wrap.is-right, + .el-tabs--left .el-tabs__nav-scroll, .el-tabs--right .el-tabs__header.is-left, + .el-tabs--right .el-tabs__header.is-right, + .el-tabs--right .el-tabs__nav-wrap.is-left, + .el-tabs--right .el-tabs__nav-wrap.is-right, + .el-tabs--right .el-tabs__nav-scroll { + height: 100%; } + .el-tabs--left .el-tabs__active-bar.is-left, + .el-tabs--left .el-tabs__active-bar.is-right, .el-tabs--right .el-tabs__active-bar.is-left, + .el-tabs--right .el-tabs__active-bar.is-right { + top: 0; + bottom: auto; + width: 2px; + height: auto; } + .el-tabs--left .el-tabs__nav-wrap.is-left, + .el-tabs--left .el-tabs__nav-wrap.is-right, .el-tabs--right .el-tabs__nav-wrap.is-left, + .el-tabs--right .el-tabs__nav-wrap.is-right { + margin-bottom: 0; } + .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev, + .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-next, + .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev, + .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-next, .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev, + .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-next, + .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev, + .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-next { + height: 30px; + line-height: 30px; + width: 100%; + text-align: center; + cursor: pointer; } + .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev i, + .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-next i, + .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev i, + .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-next i, .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev i, + .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-next i, + .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev i, + .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-next i { + -webkit-transform: rotateZ(90deg); + transform: rotateZ(90deg); } + .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev, + .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev, .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev, + .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev { + left: auto; + top: 0; } + .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-next, + .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-next, .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-next, + .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-next { + right: auto; + bottom: 0; } + .el-tabs--left .el-tabs__nav-wrap.is-left.is-scrollable, + .el-tabs--left .el-tabs__nav-wrap.is-right.is-scrollable, .el-tabs--right .el-tabs__nav-wrap.is-left.is-scrollable, + .el-tabs--right .el-tabs__nav-wrap.is-right.is-scrollable { + padding: 30px 0; } + .el-tabs--left .el-tabs__nav-wrap.is-left::after, + .el-tabs--left .el-tabs__nav-wrap.is-right::after, .el-tabs--right .el-tabs__nav-wrap.is-left::after, + .el-tabs--right .el-tabs__nav-wrap.is-right::after { + height: 100%; + width: 2px; + bottom: auto; + top: 0; } + .el-tabs--left .el-tabs__nav.is-left, + .el-tabs--left .el-tabs__nav.is-right, .el-tabs--right .el-tabs__nav.is-left, + .el-tabs--right .el-tabs__nav.is-right { + float: none; } + .el-tabs--left .el-tabs__item.is-left, + .el-tabs--left .el-tabs__item.is-right, .el-tabs--right .el-tabs__item.is-left, + .el-tabs--right .el-tabs__item.is-right { + display: block; } + +.el-tabs--left .el-tabs__header.is-left { + float: left; + margin-bottom: 0; + margin-right: 10px; } + +.el-tabs--left .el-tabs__nav-wrap.is-left { + margin-right: -1px; } + .el-tabs--left .el-tabs__nav-wrap.is-left::after { + left: auto; + right: 0; } + +.el-tabs--left .el-tabs__active-bar.is-left { + right: 0; + left: auto; } + +.el-tabs--left .el-tabs__item.is-left { + text-align: right; } + +.el-tabs--left.el-tabs--card .el-tabs__active-bar.is-left { + display: none; } + +.el-tabs--left.el-tabs--card .el-tabs__item.is-left { + border-left: none; + border-right: 1px solid #E4E7ED; + border-bottom: none; + border-top: 1px solid #E4E7ED; + text-align: left; } + +.el-tabs--left.el-tabs--card .el-tabs__item.is-left:first-child { + border-right: 1px solid #E4E7ED; + border-top: none; } + +.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active { + border: 1px solid #E4E7ED; + border-right-color: #fff; + border-left: none; + border-bottom: none; } + .el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active:first-child { + border-top: none; } + .el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active:last-child { + border-bottom: none; } + +.el-tabs--left.el-tabs--card .el-tabs__nav { + border-radius: 4px 0 0 4px; + border-bottom: 1px solid #E4E7ED; + border-right: none; } + +.el-tabs--left.el-tabs--card .el-tabs__new-tab { + float: none; } + +.el-tabs--left.el-tabs--border-card .el-tabs__header.is-left { + border-right: 1px solid #dfe4ed; } + +.el-tabs--left.el-tabs--border-card .el-tabs__item.is-left { + border: 1px solid transparent; + margin: -1px 0 -1px -1px; } + .el-tabs--left.el-tabs--border-card .el-tabs__item.is-left.is-active { + border-color: transparent; + border-top-color: #d1dbe5; + border-bottom-color: #d1dbe5; } + +.el-tabs--right .el-tabs__header.is-right { + float: right; + margin-bottom: 0; + margin-left: 10px; } + +.el-tabs--right .el-tabs__nav-wrap.is-right { + margin-left: -1px; } + .el-tabs--right .el-tabs__nav-wrap.is-right::after { + left: 0; + right: auto; } + +.el-tabs--right .el-tabs__active-bar.is-right { + left: 0; } + +.el-tabs--right.el-tabs--card .el-tabs__active-bar.is-right { + display: none; } + +.el-tabs--right.el-tabs--card .el-tabs__item.is-right { + border-bottom: none; + border-top: 1px solid #E4E7ED; } + +.el-tabs--right.el-tabs--card .el-tabs__item.is-right:first-child { + border-left: 1px solid #E4E7ED; + border-top: none; } + +.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active { + border: 1px solid #E4E7ED; + border-left-color: #fff; + border-right: none; + border-bottom: none; } + .el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active:first-child { + border-top: none; } + .el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active:last-child { + border-bottom: none; } + +.el-tabs--right.el-tabs--card .el-tabs__nav { + border-radius: 0 4px 4px 0; + border-bottom: 1px solid #E4E7ED; + border-left: none; } + +.el-tabs--right.el-tabs--border-card .el-tabs__header.is-right { + border-left: 1px solid #dfe4ed; } + +.el-tabs--right.el-tabs--border-card .el-tabs__item.is-right { + border: 1px solid transparent; + margin: -1px -1px -1px 0; } + .el-tabs--right.el-tabs--border-card .el-tabs__item.is-right.is-active { + border-color: transparent; + border-top-color: #d1dbe5; + border-bottom-color: #d1dbe5; } + +.slideInRight-transition, +.slideInLeft-transition { + display: inline-block; } + +.slideInRight-enter { + -webkit-animation: slideInRight-enter .3s; + animation: slideInRight-enter .3s; } + +.slideInRight-leave { + position: absolute; + left: 0; + right: 0; + -webkit-animation: slideInRight-leave .3s; + animation: slideInRight-leave .3s; } + +.slideInLeft-enter { + -webkit-animation: slideInLeft-enter .3s; + animation: slideInLeft-enter .3s; } + +.slideInLeft-leave { + position: absolute; + left: 0; + right: 0; + -webkit-animation: slideInLeft-leave .3s; + animation: slideInLeft-leave .3s; } + +@-webkit-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-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); } } + +@-webkit-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 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; } } + +@-webkit-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-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); } } + +@-webkit-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; } } + +@keyframes slideInLeft-leave { + 0% { + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1; } + 100% { + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + opacity: 0; } } diff --git a/theme/tag.css b/theme/tag.css new file mode 100644 index 0000000..512fe74 --- /dev/null +++ b/theme/tag.css @@ -0,0 +1,462 @@ +/* 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 +--------------------------*/ +.el-tag { + background-color: #e6f8ff; + border-color: #ccf1ff; + color: #00b9ff; + display: inline-block; + height: 32px; + padding: 0 10px; + line-height: 30px; + font-size: 12px; + color: #00B9FF; + border-width: 1px; + border-style: solid; + border-radius: 4px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + white-space: nowrap; } + .el-tag.is-hit { + border-color: #00B9FF; } + .el-tag .el-tag__close { + color: #00b9ff; } + .el-tag .el-tag__close:hover { + color: #FFFFFF; + background-color: #00b9ff; } + .el-tag.el-tag--info { + background-color: #f4f4f5; + border-color: #e9e9eb; + color: #909399; } + .el-tag.el-tag--info.is-hit { + border-color: #909399; } + .el-tag.el-tag--info .el-tag__close { + color: #909399; } + .el-tag.el-tag--info .el-tag__close:hover { + color: #FFFFFF; + background-color: #909399; } + .el-tag.el-tag--success { + background-color: #f0f9eb; + border-color: #e1f3d8; + color: #67c23a; } + .el-tag.el-tag--success.is-hit { + border-color: #67C23A; } + .el-tag.el-tag--success .el-tag__close { + color: #67c23a; } + .el-tag.el-tag--success .el-tag__close:hover { + color: #FFFFFF; + background-color: #67c23a; } + .el-tag.el-tag--warning { + background-color: #fdf6ec; + border-color: #faecd8; + color: #e6a23c; } + .el-tag.el-tag--warning.is-hit { + border-color: #E6A23C; } + .el-tag.el-tag--warning .el-tag__close { + color: #e6a23c; } + .el-tag.el-tag--warning .el-tag__close:hover { + color: #FFFFFF; + background-color: #e6a23c; } + .el-tag.el-tag--danger { + background-color: #fef0f0; + border-color: #fde2e2; + color: #f56c6c; } + .el-tag.el-tag--danger.is-hit { + border-color: #F56C6C; } + .el-tag.el-tag--danger .el-tag__close { + color: #f56c6c; } + .el-tag.el-tag--danger .el-tag__close:hover { + color: #FFFFFF; + background-color: #f56c6c; } + .el-tag .el-icon-close { + border-radius: 50%; + text-align: center; + position: relative; + cursor: pointer; + font-size: 12px; + height: 16px; + width: 16px; + line-height: 16px; + vertical-align: middle; + top: -1px; + right: -5px; } + .el-tag .el-icon-close::before { + display: block; } + .el-tag--dark { + background-color: #00b9ff; + border-color: #00b9ff; + color: white; } + .el-tag--dark.is-hit { + border-color: #00B9FF; } + .el-tag--dark .el-tag__close { + color: white; } + .el-tag--dark .el-tag__close:hover { + color: #FFFFFF; + background-color: #33c7ff; } + .el-tag--dark.el-tag--info { + background-color: #909399; + border-color: #909399; + color: white; } + .el-tag--dark.el-tag--info.is-hit { + border-color: #909399; } + .el-tag--dark.el-tag--info .el-tag__close { + color: white; } + .el-tag--dark.el-tag--info .el-tag__close:hover { + color: #FFFFFF; + background-color: #a6a9ad; } + .el-tag--dark.el-tag--success { + background-color: #67c23a; + border-color: #67c23a; + color: white; } + .el-tag--dark.el-tag--success.is-hit { + border-color: #67C23A; } + .el-tag--dark.el-tag--success .el-tag__close { + color: white; } + .el-tag--dark.el-tag--success .el-tag__close:hover { + color: #FFFFFF; + background-color: #85ce61; } + .el-tag--dark.el-tag--warning { + background-color: #e6a23c; + border-color: #e6a23c; + color: white; } + .el-tag--dark.el-tag--warning.is-hit { + border-color: #E6A23C; } + .el-tag--dark.el-tag--warning .el-tag__close { + color: white; } + .el-tag--dark.el-tag--warning .el-tag__close:hover { + color: #FFFFFF; + background-color: #ebb563; } + .el-tag--dark.el-tag--danger { + background-color: #f56c6c; + border-color: #f56c6c; + color: white; } + .el-tag--dark.el-tag--danger.is-hit { + border-color: #F56C6C; } + .el-tag--dark.el-tag--danger .el-tag__close { + color: white; } + .el-tag--dark.el-tag--danger .el-tag__close:hover { + color: #FFFFFF; + background-color: #f78989; } + .el-tag--plain { + background-color: white; + border-color: #99e3ff; + color: #00b9ff; } + .el-tag--plain.is-hit { + border-color: #00B9FF; } + .el-tag--plain .el-tag__close { + color: #00b9ff; } + .el-tag--plain .el-tag__close:hover { + color: #FFFFFF; + background-color: #00b9ff; } + .el-tag--plain.el-tag--info { + background-color: white; + border-color: #d3d4d6; + color: #909399; } + .el-tag--plain.el-tag--info.is-hit { + border-color: #909399; } + .el-tag--plain.el-tag--info .el-tag__close { + color: #909399; } + .el-tag--plain.el-tag--info .el-tag__close:hover { + color: #FFFFFF; + background-color: #909399; } + .el-tag--plain.el-tag--success { + background-color: white; + border-color: #c2e7b0; + color: #67c23a; } + .el-tag--plain.el-tag--success.is-hit { + border-color: #67C23A; } + .el-tag--plain.el-tag--success .el-tag__close { + color: #67c23a; } + .el-tag--plain.el-tag--success .el-tag__close:hover { + color: #FFFFFF; + background-color: #67c23a; } + .el-tag--plain.el-tag--warning { + background-color: white; + border-color: #f5dab1; + color: #e6a23c; } + .el-tag--plain.el-tag--warning.is-hit { + border-color: #E6A23C; } + .el-tag--plain.el-tag--warning .el-tag__close { + color: #e6a23c; } + .el-tag--plain.el-tag--warning .el-tag__close:hover { + color: #FFFFFF; + background-color: #e6a23c; } + .el-tag--plain.el-tag--danger { + background-color: white; + border-color: #fbc4c4; + color: #f56c6c; } + .el-tag--plain.el-tag--danger.is-hit { + border-color: #F56C6C; } + .el-tag--plain.el-tag--danger .el-tag__close { + color: #f56c6c; } + .el-tag--plain.el-tag--danger .el-tag__close:hover { + color: #FFFFFF; + background-color: #f56c6c; } + .el-tag--medium { + height: 28px; + line-height: 26px; } + .el-tag--medium .el-icon-close { + -webkit-transform: scale(0.8); + transform: scale(0.8); } + .el-tag--small { + height: 24px; + padding: 0 8px; + line-height: 22px; } + .el-tag--small .el-icon-close { + -webkit-transform: scale(0.8); + transform: scale(0.8); } + .el-tag--mini { + height: 20px; + padding: 0 5px; + line-height: 19px; } + .el-tag--mini .el-icon-close { + margin-left: -3px; + -webkit-transform: scale(0.7); + transform: scale(0.7); } diff --git a/theme/time-picker.css b/theme/time-picker.css new file mode 100644 index 0000000..78dfc74 --- /dev/null +++ b/theme/time-picker.css @@ -0,0 +1,2523 @@ +/* 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 +--------------------------*/ +/* 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 +--------------------------*/ +.fade-in-linear-enter-active, +.fade-in-linear-leave-active { + -webkit-transition: opacity 200ms linear; + transition: opacity 200ms linear; } + +.fade-in-linear-enter, +.fade-in-linear-leave, +.fade-in-linear-leave-active { + opacity: 0; } + +.el-fade-in-linear-enter-active, +.el-fade-in-linear-leave-active { + -webkit-transition: opacity 200ms linear; + transition: opacity 200ms linear; } + +.el-fade-in-linear-enter, +.el-fade-in-linear-leave, +.el-fade-in-linear-leave-active { + opacity: 0; } + +.el-fade-in-enter-active, +.el-fade-in-leave-active { + -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); + transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); } + +.el-fade-in-enter, +.el-fade-in-leave-active { + opacity: 0; } + +.el-zoom-in-center-enter-active, +.el-zoom-in-center-leave-active { + -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); + transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); } + +.el-zoom-in-center-enter, +.el-zoom-in-center-leave-active { + opacity: 0; + -webkit-transform: scaleX(0); + transform: scaleX(0); } + +.el-zoom-in-top-enter-active, +.el-zoom-in-top-leave-active { + opacity: 1; + -webkit-transform: scaleY(1); + transform: scaleY(1); + -webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); + transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); + -webkit-transform-origin: center top; + transform-origin: center top; } + +.el-zoom-in-top-enter, +.el-zoom-in-top-leave-active { + opacity: 0; + -webkit-transform: scaleY(0); + transform: scaleY(0); } + +.el-zoom-in-bottom-enter-active, +.el-zoom-in-bottom-leave-active { + opacity: 1; + -webkit-transform: scaleY(1); + transform: scaleY(1); + -webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); + transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); + -webkit-transform-origin: center bottom; + transform-origin: center bottom; } + +.el-zoom-in-bottom-enter, +.el-zoom-in-bottom-leave-active { + opacity: 0; + -webkit-transform: scaleY(0); + transform: scaleY(0); } + +.el-zoom-in-left-enter-active, +.el-zoom-in-left-leave-active { + opacity: 1; + -webkit-transform: scale(1, 1); + transform: scale(1, 1); + -webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); + transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); + -webkit-transform-origin: top left; + transform-origin: top left; } + +.el-zoom-in-left-enter, +.el-zoom-in-left-leave-active { + opacity: 0; + -webkit-transform: scale(0.45, 0.45); + transform: scale(0.45, 0.45); } + +.collapse-transition { + -webkit-transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out; + transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out; } + +.horizontal-collapse-transition { + -webkit-transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out; + transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out; } + +.el-list-enter-active, +.el-list-leave-active { + -webkit-transition: all 1s; + transition: all 1s; } + +.el-list-enter, .el-list-leave-active { + opacity: 0; + -webkit-transform: translateY(-30px); + transform: translateY(-30px); } + +.el-opacity-transition { + -webkit-transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1); + transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1); } + +.el-date-editor { + position: relative; + display: inline-block; + text-align: left; } + .el-date-editor.el-input, .el-date-editor.el-input__inner { + width: 220px; } + .el-date-editor--monthrange.el-input, .el-date-editor--monthrange.el-input__inner { + width: 300px; } + .el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner { + width: 350px; } + .el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner { + width: 400px; } + .el-date-editor--dates .el-input__inner { + text-overflow: ellipsis; + white-space: nowrap; } + .el-date-editor .el-icon-circle-close { + cursor: pointer; } + .el-date-editor .el-range__icon { + font-size: 14px; + margin-left: -5px; + color: #C0C4CC; + float: left; + line-height: 32px; } + .el-date-editor .el-range-input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: none; + outline: none; + display: inline-block; + height: 100%; + margin: 0; + padding: 0; + width: 39%; + text-align: center; + font-size: 14px; + color: #606266; } + .el-date-editor .el-range-input::-webkit-input-placeholder { + color: #C0C4CC; } + .el-date-editor .el-range-input::-moz-placeholder { + color: #C0C4CC; } + .el-date-editor .el-range-input::-ms-input-placeholder { + color: #C0C4CC; } + .el-date-editor .el-range-input::placeholder { + color: #C0C4CC; } + .el-date-editor .el-range-separator { + display: inline-block; + height: 100%; + padding: 0 5px; + margin: 0; + text-align: center; + line-height: 32px; + font-size: 14px; + width: 5%; + color: #303133; } + .el-date-editor .el-range__close-icon { + font-size: 14px; + color: #C0C4CC; + width: 25px; + display: inline-block; + float: right; + line-height: 32px; } + +.el-range-editor.el-input__inner { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 3px 10px; } + +.el-range-editor .el-range-input { + line-height: 1; } + +.el-range-editor.is-active { + border-color: #00B9FF; } + .el-range-editor.is-active:hover { + border-color: #00B9FF; } + +.el-range-editor--medium.el-input__inner { + height: 36px; } + +.el-range-editor--medium .el-range-separator { + line-height: 28px; + font-size: 14px; } + +.el-range-editor--medium .el-range-input { + font-size: 14px; } + +.el-range-editor--medium .el-range__icon, +.el-range-editor--medium .el-range__close-icon { + line-height: 28px; } + +.el-range-editor--small.el-input__inner { + height: 32px; } + +.el-range-editor--small .el-range-separator { + line-height: 24px; + font-size: 13px; } + +.el-range-editor--small .el-range-input { + font-size: 13px; } + +.el-range-editor--small .el-range__icon, +.el-range-editor--small .el-range__close-icon { + line-height: 24px; } + +.el-range-editor--mini.el-input__inner { + height: 28px; } + +.el-range-editor--mini .el-range-separator { + line-height: 20px; + font-size: 12px; } + +.el-range-editor--mini .el-range-input { + font-size: 12px; } + +.el-range-editor--mini .el-range__icon, +.el-range-editor--mini .el-range__close-icon { + line-height: 20px; } + +.el-range-editor.is-disabled { + background-color: #F5F7FA; + border-color: #E4E7ED; + color: #C0C4CC; + cursor: not-allowed; } + .el-range-editor.is-disabled:hover, .el-range-editor.is-disabled:focus { + border-color: #E4E7ED; } + .el-range-editor.is-disabled input { + background-color: #F5F7FA; + color: #C0C4CC; + cursor: not-allowed; } + .el-range-editor.is-disabled input::-webkit-input-placeholder { + color: #C0C4CC; } + .el-range-editor.is-disabled input::-moz-placeholder { + color: #C0C4CC; } + .el-range-editor.is-disabled input::-ms-input-placeholder { + color: #C0C4CC; } + .el-range-editor.is-disabled input::placeholder { + color: #C0C4CC; } + .el-range-editor.is-disabled .el-range-separator { + color: #C0C4CC; } + +/* 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 +--------------------------*/ +.el-picker-panel { + color: #606266; + border: 1px solid #E4E7ED; + -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + background: #FFFFFF; + border-radius: 4px; + line-height: 30px; + margin: 5px 0; } + .el-picker-panel__body::after, .el-picker-panel__body-wrapper::after { + content: ""; + display: table; + clear: both; } + .el-picker-panel__content { + position: relative; + margin: 15px; } + .el-picker-panel__footer { + border-top: 1px solid #e4e4e4; + padding: 4px; + text-align: right; + background-color: #FFFFFF; + position: relative; + font-size: 0; } + .el-picker-panel__shortcut { + display: block; + width: 100%; + border: 0; + background-color: transparent; + line-height: 28px; + font-size: 14px; + color: #606266; + padding-left: 12px; + text-align: left; + outline: none; + cursor: pointer; } + .el-picker-panel__shortcut:hover { + color: #00B9FF; } + .el-picker-panel__shortcut.active { + background-color: #e6f1fe; + color: #00B9FF; } + .el-picker-panel__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; } + .el-picker-panel__btn[disabled] { + color: #cccccc; + cursor: not-allowed; } + .el-picker-panel__icon-btn { + font-size: 12px; + color: #303133; + border: 0; + background: transparent; + cursor: pointer; + outline: none; + margin-top: 8px; } + .el-picker-panel__icon-btn:hover { + color: #00B9FF; } + .el-picker-panel__icon-btn.is-disabled { + color: #bbb; } + .el-picker-panel__icon-btn.is-disabled:hover { + cursor: not-allowed; } + .el-picker-panel__link-btn { + vertical-align: middle; } + +.el-picker-panel *[slot=sidebar], +.el-picker-panel__sidebar { + position: absolute; + top: 0; + bottom: 0; + width: 110px; + border-right: 1px solid #e4e4e4; + -webkit-box-sizing: border-box; + box-sizing: border-box; + padding-top: 6px; + background-color: #FFFFFF; + overflow: auto; } + +.el-picker-panel *[slot=sidebar] + .el-picker-panel__body, +.el-picker-panel__sidebar + .el-picker-panel__body { + margin-left: 110px; } + +/* 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 +--------------------------*/ +.el-time-spinner.has-seconds .el-time-spinner__wrapper { + width: 33.3%; } + +.el-time-spinner__wrapper { + max-height: 190px; + overflow: auto; + display: inline-block; + width: 50%; + vertical-align: top; + position: relative; } + .el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) { + padding-bottom: 15px; } + .el-time-spinner__wrapper.is-arrow { + -webkit-box-sizing: border-box; + box-sizing: border-box; + text-align: center; + overflow: hidden; } + .el-time-spinner__wrapper.is-arrow .el-time-spinner__list { + -webkit-transform: translateY(-32px); + transform: translateY(-32px); } + .el-time-spinner__wrapper.is-arrow .el-time-spinner__item:hover:not(.disabled):not(.active) { + background: #FFFFFF; + cursor: default; } + +.el-time-spinner__arrow { + font-size: 12px; + color: #909399; + position: absolute; + left: 0; + width: 100%; + z-index: 1; + text-align: center; + height: 30px; + line-height: 30px; + cursor: pointer; } + .el-time-spinner__arrow:hover { + color: #00B9FF; } + .el-time-spinner__arrow.el-icon-arrow-up { + top: 10px; } + .el-time-spinner__arrow.el-icon-arrow-down { + bottom: 10px; } + +.el-time-spinner__input.el-input { + width: 70%; } + .el-time-spinner__input.el-input .el-input__inner { + padding: 0; + text-align: center; } + +.el-time-spinner__list { + padding: 0; + margin: 0; + list-style: none; + text-align: center; } + .el-time-spinner__list::after, .el-time-spinner__list::before { + content: ''; + display: block; + width: 100%; + height: 80px; } + +.el-time-spinner__item { + height: 32px; + line-height: 32px; + font-size: 12px; + color: #606266; } + .el-time-spinner__item:hover:not(.disabled):not(.active) { + background: #F5F7FA; + cursor: pointer; } + .el-time-spinner__item.active:not(.disabled) { + color: #303133; + font-weight: bold; } + .el-time-spinner__item.disabled { + color: #C0C4CC; + cursor: not-allowed; } + +/* 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 +--------------------------*/ +.el-time-panel { + margin: 5px 0; + border: solid 1px #E4E7ED; + background-color: #FFFFFF; + -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + border-radius: 2px; + position: absolute; + width: 180px; + left: 0; + z-index: 1000; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-box-sizing: content-box; + box-sizing: content-box; } + .el-time-panel__content { + font-size: 0; + position: relative; + overflow: hidden; } + .el-time-panel__content::after, .el-time-panel__content::before { + content: ""; + top: 50%; + position: absolute; + margin-top: -15px; + height: 32px; + z-index: -1; + left: 0; + right: 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; + padding-top: 6px; + text-align: left; + border-top: 1px solid #E4E7ED; + border-bottom: 1px solid #E4E7ED; } + .el-time-panel__content::after { + left: 50%; + margin-left: 12%; + margin-right: 12%; } + .el-time-panel__content::before { + padding-left: 50%; + margin-right: 12%; + margin-left: 12%; } + .el-time-panel__content.has-seconds::after { + left: calc(100% / 3 * 2); } + .el-time-panel__content.has-seconds::before { + padding-left: calc(100% / 3); } + .el-time-panel__footer { + border-top: 1px solid #e4e4e4; + padding: 4px; + height: 36px; + line-height: 25px; + text-align: right; + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .el-time-panel__btn { + border: none; + line-height: 28px; + padding: 0 5px; + margin: 0 5px; + cursor: pointer; + background-color: transparent; + outline: none; + font-size: 12px; + color: #303133; } + .el-time-panel__btn.confirm { + font-weight: 800; + color: #00B9FF; } + +/* 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 +--------------------------*/ +.el-time-range-picker { + width: 354px; + overflow: visible; } + .el-time-range-picker__content { + position: relative; + text-align: center; + padding: 10px; } + .el-time-range-picker__cell { + -webkit-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + padding: 4px 7px 7px; + width: 50%; + display: inline-block; } + .el-time-range-picker__header { + margin-bottom: 5px; + text-align: center; + font-size: 14px; } + .el-time-range-picker__body { + border-radius: 2px; + border: 1px solid #E4E7ED; } + +/* 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 +--------------------------*/ +.el-textarea { + position: relative; + display: inline-block; + width: 100%; + vertical-align: bottom; + font-size: 14px; } + .el-textarea__inner { + display: block; + resize: vertical; + padding: 5px 15px; + line-height: 1.5; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + font-size: inherit; + color: #606266; + background-color: #FFFFFF; + background-image: none; + border: 1px solid #DCDFE6; + border-radius: 4px; + -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); } + .el-textarea__inner::-webkit-input-placeholder { + color: #C0C4CC; } + .el-textarea__inner::-moz-placeholder { + color: #C0C4CC; } + .el-textarea__inner::-ms-input-placeholder { + color: #C0C4CC; } + .el-textarea__inner::placeholder { + color: #C0C4CC; } + .el-textarea__inner:hover { + border-color: #C0C4CC; } + .el-textarea__inner:focus { + outline: none; + border-color: #00B9FF; } + .el-textarea .el-input__count { + color: #909399; + background: #FFFFFF; + position: absolute; + font-size: 12px; + bottom: 5px; + right: 10px; } + .el-textarea.is-disabled .el-textarea__inner { + background-color: #F5F7FA; + border-color: #E4E7ED; + color: #C0C4CC; + cursor: not-allowed; } + .el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder { + color: #C0C4CC; } + .el-textarea.is-disabled .el-textarea__inner::-moz-placeholder { + color: #C0C4CC; } + .el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder { + color: #C0C4CC; } + .el-textarea.is-disabled .el-textarea__inner::placeholder { + color: #C0C4CC; } + .el-textarea.is-exceed .el-textarea__inner { + border-color: #F56C6C; } + .el-textarea.is-exceed .el-input__count { + color: #F56C6C; } + +.el-input { + position: relative; + font-size: 14px; + display: inline-block; + width: 100%; } + .el-input::-webkit-scrollbar { + z-index: 11; + width: 6px; } + .el-input::-webkit-scrollbar:horizontal { + height: 6px; } + .el-input::-webkit-scrollbar-thumb { + border-radius: 5px; + width: 6px; + background: #b4bccc; } + .el-input::-webkit-scrollbar-corner { + background: #fff; } + .el-input::-webkit-scrollbar-track { + background: #fff; } + .el-input::-webkit-scrollbar-track-piece { + background: #fff; + width: 6px; } + .el-input .el-input__clear { + color: #C0C4CC; + font-size: 14px; + cursor: pointer; + -webkit-transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); } + .el-input .el-input__clear:hover { + color: #909399; } + .el-input .el-input__count { + height: 100%; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #909399; + font-size: 12px; } + .el-input .el-input__count .el-input__count-inner { + background: #FFFFFF; + line-height: initial; + display: inline-block; + padding: 0 5px; } + .el-input__inner { + -webkit-appearance: none; + background-color: #FFFFFF; + background-image: none; + border-radius: 4px; + border: 1px solid #DCDFE6; + -webkit-box-sizing: border-box; + box-sizing: border-box; + color: #606266; + display: inline-block; + font-size: inherit; + height: 40px; + line-height: 40px; + outline: none; + padding: 0 15px; + -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + width: 100%; } + .el-input__inner::-webkit-input-placeholder { + color: #C0C4CC; } + .el-input__inner::-moz-placeholder { + color: #C0C4CC; } + .el-input__inner::-ms-input-placeholder { + color: #C0C4CC; } + .el-input__inner::placeholder { + color: #C0C4CC; } + .el-input__inner:hover { + border-color: #C0C4CC; } + .el-input__inner:focus { + outline: none; + border-color: #00B9FF; } + .el-input__suffix { + position: absolute; + height: 100%; + right: 5px; + top: 0; + text-align: center; + color: #C0C4CC; + -webkit-transition: all .3s; + transition: all .3s; + pointer-events: none; } + .el-input__suffix-inner { + pointer-events: all; } + .el-input__prefix { + position: absolute; + height: 100%; + left: 5px; + top: 0; + text-align: center; + color: #C0C4CC; + -webkit-transition: all .3s; + transition: all .3s; } + .el-input__icon { + height: 100%; + width: 25px; + text-align: center; + -webkit-transition: all .3s; + transition: all .3s; + line-height: 40px; } + .el-input__icon:after { + content: ''; + height: 100%; + width: 0; + display: inline-block; + vertical-align: middle; } + .el-input__validateIcon { + pointer-events: none; } + .el-input.is-active .el-input__inner { + outline: none; + border-color: #00B9FF; } + .el-input.is-disabled .el-input__inner { + background-color: #F5F7FA; + border-color: #E4E7ED; + color: #C0C4CC; + cursor: not-allowed; } + .el-input.is-disabled .el-input__inner::-webkit-input-placeholder { + color: #C0C4CC; } + .el-input.is-disabled .el-input__inner::-moz-placeholder { + color: #C0C4CC; } + .el-input.is-disabled .el-input__inner::-ms-input-placeholder { + color: #C0C4CC; } + .el-input.is-disabled .el-input__inner::placeholder { + color: #C0C4CC; } + .el-input.is-disabled .el-input__icon { + cursor: not-allowed; } + .el-input.is-exceed .el-input__inner { + border-color: #F56C6C; } + .el-input.is-exceed .el-input__suffix .el-input__count { + color: #F56C6C; } + .el-input--suffix .el-input__inner { + padding-right: 30px; } + .el-input--prefix .el-input__inner { + padding-left: 30px; } + .el-input--medium { + font-size: 14px; } + .el-input--medium .el-input__inner { + height: 36px; + line-height: 36px; } + .el-input--medium .el-input__icon { + line-height: 36px; } + .el-input--small { + font-size: 13px; } + .el-input--small .el-input__inner { + height: 32px; + line-height: 32px; } + .el-input--small .el-input__icon { + line-height: 32px; } + .el-input--mini { + font-size: 12px; } + .el-input--mini .el-input__inner { + height: 28px; + line-height: 28px; } + .el-input--mini .el-input__icon { + line-height: 28px; } + +.el-input-group { + line-height: normal; + display: inline-table; + width: 100%; + border-collapse: separate; + border-spacing: 0; } + .el-input-group > .el-input__inner { + vertical-align: middle; + display: table-cell; } + .el-input-group__append, .el-input-group__prepend { + background-color: #F5F7FA; + color: #909399; + vertical-align: middle; + display: table-cell; + position: relative; + border: 1px solid #DCDFE6; + border-radius: 4px; + padding: 0 20px; + width: 1px; + white-space: nowrap; } + .el-input-group__append:focus, .el-input-group__prepend:focus { + outline: none; } + .el-input-group__append .el-select, + .el-input-group__append .el-button, .el-input-group__prepend .el-select, + .el-input-group__prepend .el-button { + display: inline-block; + margin: -10px -20px; } + .el-input-group__append button.el-button, + .el-input-group__append div.el-select .el-input__inner, + .el-input-group__append div.el-select:hover .el-input__inner, .el-input-group__prepend button.el-button, + .el-input-group__prepend div.el-select .el-input__inner, + .el-input-group__prepend div.el-select:hover .el-input__inner { + border-color: transparent; + background-color: transparent; + color: inherit; + border-top: 0; + border-bottom: 0; } + .el-input-group__append .el-button, + .el-input-group__append .el-input, .el-input-group__prepend .el-button, + .el-input-group__prepend .el-input { + font-size: inherit; } + .el-input-group__prepend { + border-right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + .el-input-group__append { + border-left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + .el-input-group--prepend .el-input__inner { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + .el-input-group--prepend .el-select .el-input.is-focus .el-input__inner { + border-color: transparent; } + .el-input-group--append .el-input__inner { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + .el-input-group--append .el-select .el-input.is-focus .el-input__inner { + border-color: transparent; } + +/** disalbe default clear on IE */ +.el-input__inner::-ms-clear { + display: none; + width: 0; + height: 0; } + +/* 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 +--------------------------*/ +.el-scrollbar { + overflow: hidden; + position: relative; } + .el-scrollbar:hover > .el-scrollbar__bar, .el-scrollbar:active > .el-scrollbar__bar, .el-scrollbar:focus > .el-scrollbar__bar { + opacity: 1; + -webkit-transition: opacity 340ms ease-out; + transition: opacity 340ms ease-out; } + .el-scrollbar__wrap { + overflow: scroll; + height: 100%; } + .el-scrollbar__wrap--hidden-default { + scrollbar-width: none; } + .el-scrollbar__wrap--hidden-default::-webkit-scrollbar { + width: 0; + height: 0; } + .el-scrollbar__thumb { + position: relative; + display: block; + width: 0; + height: 0; + cursor: pointer; + border-radius: inherit; + background-color: rgba(144, 147, 153, 0.3); + -webkit-transition: .3s background-color; + transition: .3s background-color; } + .el-scrollbar__thumb:hover { + background-color: rgba(144, 147, 153, 0.5); } + .el-scrollbar__bar { + position: absolute; + right: 2px; + bottom: 2px; + z-index: 1; + border-radius: 4px; + opacity: 0; + -webkit-transition: opacity 120ms ease-out; + transition: opacity 120ms ease-out; } + .el-scrollbar__bar.is-vertical { + width: 6px; + top: 2px; } + .el-scrollbar__bar.is-vertical > div { + width: 100%; } + .el-scrollbar__bar.is-horizontal { + height: 6px; + left: 2px; } + .el-scrollbar__bar.is-horizontal > div { + height: 100%; } + +/* 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 +--------------------------*/ +.el-popper .popper__arrow, +.el-popper .popper__arrow::after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; } + +.el-popper .popper__arrow { + border-width: 6px; + -webkit-filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); + filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); } + +.el-popper .popper__arrow::after { + content: " "; + border-width: 6px; } + +.el-popper[x-placement^="top"] { + margin-bottom: 12px; } + +.el-popper[x-placement^="top"] .popper__arrow { + bottom: -6px; + left: 50%; + margin-right: 3px; + border-top-color: #EBEEF5; + border-bottom-width: 0; } + .el-popper[x-placement^="top"] .popper__arrow::after { + bottom: 1px; + margin-left: -6px; + border-top-color: #FFFFFF; + border-bottom-width: 0; } + +.el-popper[x-placement^="bottom"] { + margin-top: 12px; } + +.el-popper[x-placement^="bottom"] .popper__arrow { + top: -6px; + left: 50%; + margin-right: 3px; + border-top-width: 0; + border-bottom-color: #EBEEF5; } + .el-popper[x-placement^="bottom"] .popper__arrow::after { + top: 1px; + margin-left: -6px; + border-top-width: 0; + border-bottom-color: #FFFFFF; } + +.el-popper[x-placement^="right"] { + margin-left: 12px; } + +.el-popper[x-placement^="right"] .popper__arrow { + top: 50%; + left: -6px; + margin-bottom: 3px; + border-right-color: #EBEEF5; + border-left-width: 0; } + .el-popper[x-placement^="right"] .popper__arrow::after { + bottom: -6px; + left: 1px; + border-right-color: #FFFFFF; + border-left-width: 0; } + +.el-popper[x-placement^="left"] { + margin-right: 12px; } + +.el-popper[x-placement^="left"] .popper__arrow { + top: 50%; + right: -6px; + margin-bottom: 3px; + border-right-width: 0; + border-left-color: #EBEEF5; } + .el-popper[x-placement^="left"] .popper__arrow::after { + right: 1px; + bottom: -6px; + margin-left: -6px; + border-right-width: 0; + border-left-color: #FFFFFF; } diff --git a/theme/time-select.css b/theme/time-select.css new file mode 100644 index 0000000..ebc0ecc --- /dev/null +++ b/theme/time-select.css @@ -0,0 +1,1918 @@ +/* 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 +--------------------------*/ +/* 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 +--------------------------*/ +/* 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 +--------------------------*/ +.fade-in-linear-enter-active, +.fade-in-linear-leave-active { + -webkit-transition: opacity 200ms linear; + transition: opacity 200ms linear; } + +.fade-in-linear-enter, +.fade-in-linear-leave, +.fade-in-linear-leave-active { + opacity: 0; } + +.el-fade-in-linear-enter-active, +.el-fade-in-linear-leave-active { + -webkit-transition: opacity 200ms linear; + transition: opacity 200ms linear; } + +.el-fade-in-linear-enter, +.el-fade-in-linear-leave, +.el-fade-in-linear-leave-active { + opacity: 0; } + +.el-fade-in-enter-active, +.el-fade-in-leave-active { + -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); + transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); } + +.el-fade-in-enter, +.el-fade-in-leave-active { + opacity: 0; } + +.el-zoom-in-center-enter-active, +.el-zoom-in-center-leave-active { + -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); + transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); } + +.el-zoom-in-center-enter, +.el-zoom-in-center-leave-active { + opacity: 0; + -webkit-transform: scaleX(0); + transform: scaleX(0); } + +.el-zoom-in-top-enter-active, +.el-zoom-in-top-leave-active { + opacity: 1; + -webkit-transform: scaleY(1); + transform: scaleY(1); + -webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); + transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); + -webkit-transform-origin: center top; + transform-origin: center top; } + +.el-zoom-in-top-enter, +.el-zoom-in-top-leave-active { + opacity: 0; + -webkit-transform: scaleY(0); + transform: scaleY(0); } + +.el-zoom-in-bottom-enter-active, +.el-zoom-in-bottom-leave-active { + opacity: 1; + -webkit-transform: scaleY(1); + transform: scaleY(1); + -webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); + transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); + -webkit-transform-origin: center bottom; + transform-origin: center bottom; } + +.el-zoom-in-bottom-enter, +.el-zoom-in-bottom-leave-active { + opacity: 0; + -webkit-transform: scaleY(0); + transform: scaleY(0); } + +.el-zoom-in-left-enter-active, +.el-zoom-in-left-leave-active { + opacity: 1; + -webkit-transform: scale(1, 1); + transform: scale(1, 1); + -webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); + transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); + -webkit-transform-origin: top left; + transform-origin: top left; } + +.el-zoom-in-left-enter, +.el-zoom-in-left-leave-active { + opacity: 0; + -webkit-transform: scale(0.45, 0.45); + transform: scale(0.45, 0.45); } + +.collapse-transition { + -webkit-transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out; + transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out; } + +.horizontal-collapse-transition { + -webkit-transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out; + transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out; } + +.el-list-enter-active, +.el-list-leave-active { + -webkit-transition: all 1s; + transition: all 1s; } + +.el-list-enter, .el-list-leave-active { + opacity: 0; + -webkit-transform: translateY(-30px); + transform: translateY(-30px); } + +.el-opacity-transition { + -webkit-transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1); + transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1); } + +.el-date-editor { + position: relative; + display: inline-block; + text-align: left; } + .el-date-editor.el-input, .el-date-editor.el-input__inner { + width: 220px; } + .el-date-editor--monthrange.el-input, .el-date-editor--monthrange.el-input__inner { + width: 300px; } + .el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner { + width: 350px; } + .el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner { + width: 400px; } + .el-date-editor--dates .el-input__inner { + text-overflow: ellipsis; + white-space: nowrap; } + .el-date-editor .el-icon-circle-close { + cursor: pointer; } + .el-date-editor .el-range__icon { + font-size: 14px; + margin-left: -5px; + color: #C0C4CC; + float: left; + line-height: 32px; } + .el-date-editor .el-range-input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: none; + outline: none; + display: inline-block; + height: 100%; + margin: 0; + padding: 0; + width: 39%; + text-align: center; + font-size: 14px; + color: #606266; } + .el-date-editor .el-range-input::-webkit-input-placeholder { + color: #C0C4CC; } + .el-date-editor .el-range-input::-moz-placeholder { + color: #C0C4CC; } + .el-date-editor .el-range-input::-ms-input-placeholder { + color: #C0C4CC; } + .el-date-editor .el-range-input::placeholder { + color: #C0C4CC; } + .el-date-editor .el-range-separator { + display: inline-block; + height: 100%; + padding: 0 5px; + margin: 0; + text-align: center; + line-height: 32px; + font-size: 14px; + width: 5%; + color: #303133; } + .el-date-editor .el-range__close-icon { + font-size: 14px; + color: #C0C4CC; + width: 25px; + display: inline-block; + float: right; + line-height: 32px; } + +.el-range-editor.el-input__inner { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 3px 10px; } + +.el-range-editor .el-range-input { + line-height: 1; } + +.el-range-editor.is-active { + border-color: #00B9FF; } + .el-range-editor.is-active:hover { + border-color: #00B9FF; } + +.el-range-editor--medium.el-input__inner { + height: 36px; } + +.el-range-editor--medium .el-range-separator { + line-height: 28px; + font-size: 14px; } + +.el-range-editor--medium .el-range-input { + font-size: 14px; } + +.el-range-editor--medium .el-range__icon, +.el-range-editor--medium .el-range__close-icon { + line-height: 28px; } + +.el-range-editor--small.el-input__inner { + height: 32px; } + +.el-range-editor--small .el-range-separator { + line-height: 24px; + font-size: 13px; } + +.el-range-editor--small .el-range-input { + font-size: 13px; } + +.el-range-editor--small .el-range__icon, +.el-range-editor--small .el-range__close-icon { + line-height: 24px; } + +.el-range-editor--mini.el-input__inner { + height: 28px; } + +.el-range-editor--mini .el-range-separator { + line-height: 20px; + font-size: 12px; } + +.el-range-editor--mini .el-range-input { + font-size: 12px; } + +.el-range-editor--mini .el-range__icon, +.el-range-editor--mini .el-range__close-icon { + line-height: 20px; } + +.el-range-editor.is-disabled { + background-color: #F5F7FA; + border-color: #E4E7ED; + color: #C0C4CC; + cursor: not-allowed; } + .el-range-editor.is-disabled:hover, .el-range-editor.is-disabled:focus { + border-color: #E4E7ED; } + .el-range-editor.is-disabled input { + background-color: #F5F7FA; + color: #C0C4CC; + cursor: not-allowed; } + .el-range-editor.is-disabled input::-webkit-input-placeholder { + color: #C0C4CC; } + .el-range-editor.is-disabled input::-moz-placeholder { + color: #C0C4CC; } + .el-range-editor.is-disabled input::-ms-input-placeholder { + color: #C0C4CC; } + .el-range-editor.is-disabled input::placeholder { + color: #C0C4CC; } + .el-range-editor.is-disabled .el-range-separator { + color: #C0C4CC; } + +/* 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 +--------------------------*/ +/* 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 +--------------------------*/ +.el-picker-panel { + color: #606266; + border: 1px solid #E4E7ED; + -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + background: #FFFFFF; + border-radius: 4px; + line-height: 30px; + margin: 5px 0; } + .el-picker-panel__body::after, .el-picker-panel__body-wrapper::after { + content: ""; + display: table; + clear: both; } + .el-picker-panel__content { + position: relative; + margin: 15px; } + .el-picker-panel__footer { + border-top: 1px solid #e4e4e4; + padding: 4px; + text-align: right; + background-color: #FFFFFF; + position: relative; + font-size: 0; } + .el-picker-panel__shortcut { + display: block; + width: 100%; + border: 0; + background-color: transparent; + line-height: 28px; + font-size: 14px; + color: #606266; + padding-left: 12px; + text-align: left; + outline: none; + cursor: pointer; } + .el-picker-panel__shortcut:hover { + color: #00B9FF; } + .el-picker-panel__shortcut.active { + background-color: #e6f1fe; + color: #00B9FF; } + .el-picker-panel__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; } + .el-picker-panel__btn[disabled] { + color: #cccccc; + cursor: not-allowed; } + .el-picker-panel__icon-btn { + font-size: 12px; + color: #303133; + border: 0; + background: transparent; + cursor: pointer; + outline: none; + margin-top: 8px; } + .el-picker-panel__icon-btn:hover { + color: #00B9FF; } + .el-picker-panel__icon-btn.is-disabled { + color: #bbb; } + .el-picker-panel__icon-btn.is-disabled:hover { + cursor: not-allowed; } + .el-picker-panel__link-btn { + vertical-align: middle; } + +.el-picker-panel *[slot=sidebar], +.el-picker-panel__sidebar { + position: absolute; + top: 0; + bottom: 0; + width: 110px; + border-right: 1px solid #e4e4e4; + -webkit-box-sizing: border-box; + box-sizing: border-box; + padding-top: 6px; + background-color: #FFFFFF; + overflow: auto; } + +.el-picker-panel *[slot=sidebar] + .el-picker-panel__body, +.el-picker-panel__sidebar + .el-picker-panel__body { + margin-left: 110px; } + +.el-date-picker { + width: 322px; } + .el-date-picker.has-sidebar.has-time { + width: 434px; } + .el-date-picker.has-sidebar { + width: 438px; } + .el-date-picker.has-time .el-picker-panel__body-wrapper { + position: relative; } + .el-date-picker .el-picker-panel__content { + width: 292px; } + .el-date-picker table { + table-layout: fixed; + width: 100%; } + .el-date-picker__editor-wrap { + position: relative; + display: table-cell; + padding: 0 5px; } + .el-date-picker__time-header { + position: relative; + border-bottom: 1px solid #e4e4e4; + font-size: 12px; + padding: 8px 5px 5px 5px; + display: table; + width: 100%; + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .el-date-picker__header { + margin: 12px; + text-align: center; } + .el-date-picker__header--bordered { + margin-bottom: 0; + padding-bottom: 12px; + border-bottom: solid 1px #EBEEF5; } + .el-date-picker__header--bordered + .el-picker-panel__content { + margin-top: 0; } + .el-date-picker__header-label { + font-size: 16px; + font-weight: 500; + padding: 0 5px; + line-height: 22px; + text-align: center; + cursor: pointer; + color: #606266; } + .el-date-picker__header-label:hover { + color: #00B9FF; } + .el-date-picker__header-label.active { + color: #00B9FF; } + .el-date-picker__prev-btn { + float: left; } + .el-date-picker__next-btn { + float: right; } + .el-date-picker__time-wrap { + padding: 10px; + text-align: center; } + .el-date-picker__time-label { + float: left; + cursor: pointer; + line-height: 30px; + margin-left: 10px; } + +/* 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 +--------------------------*/ +.el-scrollbar { + overflow: hidden; + position: relative; } + .el-scrollbar:hover > .el-scrollbar__bar, .el-scrollbar:active > .el-scrollbar__bar, .el-scrollbar:focus > .el-scrollbar__bar { + opacity: 1; + -webkit-transition: opacity 340ms ease-out; + transition: opacity 340ms ease-out; } + .el-scrollbar__wrap { + overflow: scroll; + height: 100%; } + .el-scrollbar__wrap--hidden-default { + scrollbar-width: none; } + .el-scrollbar__wrap--hidden-default::-webkit-scrollbar { + width: 0; + height: 0; } + .el-scrollbar__thumb { + position: relative; + display: block; + width: 0; + height: 0; + cursor: pointer; + border-radius: inherit; + background-color: rgba(144, 147, 153, 0.3); + -webkit-transition: .3s background-color; + transition: .3s background-color; } + .el-scrollbar__thumb:hover { + background-color: rgba(144, 147, 153, 0.5); } + .el-scrollbar__bar { + position: absolute; + right: 2px; + bottom: 2px; + z-index: 1; + border-radius: 4px; + opacity: 0; + -webkit-transition: opacity 120ms ease-out; + transition: opacity 120ms ease-out; } + .el-scrollbar__bar.is-vertical { + width: 6px; + top: 2px; } + .el-scrollbar__bar.is-vertical > div { + width: 100%; } + .el-scrollbar__bar.is-horizontal { + height: 6px; + left: 2px; } + .el-scrollbar__bar.is-horizontal > div { + height: 100%; } + +/* 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 +--------------------------*/ +.el-popper .popper__arrow, +.el-popper .popper__arrow::after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; } + +.el-popper .popper__arrow { + border-width: 6px; + -webkit-filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); + filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); } + +.el-popper .popper__arrow::after { + content: " "; + border-width: 6px; } + +.el-popper[x-placement^="top"] { + margin-bottom: 12px; } + +.el-popper[x-placement^="top"] .popper__arrow { + bottom: -6px; + left: 50%; + margin-right: 3px; + border-top-color: #EBEEF5; + border-bottom-width: 0; } + .el-popper[x-placement^="top"] .popper__arrow::after { + bottom: 1px; + margin-left: -6px; + border-top-color: #FFFFFF; + border-bottom-width: 0; } + +.el-popper[x-placement^="bottom"] { + margin-top: 12px; } + +.el-popper[x-placement^="bottom"] .popper__arrow { + top: -6px; + left: 50%; + margin-right: 3px; + border-top-width: 0; + border-bottom-color: #EBEEF5; } + .el-popper[x-placement^="bottom"] .popper__arrow::after { + top: 1px; + margin-left: -6px; + border-top-width: 0; + border-bottom-color: #FFFFFF; } + +.el-popper[x-placement^="right"] { + margin-left: 12px; } + +.el-popper[x-placement^="right"] .popper__arrow { + top: 50%; + left: -6px; + margin-bottom: 3px; + border-right-color: #EBEEF5; + border-left-width: 0; } + .el-popper[x-placement^="right"] .popper__arrow::after { + bottom: -6px; + left: 1px; + border-right-color: #FFFFFF; + border-left-width: 0; } + +.el-popper[x-placement^="left"] { + margin-right: 12px; } + +.el-popper[x-placement^="left"] .popper__arrow { + top: 50%; + right: -6px; + margin-bottom: 3px; + border-right-width: 0; + border-left-color: #EBEEF5; } + .el-popper[x-placement^="left"] .popper__arrow::after { + right: 1px; + bottom: -6px; + margin-left: -6px; + border-right-width: 0; + border-left-color: #FFFFFF; } + +.time-select { + margin: 5px 0; + min-width: 0; } + +.time-select .el-picker-panel__content { + max-height: 200px; + margin: 0; } + +.time-select-item { + padding: 8px 10px; + font-size: 14px; + line-height: 20px; } + +.time-select-item.selected:not(.disabled) { + color: #00B9FF; + font-weight: bold; } + +.time-select-item.disabled { + color: #E4E7ED; + cursor: not-allowed; } + +.time-select-item:hover { + background-color: #F5F7FA; + font-weight: bold; + cursor: pointer; } diff --git a/theme/timeline-item.css b/theme/timeline-item.css new file mode 100644 index 0000000..4538a14 --- /dev/null +++ b/theme/timeline-item.css @@ -0,0 +1,318 @@ +/* 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 +--------------------------*/ +.el-timeline-item { + position: relative; + padding-bottom: 20px; } + .el-timeline-item__wrapper { + position: relative; + padding-left: 28px; + top: -3px; } + .el-timeline-item__tail { + position: absolute; + left: 4px; + height: 100%; + border-left: 2px solid #E4E7ED; } + .el-timeline-item__icon { + color: #FFFFFF; + font-size: 13px; } + .el-timeline-item__node { + position: absolute; + background-color: #E4E7ED; + border-radius: 50%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } + .el-timeline-item__node--normal { + left: -1px; + width: 12px; + height: 12px; } + .el-timeline-item__node--large { + left: -2px; + width: 14px; + height: 14px; } + .el-timeline-item__node--primary { + background-color: #00B9FF; } + .el-timeline-item__node--success { + background-color: #67C23A; } + .el-timeline-item__node--warning { + background-color: #E6A23C; } + .el-timeline-item__node--danger { + background-color: #F56C6C; } + .el-timeline-item__node--info { + background-color: #909399; } + .el-timeline-item__dot { + position: absolute; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } + .el-timeline-item__content { + color: #303133; } + .el-timeline-item__timestamp { + color: #909399; + line-height: 1; + font-size: 13px; } + .el-timeline-item__timestamp.is-top { + margin-bottom: 8px; + padding-top: 4px; } + .el-timeline-item__timestamp.is-bottom { + margin-top: 8px; } diff --git a/theme/timeline.css b/theme/timeline.css new file mode 100644 index 0000000..0456b06 --- /dev/null +++ b/theme/timeline.css @@ -0,0 +1,256 @@ +/* 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 +--------------------------*/ +.el-timeline { + margin: 0; + font-size: 14px; + list-style: none; } + .el-timeline .el-timeline-item:last-child .el-timeline-item__tail { + display: none; } diff --git a/theme/tooltip.css b/theme/tooltip.css new file mode 100644 index 0000000..876f42e --- /dev/null +++ b/theme/tooltip.css @@ -0,0 +1,342 @@ +/* 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 +--------------------------*/ +.el-tooltip:focus:not(.focusing), .el-tooltip:focus:hover { + outline-width: 0; } + +.el-tooltip__popper { + position: absolute; + border-radius: 4px; + padding: 10px; + z-index: 2000; + font-size: 12px; + line-height: 1.2; + min-width: 10px; + word-wrap: break-word; } + .el-tooltip__popper .popper__arrow, + .el-tooltip__popper .popper__arrow::after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; } + .el-tooltip__popper .popper__arrow { + border-width: 6px; } + .el-tooltip__popper .popper__arrow::after { + content: " "; + border-width: 5px; } + .el-tooltip__popper[x-placement^="top"] { + margin-bottom: 12px; } + .el-tooltip__popper[x-placement^="top"] .popper__arrow { + bottom: -6px; + border-top-color: #303133; + border-bottom-width: 0; } + .el-tooltip__popper[x-placement^="top"] .popper__arrow::after { + bottom: 1px; + margin-left: -5px; + border-top-color: #303133; + border-bottom-width: 0; } + .el-tooltip__popper[x-placement^="bottom"] { + margin-top: 12px; } + .el-tooltip__popper[x-placement^="bottom"] .popper__arrow { + top: -6px; + border-top-width: 0; + border-bottom-color: #303133; } + .el-tooltip__popper[x-placement^="bottom"] .popper__arrow::after { + top: 1px; + margin-left: -5px; + border-top-width: 0; + border-bottom-color: #303133; } + .el-tooltip__popper[x-placement^="right"] { + margin-left: 12px; } + .el-tooltip__popper[x-placement^="right"] .popper__arrow { + left: -6px; + border-right-color: #303133; + border-left-width: 0; } + .el-tooltip__popper[x-placement^="right"] .popper__arrow::after { + bottom: -5px; + left: 1px; + border-right-color: #303133; + border-left-width: 0; } + .el-tooltip__popper[x-placement^="left"] { + margin-right: 12px; } + .el-tooltip__popper[x-placement^="left"] .popper__arrow { + right: -6px; + border-right-width: 0; + border-left-color: #303133; } + .el-tooltip__popper[x-placement^="left"] .popper__arrow::after { + right: 1px; + bottom: -5px; + margin-left: -5px; + border-right-width: 0; + border-left-color: #303133; } + .el-tooltip__popper.is-dark { + background: #303133; + color: #FFFFFF; } + .el-tooltip__popper.is-light { + background: #FFFFFF; + border: 1px solid #303133; } + .el-tooltip__popper.is-light[x-placement^="top"] .popper__arrow { + border-top-color: #303133; } + .el-tooltip__popper.is-light[x-placement^="top"] .popper__arrow::after { + border-top-color: #FFFFFF; } + .el-tooltip__popper.is-light[x-placement^="bottom"] .popper__arrow { + border-bottom-color: #303133; } + .el-tooltip__popper.is-light[x-placement^="bottom"] .popper__arrow::after { + border-bottom-color: #FFFFFF; } + .el-tooltip__popper.is-light[x-placement^="left"] .popper__arrow { + border-left-color: #303133; } + .el-tooltip__popper.is-light[x-placement^="left"] .popper__arrow::after { + border-left-color: #FFFFFF; } + .el-tooltip__popper.is-light[x-placement^="right"] .popper__arrow { + border-right-color: #303133; } + .el-tooltip__popper.is-light[x-placement^="right"] .popper__arrow::after { + border-right-color: #FFFFFF; } diff --git a/theme/transfer.css b/theme/transfer.css new file mode 100644 index 0000000..6135b50 --- /dev/null +++ b/theme/transfer.css @@ -0,0 +1,2349 @@ +@charset "UTF-8"; +/* 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 +--------------------------*/ +/* 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 +--------------------------*/ +.el-textarea { + position: relative; + display: inline-block; + width: 100%; + vertical-align: bottom; + font-size: 14px; } + .el-textarea__inner { + display: block; + resize: vertical; + padding: 5px 15px; + line-height: 1.5; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + font-size: inherit; + color: #606266; + background-color: #FFFFFF; + background-image: none; + border: 1px solid #DCDFE6; + border-radius: 4px; + -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); } + .el-textarea__inner::-webkit-input-placeholder { + color: #C0C4CC; } + .el-textarea__inner::-moz-placeholder { + color: #C0C4CC; } + .el-textarea__inner::-ms-input-placeholder { + color: #C0C4CC; } + .el-textarea__inner::placeholder { + color: #C0C4CC; } + .el-textarea__inner:hover { + border-color: #C0C4CC; } + .el-textarea__inner:focus { + outline: none; + border-color: #00B9FF; } + .el-textarea .el-input__count { + color: #909399; + background: #FFFFFF; + position: absolute; + font-size: 12px; + bottom: 5px; + right: 10px; } + .el-textarea.is-disabled .el-textarea__inner { + background-color: #F5F7FA; + border-color: #E4E7ED; + color: #C0C4CC; + cursor: not-allowed; } + .el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder { + color: #C0C4CC; } + .el-textarea.is-disabled .el-textarea__inner::-moz-placeholder { + color: #C0C4CC; } + .el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder { + color: #C0C4CC; } + .el-textarea.is-disabled .el-textarea__inner::placeholder { + color: #C0C4CC; } + .el-textarea.is-exceed .el-textarea__inner { + border-color: #F56C6C; } + .el-textarea.is-exceed .el-input__count { + color: #F56C6C; } + +.el-input { + position: relative; + font-size: 14px; + display: inline-block; + width: 100%; } + .el-input::-webkit-scrollbar { + z-index: 11; + width: 6px; } + .el-input::-webkit-scrollbar:horizontal { + height: 6px; } + .el-input::-webkit-scrollbar-thumb { + border-radius: 5px; + width: 6px; + background: #b4bccc; } + .el-input::-webkit-scrollbar-corner { + background: #fff; } + .el-input::-webkit-scrollbar-track { + background: #fff; } + .el-input::-webkit-scrollbar-track-piece { + background: #fff; + width: 6px; } + .el-input .el-input__clear { + color: #C0C4CC; + font-size: 14px; + cursor: pointer; + -webkit-transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); } + .el-input .el-input__clear:hover { + color: #909399; } + .el-input .el-input__count { + height: 100%; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #909399; + font-size: 12px; } + .el-input .el-input__count .el-input__count-inner { + background: #FFFFFF; + line-height: initial; + display: inline-block; + padding: 0 5px; } + .el-input__inner { + -webkit-appearance: none; + background-color: #FFFFFF; + background-image: none; + border-radius: 4px; + border: 1px solid #DCDFE6; + -webkit-box-sizing: border-box; + box-sizing: border-box; + color: #606266; + display: inline-block; + font-size: inherit; + height: 40px; + line-height: 40px; + outline: none; + padding: 0 15px; + -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + width: 100%; } + .el-input__inner::-webkit-input-placeholder { + color: #C0C4CC; } + .el-input__inner::-moz-placeholder { + color: #C0C4CC; } + .el-input__inner::-ms-input-placeholder { + color: #C0C4CC; } + .el-input__inner::placeholder { + color: #C0C4CC; } + .el-input__inner:hover { + border-color: #C0C4CC; } + .el-input__inner:focus { + outline: none; + border-color: #00B9FF; } + .el-input__suffix { + position: absolute; + height: 100%; + right: 5px; + top: 0; + text-align: center; + color: #C0C4CC; + -webkit-transition: all .3s; + transition: all .3s; + pointer-events: none; } + .el-input__suffix-inner { + pointer-events: all; } + .el-input__prefix { + position: absolute; + height: 100%; + left: 5px; + top: 0; + text-align: center; + color: #C0C4CC; + -webkit-transition: all .3s; + transition: all .3s; } + .el-input__icon { + height: 100%; + width: 25px; + text-align: center; + -webkit-transition: all .3s; + transition: all .3s; + line-height: 40px; } + .el-input__icon:after { + content: ''; + height: 100%; + width: 0; + display: inline-block; + vertical-align: middle; } + .el-input__validateIcon { + pointer-events: none; } + .el-input.is-active .el-input__inner { + outline: none; + border-color: #00B9FF; } + .el-input.is-disabled .el-input__inner { + background-color: #F5F7FA; + border-color: #E4E7ED; + color: #C0C4CC; + cursor: not-allowed; } + .el-input.is-disabled .el-input__inner::-webkit-input-placeholder { + color: #C0C4CC; } + .el-input.is-disabled .el-input__inner::-moz-placeholder { + color: #C0C4CC; } + .el-input.is-disabled .el-input__inner::-ms-input-placeholder { + color: #C0C4CC; } + .el-input.is-disabled .el-input__inner::placeholder { + color: #C0C4CC; } + .el-input.is-disabled .el-input__icon { + cursor: not-allowed; } + .el-input.is-exceed .el-input__inner { + border-color: #F56C6C; } + .el-input.is-exceed .el-input__suffix .el-input__count { + color: #F56C6C; } + .el-input--suffix .el-input__inner { + padding-right: 30px; } + .el-input--prefix .el-input__inner { + padding-left: 30px; } + .el-input--medium { + font-size: 14px; } + .el-input--medium .el-input__inner { + height: 36px; + line-height: 36px; } + .el-input--medium .el-input__icon { + line-height: 36px; } + .el-input--small { + font-size: 13px; } + .el-input--small .el-input__inner { + height: 32px; + line-height: 32px; } + .el-input--small .el-input__icon { + line-height: 32px; } + .el-input--mini { + font-size: 12px; } + .el-input--mini .el-input__inner { + height: 28px; + line-height: 28px; } + .el-input--mini .el-input__icon { + line-height: 28px; } + +.el-input-group { + line-height: normal; + display: inline-table; + width: 100%; + border-collapse: separate; + border-spacing: 0; } + .el-input-group > .el-input__inner { + vertical-align: middle; + display: table-cell; } + .el-input-group__append, .el-input-group__prepend { + background-color: #F5F7FA; + color: #909399; + vertical-align: middle; + display: table-cell; + position: relative; + border: 1px solid #DCDFE6; + border-radius: 4px; + padding: 0 20px; + width: 1px; + white-space: nowrap; } + .el-input-group__append:focus, .el-input-group__prepend:focus { + outline: none; } + .el-input-group__append .el-select, + .el-input-group__append .el-button, .el-input-group__prepend .el-select, + .el-input-group__prepend .el-button { + display: inline-block; + margin: -10px -20px; } + .el-input-group__append button.el-button, + .el-input-group__append div.el-select .el-input__inner, + .el-input-group__append div.el-select:hover .el-input__inner, .el-input-group__prepend button.el-button, + .el-input-group__prepend div.el-select .el-input__inner, + .el-input-group__prepend div.el-select:hover .el-input__inner { + border-color: transparent; + background-color: transparent; + color: inherit; + border-top: 0; + border-bottom: 0; } + .el-input-group__append .el-button, + .el-input-group__append .el-input, .el-input-group__prepend .el-button, + .el-input-group__prepend .el-input { + font-size: inherit; } + .el-input-group__prepend { + border-right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + .el-input-group__append { + border-left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + .el-input-group--prepend .el-input__inner { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + .el-input-group--prepend .el-select .el-input.is-focus .el-input__inner { + border-color: transparent; } + .el-input-group--append .el-input__inner { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + .el-input-group--append .el-select .el-input.is-focus .el-input__inner { + border-color: transparent; } + +/** disalbe default clear on IE */ +.el-input__inner::-ms-clear { + display: none; + width: 0; + height: 0; } + +/* 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 +--------------------------*/ +/* 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 +--------------------------*/ +/* 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 + -------------------------- */ +.el-button { + display: inline-block; + line-height: 1; + white-space: nowrap; + cursor: pointer; + background: #FFFFFF; + border: 1px solid #DCDFE6; + border-color: #DCDFE6; + color: #606266; + -webkit-appearance: none; + text-align: center; + -webkit-box-sizing: border-box; + box-sizing: border-box; + outline: none; + margin: 0; + -webkit-transition: .1s; + transition: .1s; + font-weight: 500; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + padding: 12px 20px; + font-size: 14px; + border-radius: 4px; } + .el-button + .el-button { + margin-left: 10px; } + .el-button.is-round { + padding: 12px 20px; } + .el-button:hover, .el-button:focus { + color: #00B9FF; + border-color: #b3eaff; + background-color: #e6f8ff; } + .el-button:active { + color: #00a7e6; + border-color: #00a7e6; + outline: none; } + .el-button::-moz-focus-inner { + border: 0; } + .el-button [class*="el-icon-"] + span { + margin-left: 5px; } + .el-button.is-plain:hover, .el-button.is-plain:focus { + background: #FFFFFF; + border-color: #00B9FF; + color: #00B9FF; } + .el-button.is-plain:active { + background: #FFFFFF; + border-color: #00a7e6; + color: #00a7e6; + outline: none; } + .el-button.is-active { + color: #00a7e6; + border-color: #00a7e6; } + .el-button.is-disabled, .el-button.is-disabled:hover, .el-button.is-disabled:focus { + color: #C0C4CC; + cursor: not-allowed; + background-image: none; + background-color: #FFFFFF; + border-color: #EBEEF5; } + .el-button.is-disabled.el-button--text { + background-color: transparent; } + .el-button.is-disabled.is-plain, .el-button.is-disabled.is-plain:hover, .el-button.is-disabled.is-plain:focus { + background-color: #FFFFFF; + border-color: #EBEEF5; + color: #C0C4CC; } + .el-button.is-loading { + position: relative; + pointer-events: none; } + .el-button.is-loading:before { + pointer-events: none; + content: ''; + position: absolute; + left: -1px; + top: -1px; + right: -1px; + bottom: -1px; + border-radius: inherit; + background-color: rgba(255, 255, 255, 0.35); } + .el-button.is-round { + border-radius: 20px; + padding: 12px 23px; } + .el-button.is-circle { + border-radius: 50%; + padding: 12px; } + .el-button--primary { + color: #FFFFFF; + background-color: #00B9FF; + border-color: #00B9FF; } + .el-button--primary:hover, .el-button--primary:focus { + background: #33c7ff; + border-color: #33c7ff; + color: #FFFFFF; } + .el-button--primary:active { + background: #00a7e6; + border-color: #00a7e6; + color: #FFFFFF; + outline: none; } + .el-button--primary.is-active { + background: #00a7e6; + border-color: #00a7e6; + color: #FFFFFF; } + .el-button--primary.is-disabled, .el-button--primary.is-disabled:hover, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:active { + color: #FFFFFF; + background-color: #80dcff; + border-color: #80dcff; } + .el-button--primary.is-plain { + color: #00B9FF; + background: #e6f8ff; + border-color: #99e3ff; } + .el-button--primary.is-plain:hover, .el-button--primary.is-plain:focus { + background: #00B9FF; + border-color: #00B9FF; + color: #FFFFFF; } + .el-button--primary.is-plain:active { + background: #00a7e6; + border-color: #00a7e6; + color: #FFFFFF; + outline: none; } + .el-button--primary.is-plain.is-disabled, .el-button--primary.is-plain.is-disabled:hover, .el-button--primary.is-plain.is-disabled:focus, .el-button--primary.is-plain.is-disabled:active { + color: #66d5ff; + background-color: #e6f8ff; + border-color: #ccf1ff; } + .el-button--success { + color: #FFFFFF; + background-color: #67C23A; + border-color: #67C23A; } + .el-button--success:hover, .el-button--success:focus { + background: #85ce61; + border-color: #85ce61; + color: #FFFFFF; } + .el-button--success:active { + background: #5daf34; + border-color: #5daf34; + color: #FFFFFF; + outline: none; } + .el-button--success.is-active { + background: #5daf34; + border-color: #5daf34; + color: #FFFFFF; } + .el-button--success.is-disabled, .el-button--success.is-disabled:hover, .el-button--success.is-disabled:focus, .el-button--success.is-disabled:active { + color: #FFFFFF; + background-color: #b3e19d; + border-color: #b3e19d; } + .el-button--success.is-plain { + color: #67C23A; + background: #f0f9eb; + border-color: #c2e7b0; } + .el-button--success.is-plain:hover, .el-button--success.is-plain:focus { + background: #67C23A; + border-color: #67C23A; + color: #FFFFFF; } + .el-button--success.is-plain:active { + background: #5daf34; + border-color: #5daf34; + color: #FFFFFF; + outline: none; } + .el-button--success.is-plain.is-disabled, .el-button--success.is-plain.is-disabled:hover, .el-button--success.is-plain.is-disabled:focus, .el-button--success.is-plain.is-disabled:active { + color: #a4da89; + background-color: #f0f9eb; + border-color: #e1f3d8; } + .el-button--warning { + color: #FFFFFF; + background-color: #E6A23C; + border-color: #E6A23C; } + .el-button--warning:hover, .el-button--warning:focus { + background: #ebb563; + border-color: #ebb563; + color: #FFFFFF; } + .el-button--warning:active { + background: #cf9236; + border-color: #cf9236; + color: #FFFFFF; + outline: none; } + .el-button--warning.is-active { + background: #cf9236; + border-color: #cf9236; + color: #FFFFFF; } + .el-button--warning.is-disabled, .el-button--warning.is-disabled:hover, .el-button--warning.is-disabled:focus, .el-button--warning.is-disabled:active { + color: #FFFFFF; + background-color: #f3d19e; + border-color: #f3d19e; } + .el-button--warning.is-plain { + color: #E6A23C; + background: #fdf6ec; + border-color: #f5dab1; } + .el-button--warning.is-plain:hover, .el-button--warning.is-plain:focus { + background: #E6A23C; + border-color: #E6A23C; + color: #FFFFFF; } + .el-button--warning.is-plain:active { + background: #cf9236; + border-color: #cf9236; + color: #FFFFFF; + outline: none; } + .el-button--warning.is-plain.is-disabled, .el-button--warning.is-plain.is-disabled:hover, .el-button--warning.is-plain.is-disabled:focus, .el-button--warning.is-plain.is-disabled:active { + color: #f0c78a; + background-color: #fdf6ec; + border-color: #faecd8; } + .el-button--danger { + color: #FFFFFF; + background-color: #F56C6C; + border-color: #F56C6C; } + .el-button--danger:hover, .el-button--danger:focus { + background: #f78989; + border-color: #f78989; + color: #FFFFFF; } + .el-button--danger:active { + background: #dd6161; + border-color: #dd6161; + color: #FFFFFF; + outline: none; } + .el-button--danger.is-active { + background: #dd6161; + border-color: #dd6161; + color: #FFFFFF; } + .el-button--danger.is-disabled, .el-button--danger.is-disabled:hover, .el-button--danger.is-disabled:focus, .el-button--danger.is-disabled:active { + color: #FFFFFF; + background-color: #fab6b6; + border-color: #fab6b6; } + .el-button--danger.is-plain { + color: #F56C6C; + background: #fef0f0; + border-color: #fbc4c4; } + .el-button--danger.is-plain:hover, .el-button--danger.is-plain:focus { + background: #F56C6C; + border-color: #F56C6C; + color: #FFFFFF; } + .el-button--danger.is-plain:active { + background: #dd6161; + border-color: #dd6161; + color: #FFFFFF; + outline: none; } + .el-button--danger.is-plain.is-disabled, .el-button--danger.is-plain.is-disabled:hover, .el-button--danger.is-plain.is-disabled:focus, .el-button--danger.is-plain.is-disabled:active { + color: #f9a7a7; + background-color: #fef0f0; + border-color: #fde2e2; } + .el-button--info { + color: #FFFFFF; + background-color: #909399; + border-color: #909399; } + .el-button--info:hover, .el-button--info:focus { + background: #a6a9ad; + border-color: #a6a9ad; + color: #FFFFFF; } + .el-button--info:active { + background: #82848a; + border-color: #82848a; + color: #FFFFFF; + outline: none; } + .el-button--info.is-active { + background: #82848a; + border-color: #82848a; + color: #FFFFFF; } + .el-button--info.is-disabled, .el-button--info.is-disabled:hover, .el-button--info.is-disabled:focus, .el-button--info.is-disabled:active { + color: #FFFFFF; + background-color: #c8c9cc; + border-color: #c8c9cc; } + .el-button--info.is-plain { + color: #909399; + background: #f4f4f5; + border-color: #d3d4d6; } + .el-button--info.is-plain:hover, .el-button--info.is-plain:focus { + background: #909399; + border-color: #909399; + color: #FFFFFF; } + .el-button--info.is-plain:active { + background: #82848a; + border-color: #82848a; + color: #FFFFFF; + outline: none; } + .el-button--info.is-plain.is-disabled, .el-button--info.is-plain.is-disabled:hover, .el-button--info.is-plain.is-disabled:focus, .el-button--info.is-plain.is-disabled:active { + color: #bcbec2; + background-color: #f4f4f5; + border-color: #e9e9eb; } + .el-button--medium { + padding: 10px 20px; + font-size: 14px; + border-radius: 4px; } + .el-button--medium.is-round { + padding: 10px 20px; } + .el-button--medium.is-circle { + padding: 10px; } + .el-button--small { + padding: 9px 15px; + font-size: 12px; + border-radius: 3px; } + .el-button--small.is-round { + padding: 9px 15px; } + .el-button--small.is-circle { + padding: 9px; } + .el-button--mini { + padding: 7px 15px; + font-size: 12px; + border-radius: 3px; } + .el-button--mini.is-round { + padding: 7px 15px; } + .el-button--mini.is-circle { + padding: 7px; } + .el-button--text { + border-color: transparent; + color: #00B9FF; + background: transparent; + padding-left: 0; + padding-right: 0; } + .el-button--text:hover, .el-button--text:focus { + color: #33c7ff; + border-color: transparent; + background-color: transparent; } + .el-button--text:active { + color: #00a7e6; + border-color: transparent; + background-color: transparent; } + .el-button--text.is-disabled, .el-button--text.is-disabled:hover, .el-button--text.is-disabled:focus { + border-color: transparent; } + +.el-button-group { + display: inline-block; + vertical-align: middle; } + .el-button-group::before, + .el-button-group::after { + display: table; + content: ""; } + .el-button-group::after { + clear: both; } + .el-button-group > .el-button { + float: left; + position: relative; } + .el-button-group > .el-button + .el-button { + margin-left: 0; } + .el-button-group > .el-button.is-disabled { + z-index: 1; } + .el-button-group > .el-button:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + .el-button-group > .el-button:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + .el-button-group > .el-button:first-child:last-child { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; } + .el-button-group > .el-button:first-child:last-child.is-round { + border-radius: 20px; } + .el-button-group > .el-button:first-child:last-child.is-circle { + border-radius: 50%; } + .el-button-group > .el-button:not(:first-child):not(:last-child) { + border-radius: 0; } + .el-button-group > .el-button:not(:last-child) { + margin-right: -1px; } + .el-button-group > .el-button:hover, .el-button-group > .el-button:focus, .el-button-group > .el-button:active { + z-index: 1; } + .el-button-group > .el-button.is-active { + z-index: 1; } + .el-button-group > .el-dropdown > .el-button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-left-color: rgba(255, 255, 255, 0.5); } + .el-button-group .el-button--primary:first-child { + border-right-color: rgba(255, 255, 255, 0.5); } + .el-button-group .el-button--primary:last-child { + border-left-color: rgba(255, 255, 255, 0.5); } + .el-button-group .el-button--primary:not(:first-child):not(:last-child) { + border-left-color: rgba(255, 255, 255, 0.5); + border-right-color: rgba(255, 255, 255, 0.5); } + .el-button-group .el-button--success:first-child { + border-right-color: rgba(255, 255, 255, 0.5); } + .el-button-group .el-button--success:last-child { + border-left-color: rgba(255, 255, 255, 0.5); } + .el-button-group .el-button--success:not(:first-child):not(:last-child) { + border-left-color: rgba(255, 255, 255, 0.5); + border-right-color: rgba(255, 255, 255, 0.5); } + .el-button-group .el-button--warning:first-child { + border-right-color: rgba(255, 255, 255, 0.5); } + .el-button-group .el-button--warning:last-child { + border-left-color: rgba(255, 255, 255, 0.5); } + .el-button-group .el-button--warning:not(:first-child):not(:last-child) { + border-left-color: rgba(255, 255, 255, 0.5); + border-right-color: rgba(255, 255, 255, 0.5); } + .el-button-group .el-button--danger:first-child { + border-right-color: rgba(255, 255, 255, 0.5); } + .el-button-group .el-button--danger:last-child { + border-left-color: rgba(255, 255, 255, 0.5); } + .el-button-group .el-button--danger:not(:first-child):not(:last-child) { + border-left-color: rgba(255, 255, 255, 0.5); + border-right-color: rgba(255, 255, 255, 0.5); } + .el-button-group .el-button--info:first-child { + border-right-color: rgba(255, 255, 255, 0.5); } + .el-button-group .el-button--info:last-child { + border-left-color: rgba(255, 255, 255, 0.5); } + .el-button-group .el-button--info:not(:first-child):not(:last-child) { + border-left-color: rgba(255, 255, 255, 0.5); + border-right-color: rgba(255, 255, 255, 0.5); } + +/* 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 +--------------------------*/ +/* 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 +--------------------------*/ +.el-checkbox { + color: #606266; + font-weight: 500; + font-size: 14px; + position: relative; + cursor: pointer; + display: inline-block; + white-space: nowrap; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + margin-right: 30px; } + .el-checkbox.is-bordered { + padding: 9px 20px 9px 10px; + border-radius: 4px; + border: 1px solid #DCDFE6; + -webkit-box-sizing: border-box; + box-sizing: border-box; + line-height: normal; + height: 40px; } + .el-checkbox.is-bordered.is-checked { + border-color: #00B9FF; } + .el-checkbox.is-bordered.is-disabled { + border-color: #EBEEF5; + cursor: not-allowed; } + .el-checkbox.is-bordered + .el-checkbox.is-bordered { + margin-left: 10px; } + .el-checkbox.is-bordered.el-checkbox--medium { + padding: 7px 20px 7px 10px; + border-radius: 4px; + height: 36px; } + .el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__label { + line-height: 17px; + font-size: 14px; } + .el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__inner { + height: 14px; + width: 14px; } + .el-checkbox.is-bordered.el-checkbox--small { + padding: 5px 15px 5px 10px; + border-radius: 3px; + height: 32px; } + .el-checkbox.is-bordered.el-checkbox--small .el-checkbox__label { + line-height: 15px; + font-size: 12px; } + .el-checkbox.is-bordered.el-checkbox--small .el-checkbox__inner { + height: 12px; + width: 12px; } + .el-checkbox.is-bordered.el-checkbox--small .el-checkbox__inner::after { + height: 6px; + width: 2px; } + .el-checkbox.is-bordered.el-checkbox--mini { + padding: 3px 15px 3px 10px; + border-radius: 3px; + height: 28px; } + .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__label { + line-height: 12px; + font-size: 12px; } + .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__inner { + height: 12px; + width: 12px; } + .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__inner::after { + height: 6px; + width: 2px; } + .el-checkbox__input { + white-space: nowrap; + cursor: pointer; + outline: none; + display: inline-block; + line-height: 1; + position: relative; + vertical-align: middle; } + .el-checkbox__input.is-disabled .el-checkbox__inner { + background-color: #edf2fc; + border-color: #DCDFE6; + cursor: not-allowed; } + .el-checkbox__input.is-disabled .el-checkbox__inner::after { + cursor: not-allowed; + border-color: #C0C4CC; } + .el-checkbox__input.is-disabled .el-checkbox__inner + .el-checkbox__label { + cursor: not-allowed; } + .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner { + background-color: #F2F6FC; + border-color: #DCDFE6; } + .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after { + border-color: #C0C4CC; } + .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner { + background-color: #F2F6FC; + border-color: #DCDFE6; } + .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner::before { + background-color: #C0C4CC; + border-color: #C0C4CC; } + .el-checkbox__input.is-disabled + span.el-checkbox__label { + color: #C0C4CC; + cursor: not-allowed; } + .el-checkbox__input.is-checked .el-checkbox__inner { + background-color: #00B9FF; + border-color: #00B9FF; } + .el-checkbox__input.is-checked .el-checkbox__inner::after { + -webkit-transform: rotate(45deg) scaleY(1); + transform: rotate(45deg) scaleY(1); } + .el-checkbox__input.is-checked + .el-checkbox__label { + color: #00B9FF; } + .el-checkbox__input.is-focus { + /*focus时 视觉上区分*/ } + .el-checkbox__input.is-focus .el-checkbox__inner { + border-color: #00B9FF; } + .el-checkbox__input.is-indeterminate .el-checkbox__inner { + background-color: #00B9FF; + border-color: #00B9FF; } + .el-checkbox__input.is-indeterminate .el-checkbox__inner::before { + content: ''; + position: absolute; + display: block; + background-color: #FFFFFF; + height: 2px; + -webkit-transform: scale(0.5); + transform: scale(0.5); + left: 0; + right: 0; + top: 5px; } + .el-checkbox__input.is-indeterminate .el-checkbox__inner::after { + display: none; } + .el-checkbox__inner { + display: inline-block; + position: relative; + border: 1px solid #DCDFE6; + border-radius: 2px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 14px; + height: 14px; + background-color: #FFFFFF; + z-index: 1; + -webkit-transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46); + transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46); } + .el-checkbox__inner:hover { + border-color: #00B9FF; } + .el-checkbox__inner::after { + -webkit-box-sizing: content-box; + box-sizing: content-box; + content: ""; + border: 1px solid #FFFFFF; + border-left: 0; + border-top: 0; + height: 7px; + left: 4px; + position: absolute; + top: 1px; + -webkit-transform: rotate(45deg) scaleY(0); + transform: rotate(45deg) scaleY(0); + width: 3px; + -webkit-transition: -webkit-transform .15s ease-in .05s; + transition: -webkit-transform .15s ease-in .05s; + transition: transform .15s ease-in .05s; + transition: transform .15s ease-in .05s, -webkit-transform .15s ease-in .05s; + -webkit-transform-origin: center; + transform-origin: center; } + .el-checkbox__original { + opacity: 0; + outline: none; + position: absolute; + margin: 0; + width: 0; + height: 0; + z-index: -1; } + .el-checkbox__label { + display: inline-block; + padding-left: 10px; + line-height: 19px; + font-size: 14px; } + .el-checkbox:last-of-type { + margin-right: 0; } + +.el-checkbox-button { + position: relative; + display: inline-block; } + .el-checkbox-button__inner { + display: inline-block; + line-height: 1; + font-weight: 500; + white-space: nowrap; + vertical-align: middle; + cursor: pointer; + background: #FFFFFF; + border: 1px solid #DCDFE6; + border-left: 0; + color: #606266; + -webkit-appearance: none; + text-align: center; + -webkit-box-sizing: border-box; + box-sizing: border-box; + outline: none; + margin: 0; + position: relative; + -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + padding: 12px 20px; + font-size: 14px; + border-radius: 0; } + .el-checkbox-button__inner.is-round { + padding: 12px 20px; } + .el-checkbox-button__inner:hover { + color: #00B9FF; } + .el-checkbox-button__inner [class*="el-icon-"] { + line-height: 0.9; } + .el-checkbox-button__inner [class*="el-icon-"] + span { + margin-left: 5px; } + .el-checkbox-button__original { + opacity: 0; + outline: none; + position: absolute; + margin: 0; + z-index: -1; } + .el-checkbox-button.is-checked .el-checkbox-button__inner { + color: #FFFFFF; + background-color: #00B9FF; + border-color: #00B9FF; + -webkit-box-shadow: -1px 0 0 0 #66d5ff; + box-shadow: -1px 0 0 0 #66d5ff; } + .el-checkbox-button.is-checked:first-child .el-checkbox-button__inner { + border-left-color: #00B9FF; } + .el-checkbox-button.is-disabled .el-checkbox-button__inner { + color: #C0C4CC; + cursor: not-allowed; + background-image: none; + background-color: #FFFFFF; + border-color: #EBEEF5; + -webkit-box-shadow: none; + box-shadow: none; } + .el-checkbox-button.is-disabled:first-child .el-checkbox-button__inner { + border-left-color: #EBEEF5; } + .el-checkbox-button:first-child .el-checkbox-button__inner { + border-left: 1px solid #DCDFE6; + border-radius: 4px 0 0 4px; + -webkit-box-shadow: none !important; + box-shadow: none !important; } + .el-checkbox-button.is-focus .el-checkbox-button__inner { + border-color: #00B9FF; } + .el-checkbox-button:last-child .el-checkbox-button__inner { + border-radius: 0 4px 4px 0; } + .el-checkbox-button--medium .el-checkbox-button__inner { + padding: 10px 20px; + font-size: 14px; + border-radius: 0; } + .el-checkbox-button--medium .el-checkbox-button__inner.is-round { + padding: 10px 20px; } + .el-checkbox-button--small .el-checkbox-button__inner { + padding: 9px 15px; + font-size: 12px; + border-radius: 0; } + .el-checkbox-button--small .el-checkbox-button__inner.is-round { + padding: 9px 15px; } + .el-checkbox-button--mini .el-checkbox-button__inner { + padding: 7px 15px; + font-size: 12px; + border-radius: 0; } + .el-checkbox-button--mini .el-checkbox-button__inner.is-round { + padding: 7px 15px; } + +.el-checkbox-group { + font-size: 0; } + +.el-transfer { + font-size: 14px; } + .el-transfer__buttons { + display: inline-block; + vertical-align: middle; + padding: 0 30px; } + .el-transfer__button { + display: block; + margin: 0 auto; + padding: 10px; + border-radius: 50%; + color: #FFFFFF; + background-color: #00B9FF; + font-size: 0; } + .el-transfer__button.is-with-texts { + border-radius: 4px; } + .el-transfer__button.is-disabled { + border: 1px solid #DCDFE6; + background-color: #F5F7FA; + color: #C0C4CC; } + .el-transfer__button.is-disabled:hover { + border: 1px solid #DCDFE6; + background-color: #F5F7FA; + color: #C0C4CC; } + .el-transfer__button:first-child { + margin-bottom: 10px; } + .el-transfer__button:nth-child(2) { + margin: 0; } + .el-transfer__button i, .el-transfer__button span { + font-size: 14px; } + .el-transfer__button [class*="el-icon-"] + span { + margin-left: 0; } + +.el-transfer-panel { + border: 1px solid #EBEEF5; + border-radius: 4px; + overflow: hidden; + background: #FFFFFF; + display: inline-block; + vertical-align: middle; + width: 200px; + max-height: 100%; + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: relative; } + .el-transfer-panel__body { + height: 246px; } + .el-transfer-panel__body.is-with-footer { + padding-bottom: 40px; } + .el-transfer-panel__list { + margin: 0; + padding: 6px 0; + list-style: none; + height: 246px; + overflow: auto; + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .el-transfer-panel__list.is-filterable { + height: 194px; + padding-top: 0; } + .el-transfer-panel__item { + height: 30px; + line-height: 30px; + padding-left: 15px; + display: block !important; } + .el-transfer-panel__item + .el-transfer-panel__item { + margin-left: 0; } + .el-transfer-panel__item.el-checkbox { + color: #606266; } + .el-transfer-panel__item:hover { + color: #00B9FF; } + .el-transfer-panel__item.el-checkbox .el-checkbox__label { + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: block; + -webkit-box-sizing: border-box; + box-sizing: border-box; + padding-left: 24px; + line-height: 30px; } + .el-transfer-panel__item .el-checkbox__input { + position: absolute; + top: 8px; } + .el-transfer-panel__filter { + text-align: center; + margin: 15px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: block; + width: auto; } + .el-transfer-panel__filter .el-input__inner { + height: 32px; + width: 100%; + font-size: 12px; + display: inline-block; + -webkit-box-sizing: border-box; + box-sizing: border-box; + border-radius: 16px; + padding-right: 10px; + padding-left: 30px; } + .el-transfer-panel__filter .el-input__icon { + margin-left: 5px; } + .el-transfer-panel__filter .el-icon-circle-close { + cursor: pointer; } + .el-transfer-panel .el-transfer-panel__header { + height: 40px; + line-height: 40px; + background: #F5F7FA; + margin: 0; + padding-left: 15px; + border-bottom: 1px solid #EBEEF5; + -webkit-box-sizing: border-box; + box-sizing: border-box; + color: #000000; } + .el-transfer-panel .el-transfer-panel__header .el-checkbox { + display: block; + line-height: 40px; } + .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label { + font-size: 16px; + color: #303133; + font-weight: normal; } + .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label span { + position: absolute; + right: 15px; + color: #909399; + font-size: 12px; + font-weight: normal; } + .el-transfer-panel .el-transfer-panel__footer { + height: 40px; + background: #FFFFFF; + margin: 0; + padding: 0; + border-top: 1px solid #EBEEF5; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + z-index: 1; } + .el-transfer-panel .el-transfer-panel__footer::after { + display: inline-block; + content: ""; + height: 100%; + vertical-align: middle; } + .el-transfer-panel .el-transfer-panel__footer .el-checkbox { + padding-left: 20px; + color: #606266; } + .el-transfer-panel .el-transfer-panel__empty { + margin: 0; + height: 30px; + line-height: 30px; + padding: 6px 15px 0; + color: #909399; + text-align: center; } + .el-transfer-panel .el-checkbox__label { + padding-left: 8px; } + .el-transfer-panel .el-checkbox__inner { + height: 14px; + width: 14px; + border-radius: 3px; } + .el-transfer-panel .el-checkbox__inner::after { + height: 6px; + width: 3px; + left: 4px; } diff --git a/theme/tree.css b/theme/tree.css new file mode 100644 index 0000000..12004c3 --- /dev/null +++ b/theme/tree.css @@ -0,0 +1,1210 @@ +@charset "UTF-8"; +/* 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 +--------------------------*/ +/* 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 +--------------------------*/ +.fade-in-linear-enter-active, +.fade-in-linear-leave-active { + -webkit-transition: opacity 200ms linear; + transition: opacity 200ms linear; } + +.fade-in-linear-enter, +.fade-in-linear-leave, +.fade-in-linear-leave-active { + opacity: 0; } + +.el-fade-in-linear-enter-active, +.el-fade-in-linear-leave-active { + -webkit-transition: opacity 200ms linear; + transition: opacity 200ms linear; } + +.el-fade-in-linear-enter, +.el-fade-in-linear-leave, +.el-fade-in-linear-leave-active { + opacity: 0; } + +.el-fade-in-enter-active, +.el-fade-in-leave-active { + -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); + transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); } + +.el-fade-in-enter, +.el-fade-in-leave-active { + opacity: 0; } + +.el-zoom-in-center-enter-active, +.el-zoom-in-center-leave-active { + -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); + transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); } + +.el-zoom-in-center-enter, +.el-zoom-in-center-leave-active { + opacity: 0; + -webkit-transform: scaleX(0); + transform: scaleX(0); } + +.el-zoom-in-top-enter-active, +.el-zoom-in-top-leave-active { + opacity: 1; + -webkit-transform: scaleY(1); + transform: scaleY(1); + -webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); + transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); + -webkit-transform-origin: center top; + transform-origin: center top; } + +.el-zoom-in-top-enter, +.el-zoom-in-top-leave-active { + opacity: 0; + -webkit-transform: scaleY(0); + transform: scaleY(0); } + +.el-zoom-in-bottom-enter-active, +.el-zoom-in-bottom-leave-active { + opacity: 1; + -webkit-transform: scaleY(1); + transform: scaleY(1); + -webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); + transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); + -webkit-transform-origin: center bottom; + transform-origin: center bottom; } + +.el-zoom-in-bottom-enter, +.el-zoom-in-bottom-leave-active { + opacity: 0; + -webkit-transform: scaleY(0); + transform: scaleY(0); } + +.el-zoom-in-left-enter-active, +.el-zoom-in-left-leave-active { + opacity: 1; + -webkit-transform: scale(1, 1); + transform: scale(1, 1); + -webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); + transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); + -webkit-transform-origin: top left; + transform-origin: top left; } + +.el-zoom-in-left-enter, +.el-zoom-in-left-leave-active { + opacity: 0; + -webkit-transform: scale(0.45, 0.45); + transform: scale(0.45, 0.45); } + +.collapse-transition { + -webkit-transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out; + transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out; } + +.horizontal-collapse-transition { + -webkit-transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out; + transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out; } + +.el-list-enter-active, +.el-list-leave-active { + -webkit-transition: all 1s; + transition: all 1s; } + +.el-list-enter, .el-list-leave-active { + opacity: 0; + -webkit-transform: translateY(-30px); + transform: translateY(-30px); } + +.el-opacity-transition { + -webkit-transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1); + transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1); } + +/* 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 +--------------------------*/ +/* 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 +--------------------------*/ +.el-checkbox { + color: #606266; + font-weight: 500; + font-size: 14px; + position: relative; + cursor: pointer; + display: inline-block; + white-space: nowrap; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + margin-right: 30px; } + .el-checkbox.is-bordered { + padding: 9px 20px 9px 10px; + border-radius: 4px; + border: 1px solid #DCDFE6; + -webkit-box-sizing: border-box; + box-sizing: border-box; + line-height: normal; + height: 40px; } + .el-checkbox.is-bordered.is-checked { + border-color: #00B9FF; } + .el-checkbox.is-bordered.is-disabled { + border-color: #EBEEF5; + cursor: not-allowed; } + .el-checkbox.is-bordered + .el-checkbox.is-bordered { + margin-left: 10px; } + .el-checkbox.is-bordered.el-checkbox--medium { + padding: 7px 20px 7px 10px; + border-radius: 4px; + height: 36px; } + .el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__label { + line-height: 17px; + font-size: 14px; } + .el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__inner { + height: 14px; + width: 14px; } + .el-checkbox.is-bordered.el-checkbox--small { + padding: 5px 15px 5px 10px; + border-radius: 3px; + height: 32px; } + .el-checkbox.is-bordered.el-checkbox--small .el-checkbox__label { + line-height: 15px; + font-size: 12px; } + .el-checkbox.is-bordered.el-checkbox--small .el-checkbox__inner { + height: 12px; + width: 12px; } + .el-checkbox.is-bordered.el-checkbox--small .el-checkbox__inner::after { + height: 6px; + width: 2px; } + .el-checkbox.is-bordered.el-checkbox--mini { + padding: 3px 15px 3px 10px; + border-radius: 3px; + height: 28px; } + .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__label { + line-height: 12px; + font-size: 12px; } + .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__inner { + height: 12px; + width: 12px; } + .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__inner::after { + height: 6px; + width: 2px; } + .el-checkbox__input { + white-space: nowrap; + cursor: pointer; + outline: none; + display: inline-block; + line-height: 1; + position: relative; + vertical-align: middle; } + .el-checkbox__input.is-disabled .el-checkbox__inner { + background-color: #edf2fc; + border-color: #DCDFE6; + cursor: not-allowed; } + .el-checkbox__input.is-disabled .el-checkbox__inner::after { + cursor: not-allowed; + border-color: #C0C4CC; } + .el-checkbox__input.is-disabled .el-checkbox__inner + .el-checkbox__label { + cursor: not-allowed; } + .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner { + background-color: #F2F6FC; + border-color: #DCDFE6; } + .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after { + border-color: #C0C4CC; } + .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner { + background-color: #F2F6FC; + border-color: #DCDFE6; } + .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner::before { + background-color: #C0C4CC; + border-color: #C0C4CC; } + .el-checkbox__input.is-disabled + span.el-checkbox__label { + color: #C0C4CC; + cursor: not-allowed; } + .el-checkbox__input.is-checked .el-checkbox__inner { + background-color: #00B9FF; + border-color: #00B9FF; } + .el-checkbox__input.is-checked .el-checkbox__inner::after { + -webkit-transform: rotate(45deg) scaleY(1); + transform: rotate(45deg) scaleY(1); } + .el-checkbox__input.is-checked + .el-checkbox__label { + color: #00B9FF; } + .el-checkbox__input.is-focus { + /*focus时 视觉上区分*/ } + .el-checkbox__input.is-focus .el-checkbox__inner { + border-color: #00B9FF; } + .el-checkbox__input.is-indeterminate .el-checkbox__inner { + background-color: #00B9FF; + border-color: #00B9FF; } + .el-checkbox__input.is-indeterminate .el-checkbox__inner::before { + content: ''; + position: absolute; + display: block; + background-color: #FFFFFF; + height: 2px; + -webkit-transform: scale(0.5); + transform: scale(0.5); + left: 0; + right: 0; + top: 5px; } + .el-checkbox__input.is-indeterminate .el-checkbox__inner::after { + display: none; } + .el-checkbox__inner { + display: inline-block; + position: relative; + border: 1px solid #DCDFE6; + border-radius: 2px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 14px; + height: 14px; + background-color: #FFFFFF; + z-index: 1; + -webkit-transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46); + transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46); } + .el-checkbox__inner:hover { + border-color: #00B9FF; } + .el-checkbox__inner::after { + -webkit-box-sizing: content-box; + box-sizing: content-box; + content: ""; + border: 1px solid #FFFFFF; + border-left: 0; + border-top: 0; + height: 7px; + left: 4px; + position: absolute; + top: 1px; + -webkit-transform: rotate(45deg) scaleY(0); + transform: rotate(45deg) scaleY(0); + width: 3px; + -webkit-transition: -webkit-transform .15s ease-in .05s; + transition: -webkit-transform .15s ease-in .05s; + transition: transform .15s ease-in .05s; + transition: transform .15s ease-in .05s, -webkit-transform .15s ease-in .05s; + -webkit-transform-origin: center; + transform-origin: center; } + .el-checkbox__original { + opacity: 0; + outline: none; + position: absolute; + margin: 0; + width: 0; + height: 0; + z-index: -1; } + .el-checkbox__label { + display: inline-block; + padding-left: 10px; + line-height: 19px; + font-size: 14px; } + .el-checkbox:last-of-type { + margin-right: 0; } + +.el-checkbox-button { + position: relative; + display: inline-block; } + .el-checkbox-button__inner { + display: inline-block; + line-height: 1; + font-weight: 500; + white-space: nowrap; + vertical-align: middle; + cursor: pointer; + background: #FFFFFF; + border: 1px solid #DCDFE6; + border-left: 0; + color: #606266; + -webkit-appearance: none; + text-align: center; + -webkit-box-sizing: border-box; + box-sizing: border-box; + outline: none; + margin: 0; + position: relative; + -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + padding: 12px 20px; + font-size: 14px; + border-radius: 0; } + .el-checkbox-button__inner.is-round { + padding: 12px 20px; } + .el-checkbox-button__inner:hover { + color: #00B9FF; } + .el-checkbox-button__inner [class*="el-icon-"] { + line-height: 0.9; } + .el-checkbox-button__inner [class*="el-icon-"] + span { + margin-left: 5px; } + .el-checkbox-button__original { + opacity: 0; + outline: none; + position: absolute; + margin: 0; + z-index: -1; } + .el-checkbox-button.is-checked .el-checkbox-button__inner { + color: #FFFFFF; + background-color: #00B9FF; + border-color: #00B9FF; + -webkit-box-shadow: -1px 0 0 0 #66d5ff; + box-shadow: -1px 0 0 0 #66d5ff; } + .el-checkbox-button.is-checked:first-child .el-checkbox-button__inner { + border-left-color: #00B9FF; } + .el-checkbox-button.is-disabled .el-checkbox-button__inner { + color: #C0C4CC; + cursor: not-allowed; + background-image: none; + background-color: #FFFFFF; + border-color: #EBEEF5; + -webkit-box-shadow: none; + box-shadow: none; } + .el-checkbox-button.is-disabled:first-child .el-checkbox-button__inner { + border-left-color: #EBEEF5; } + .el-checkbox-button:first-child .el-checkbox-button__inner { + border-left: 1px solid #DCDFE6; + border-radius: 4px 0 0 4px; + -webkit-box-shadow: none !important; + box-shadow: none !important; } + .el-checkbox-button.is-focus .el-checkbox-button__inner { + border-color: #00B9FF; } + .el-checkbox-button:last-child .el-checkbox-button__inner { + border-radius: 0 4px 4px 0; } + .el-checkbox-button--medium .el-checkbox-button__inner { + padding: 10px 20px; + font-size: 14px; + border-radius: 0; } + .el-checkbox-button--medium .el-checkbox-button__inner.is-round { + padding: 10px 20px; } + .el-checkbox-button--small .el-checkbox-button__inner { + padding: 9px 15px; + font-size: 12px; + border-radius: 0; } + .el-checkbox-button--small .el-checkbox-button__inner.is-round { + padding: 9px 15px; } + .el-checkbox-button--mini .el-checkbox-button__inner { + padding: 7px 15px; + font-size: 12px; + border-radius: 0; } + .el-checkbox-button--mini .el-checkbox-button__inner.is-round { + padding: 7px 15px; } + +.el-checkbox-group { + font-size: 0; } + +.el-tree { + position: relative; + cursor: default; + background: #FFFFFF; + color: #606266; } + .el-tree__empty-block { + position: relative; + min-height: 60px; + text-align: center; + width: 100%; + height: 100%; } + .el-tree__empty-text { + position: absolute; + left: 50%; + top: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + color: #909399; + font-size: 14px; } + .el-tree__drop-indicator { + position: absolute; + left: 0; + right: 0; + height: 1px; + background-color: #00B9FF; } + +.el-tree-node { + white-space: nowrap; + outline: none; } + .el-tree-node:focus { + /* focus */ } + .el-tree-node:focus > .el-tree-node__content { + background-color: #F5F7FA; } + .el-tree-node.is-drop-inner > .el-tree-node__content .el-tree-node__label { + background-color: #00B9FF; + color: #fff; } + .el-tree-node__content { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 26px; + cursor: pointer; } + .el-tree-node__content > .el-tree-node__expand-icon { + padding: 6px; } + .el-tree-node__content > label.el-checkbox { + margin-right: 8px; } + .el-tree-node__content:hover { + background-color: #F5F7FA; } + .el-tree.is-dragging .el-tree-node__content { + cursor: move; } + .el-tree.is-dragging .el-tree-node__content * { + pointer-events: none; } + .el-tree.is-dragging.is-drop-not-allow .el-tree-node__content { + cursor: not-allowed; } + .el-tree-node__expand-icon { + cursor: pointer; + color: #C0C4CC; + font-size: 12px; + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + -webkit-transition: -webkit-transform 0.3s ease-in-out; + transition: -webkit-transform 0.3s ease-in-out; + transition: transform 0.3s ease-in-out; + transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } + .el-tree-node__expand-icon.expanded { + -webkit-transform: rotate(90deg); + transform: rotate(90deg); } + .el-tree-node__expand-icon.is-leaf { + color: transparent; + cursor: default; } + .el-tree-node__label { + font-size: 14px; } + .el-tree-node__loading-icon { + margin-right: 8px; + font-size: 14px; + color: #C0C4CC; } + .el-tree-node > .el-tree-node__children { + overflow: hidden; + background-color: transparent; } + .el-tree-node.is-expanded > .el-tree-node__children { + display: block; } + +.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { + background-color: #ebf9ff; } diff --git a/theme/upload.css b/theme/upload.css new file mode 100644 index 0000000..1b8c187 --- /dev/null +++ b/theme/upload.css @@ -0,0 +1,1045 @@ +@charset "UTF-8"; +/* 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 + -------------------------- */ +/* 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 +--------------------------*/ +.el-progress { + position: relative; + line-height: 1; } + .el-progress__text { + font-size: 14px; + color: #606266; + display: inline-block; + vertical-align: middle; + margin-left: 10px; + line-height: 1; } + .el-progress__text i { + vertical-align: middle; + display: block; } + .el-progress--circle, .el-progress--dashboard { + display: inline-block; } + .el-progress--circle .el-progress__text, .el-progress--dashboard .el-progress__text { + position: absolute; + top: 50%; + left: 0; + width: 100%; + text-align: center; + margin: 0; + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); } + .el-progress--circle .el-progress__text i, .el-progress--dashboard .el-progress__text i { + vertical-align: middle; + display: inline-block; } + .el-progress--without-text .el-progress__text { + display: none; } + .el-progress--without-text .el-progress-bar { + padding-right: 0; + margin-right: 0; + display: block; } + .el-progress--text-inside .el-progress-bar { + padding-right: 0; + margin-right: 0; } + .el-progress.is-success .el-progress-bar__inner { + background-color: #67C23A; } + .el-progress.is-success .el-progress__text { + color: #67C23A; } + .el-progress.is-warning .el-progress-bar__inner { + background-color: #E6A23C; } + .el-progress.is-warning .el-progress__text { + color: #E6A23C; } + .el-progress.is-exception .el-progress-bar__inner { + background-color: #F56C6C; } + .el-progress.is-exception .el-progress__text { + color: #F56C6C; } + +.el-progress-bar { + padding-right: 50px; + display: inline-block; + vertical-align: middle; + width: 100%; + margin-right: -55px; + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .el-progress-bar__outer { + height: 6px; + border-radius: 100px; + background-color: #EBEEF5; + overflow: hidden; + position: relative; + vertical-align: middle; } + .el-progress-bar__inner { + position: absolute; + left: 0; + top: 0; + height: 100%; + background-color: #00B9FF; + text-align: right; + border-radius: 100px; + line-height: 1; + white-space: nowrap; + -webkit-transition: width 0.6s ease; + transition: width 0.6s ease; } + .el-progress-bar__inner::after { + display: inline-block; + content: ""; + height: 100%; + vertical-align: middle; } + .el-progress-bar__innerText { + display: inline-block; + vertical-align: middle; + color: #FFFFFF; + font-size: 12px; + margin: 0 5px; } + +@-webkit-keyframes progress { + 0% { + background-position: 0 0; } + 100% { + background-position: 32px 0; } } + +@keyframes progress { + 0% { + background-position: 0 0; } + 100% { + background-position: 32px 0; } } + +/* 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 +--------------------------*/ +.el-upload { + display: inline-block; + text-align: center; + cursor: pointer; + outline: none; + /* 照片墙模式 */ } + .el-upload__input { + display: none; } + .el-upload__tip { + font-size: 12px; + color: #606266; + margin-top: 7px; } + .el-upload iframe { + position: absolute; + z-index: -1; + top: 0; + left: 0; + opacity: 0; + filter: alpha(opacity=0); } + .el-upload--picture-card { + background-color: #fbfdff; + border: 1px dashed #c0ccda; + border-radius: 6px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 148px; + height: 148px; + cursor: pointer; + line-height: 146px; + vertical-align: top; } + .el-upload--picture-card i { + font-size: 28px; + color: #8c939d; } + .el-upload--picture-card:hover { + border-color: #00B9FF; + color: #00B9FF; } + .el-upload:focus { + border-color: #00B9FF; + color: #00B9FF; } + .el-upload:focus .el-upload-dragger { + border-color: #00B9FF; } + +.el-upload-dragger { + background-color: #fff; + border: 1px dashed #d9d9d9; + border-radius: 6px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 360px; + height: 180px; + text-align: center; + cursor: pointer; + position: relative; + overflow: hidden; } + .el-upload-dragger .el-icon-upload { + font-size: 67px; + color: #C0C4CC; + margin: 40px 0 16px; + line-height: 50px; } + .el-upload-dragger + .el-upload__tip { + text-align: center; } + .el-upload-dragger ~ .el-upload__files { + border-top: 1px solid #DCDFE6; + margin-top: 7px; + padding-top: 5px; } + .el-upload-dragger .el-upload__text { + color: #606266; + font-size: 14px; + text-align: center; } + .el-upload-dragger .el-upload__text em { + color: #00B9FF; + font-style: normal; } + .el-upload-dragger:hover { + border-color: #00B9FF; } + .el-upload-dragger.is-dragover { + background-color: rgba(32, 159, 255, 0.06); + border: 2px dashed #00B9FF; } + +.el-upload-list { + margin: 0; + padding: 0; + list-style: none; } + .el-upload-list__item { + -webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); + transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); + font-size: 14px; + color: #606266; + line-height: 1.8; + margin-top: 5px; + position: relative; + -webkit-box-sizing: border-box; + box-sizing: border-box; + border-radius: 4px; + width: 100%; } + .el-upload-list__item .el-progress { + position: absolute; + top: 20px; + width: 100%; } + .el-upload-list__item .el-progress__text { + position: absolute; + right: 0; + top: -13px; } + .el-upload-list__item .el-progress-bar { + margin-right: 0; + padding-right: 0; } + .el-upload-list__item:first-child { + margin-top: 10px; } + .el-upload-list__item .el-icon-upload-success { + color: #67C23A; } + .el-upload-list__item .el-icon-close { + display: none; + position: absolute; + top: 5px; + right: 5px; + cursor: pointer; + opacity: .75; + color: #606266; } + .el-upload-list__item .el-icon-close:hover { + opacity: 1; } + .el-upload-list__item .el-icon-close-tip { + display: none; + position: absolute; + top: 5px; + right: 5px; + font-size: 12px; + cursor: pointer; + opacity: 1; + color: #00B9FF; } + .el-upload-list__item:hover { + background-color: #F5F7FA; } + .el-upload-list__item:hover .el-icon-close { + display: inline-block; } + .el-upload-list__item:hover .el-progress__text { + display: none; } + .el-upload-list__item.is-success .el-upload-list__item-status-label { + display: block; } + .el-upload-list__item.is-success .el-upload-list__item-name:hover, .el-upload-list__item.is-success .el-upload-list__item-name:focus { + color: #00B9FF; + cursor: pointer; } + .el-upload-list__item.is-success:focus:not(:hover) { + /* 键盘focus */ } + .el-upload-list__item.is-success:focus:not(:hover) .el-icon-close-tip { + display: inline-block; } + .el-upload-list__item.is-success:not(.focusing):focus, .el-upload-list__item.is-success:active { + /* click时 */ + outline-width: 0; } + .el-upload-list__item.is-success:not(.focusing):focus .el-icon-close-tip, .el-upload-list__item.is-success:active .el-icon-close-tip { + display: none; } + .el-upload-list__item.is-success:hover .el-upload-list__item-status-label, .el-upload-list__item.is-success:focus .el-upload-list__item-status-label { + display: none; } + .el-upload-list.is-disabled .el-upload-list__item:hover .el-upload-list__item-status-label { + display: block; } + .el-upload-list__item-name { + color: #606266; + display: block; + margin-right: 40px; + overflow: hidden; + padding-left: 4px; + text-overflow: ellipsis; + -webkit-transition: color .3s; + transition: color .3s; + white-space: nowrap; } + .el-upload-list__item-name [class^="el-icon"] { + height: 100%; + margin-right: 7px; + color: #909399; + line-height: inherit; } + .el-upload-list__item-status-label { + position: absolute; + right: 5px; + top: 0; + line-height: inherit; + display: none; } + .el-upload-list__item-delete { + position: absolute; + right: 10px; + top: 0; + font-size: 12px; + color: #606266; + display: none; } + .el-upload-list__item-delete:hover { + color: #00B9FF; } + .el-upload-list--picture-card { + margin: 0; + display: inline; + vertical-align: top; } + .el-upload-list--picture-card .el-upload-list__item { + overflow: hidden; + background-color: #fff; + border: 1px solid #c0ccda; + border-radius: 6px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 148px; + height: 148px; + margin: 0 8px 8px 0; + display: inline-block; } + .el-upload-list--picture-card .el-upload-list__item .el-icon-check, + .el-upload-list--picture-card .el-upload-list__item .el-icon-circle-check { + color: #FFFFFF; } + .el-upload-list--picture-card .el-upload-list__item .el-icon-close { + display: none; } + .el-upload-list--picture-card .el-upload-list__item:hover .el-upload-list__item-status-label { + display: none; } + .el-upload-list--picture-card .el-upload-list__item:hover .el-progress__text { + display: block; } + .el-upload-list--picture-card .el-upload-list__item-name { + display: none; } + .el-upload-list--picture-card .el-upload-list__item-thumbnail { + width: 100%; + height: 100%; } + .el-upload-list--picture-card .el-upload-list__item-status-label { + position: absolute; + right: -15px; + top: -6px; + width: 40px; + height: 24px; + background: #13ce66; + text-align: center; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2); } + .el-upload-list--picture-card .el-upload-list__item-status-label i { + font-size: 12px; + margin-top: 11px; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); } + .el-upload-list--picture-card .el-upload-list__item-actions { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + cursor: default; + text-align: center; + color: #fff; + opacity: 0; + font-size: 20px; + background-color: rgba(0, 0, 0, 0.5); + -webkit-transition: opacity .3s; + transition: opacity .3s; } + .el-upload-list--picture-card .el-upload-list__item-actions::after { + display: inline-block; + content: ""; + height: 100%; + vertical-align: middle; } + .el-upload-list--picture-card .el-upload-list__item-actions span { + display: none; + cursor: pointer; } + .el-upload-list--picture-card .el-upload-list__item-actions span + span { + margin-left: 15px; } + .el-upload-list--picture-card .el-upload-list__item-actions .el-upload-list__item-delete { + position: static; + font-size: inherit; + color: inherit; } + .el-upload-list--picture-card .el-upload-list__item-actions:hover { + opacity: 1; } + .el-upload-list--picture-card .el-upload-list__item-actions:hover span { + display: inline-block; } + .el-upload-list--picture-card .el-progress { + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + bottom: auto; + width: 126px; } + .el-upload-list--picture-card .el-progress .el-progress__text { + top: 50%; } + .el-upload-list--picture .el-upload-list__item { + overflow: hidden; + z-index: 0; + background-color: #fff; + border: 1px solid #c0ccda; + border-radius: 6px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + margin-top: 10px; + padding: 10px 10px 10px 90px; + height: 92px; } + .el-upload-list--picture .el-upload-list__item .el-icon-check, + .el-upload-list--picture .el-upload-list__item .el-icon-circle-check { + color: #FFFFFF; } + .el-upload-list--picture .el-upload-list__item:hover .el-upload-list__item-status-label { + background: transparent; + -webkit-box-shadow: none; + box-shadow: none; + top: -2px; + right: -12px; } + .el-upload-list--picture .el-upload-list__item:hover .el-progress__text { + display: block; } + .el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name { + line-height: 70px; + margin-top: 0; } + .el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name i { + display: none; } + .el-upload-list--picture .el-upload-list__item-thumbnail { + vertical-align: middle; + display: inline-block; + width: 70px; + height: 70px; + float: left; + position: relative; + z-index: 1; + margin-left: -80px; + background-color: #FFFFFF; } + .el-upload-list--picture .el-upload-list__item-name { + display: block; + margin-top: 20px; } + .el-upload-list--picture .el-upload-list__item-name i { + font-size: 70px; + line-height: 1; + position: absolute; + left: 9px; + top: 10px; } + .el-upload-list--picture .el-upload-list__item-status-label { + position: absolute; + right: -17px; + top: -7px; + width: 46px; + height: 26px; + background: #13ce66; + text-align: center; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-box-shadow: 0 1px 1px #ccc; + box-shadow: 0 1px 1px #ccc; } + .el-upload-list--picture .el-upload-list__item-status-label i { + font-size: 12px; + margin-top: 12px; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); } + .el-upload-list--picture .el-progress { + position: relative; + top: -7px; } + +.el-upload-cover { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; + z-index: 10; + cursor: default; } + .el-upload-cover::after { + display: inline-block; + content: ""; + height: 100%; + vertical-align: middle; } + .el-upload-cover img { + display: block; + width: 100%; + height: 100%; } + .el-upload-cover__label { + position: absolute; + right: -15px; + top: -6px; + width: 40px; + height: 24px; + background: #13ce66; + text-align: center; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2); } + .el-upload-cover__label i { + font-size: 12px; + margin-top: 11px; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + color: #fff; } + .el-upload-cover__progress { + display: inline-block; + vertical-align: middle; + position: static; + width: 243px; } + .el-upload-cover__progress + .el-upload__inner { + opacity: 0; } + .el-upload-cover__content { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } + .el-upload-cover__interact { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.72); + text-align: center; } + .el-upload-cover__interact .btn { + display: inline-block; + color: #FFFFFF; + font-size: 14px; + cursor: pointer; + vertical-align: middle; + -webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); + transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); + margin-top: 60px; } + .el-upload-cover__interact .btn i { + margin-top: 0; } + .el-upload-cover__interact .btn span { + opacity: 0; + -webkit-transition: opacity .15s linear; + transition: opacity .15s linear; } + .el-upload-cover__interact .btn:not(:first-child) { + margin-left: 35px; } + .el-upload-cover__interact .btn:hover { + -webkit-transform: translateY(-13px); + transform: translateY(-13px); } + .el-upload-cover__interact .btn:hover span { + opacity: 1; } + .el-upload-cover__interact .btn i { + color: #FFFFFF; + display: block; + font-size: 24px; + line-height: inherit; + margin: 0 auto 5px; } + .el-upload-cover__title { + position: absolute; + bottom: 0; + left: 0; + background-color: #FFFFFF; + 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: #303133; } + .el-upload-cover + .el-upload__inner { + opacity: 0; + position: relative; + z-index: 1; }