|
@@ -0,0 +1,746 @@
|
|
|
+/* BEM support Func
|
|
|
+ -------------------------- */
|
|
|
+/* Element Chalk Variables */
|
|
|
+/* Transition
|
|
|
+-------------------------- */
|
|
|
+/* Colors
|
|
|
+-------------------------- */
|
|
|
+/* 53a8ff */
|
|
|
+/* 66b1ff */
|
|
|
+/* 79bbff */
|
|
|
+/* 8cc5ff */
|
|
|
+/* a0cfff */
|
|
|
+/* b3d8ff */
|
|
|
+/* c6e2ff */
|
|
|
+/* d9ecff */
|
|
|
+/* ecf5ff */
|
|
|
+/* Link
|
|
|
+-------------------------- */
|
|
|
+/* Background
|
|
|
+-------------------------- */
|
|
|
+/* Border
|
|
|
+-------------------------- */
|
|
|
+/* Box-shadow
|
|
|
+-------------------------- */
|
|
|
+/* Fill
|
|
|
+-------------------------- */
|
|
|
+/* Font
|
|
|
+-------------------------- */
|
|
|
+/* Size
|
|
|
+-------------------------- */
|
|
|
+/* z-index
|
|
|
+-------------------------- */
|
|
|
+/* Disable base
|
|
|
+-------------------------- */
|
|
|
+/* Icon
|
|
|
+-------------------------- */
|
|
|
+/* Checkbox
|
|
|
+-------------------------- */
|
|
|
+/* Radio
|
|
|
+-------------------------- */
|
|
|
+/* Select
|
|
|
+-------------------------- */
|
|
|
+/* Alert
|
|
|
+-------------------------- */
|
|
|
+/* Message Box
|
|
|
+-------------------------- */
|
|
|
+/* Message
|
|
|
+-------------------------- */
|
|
|
+/* Notification
|
|
|
+-------------------------- */
|
|
|
+/* Input
|
|
|
+-------------------------- */
|
|
|
+/* Cascader
|
|
|
+-------------------------- */
|
|
|
+/* Group
|
|
|
+-------------------------- */
|
|
|
+/* Tab
|
|
|
+-------------------------- */
|
|
|
+/* Button
|
|
|
+-------------------------- */
|
|
|
+/* cascader
|
|
|
+-------------------------- */
|
|
|
+/* Switch
|
|
|
+-------------------------- */
|
|
|
+/* Dialog
|
|
|
+-------------------------- */
|
|
|
+/* Table
|
|
|
+-------------------------- */
|
|
|
+/* Pagination
|
|
|
+-------------------------- */
|
|
|
+/* Popover
|
|
|
+-------------------------- */
|
|
|
+/* Tooltip
|
|
|
+-------------------------- */
|
|
|
+/* Tag
|
|
|
+-------------------------- */
|
|
|
+/* Tree
|
|
|
+-------------------------- */
|
|
|
+/* Dropdown
|
|
|
+-------------------------- */
|
|
|
+/* Badge
|
|
|
+-------------------------- */
|
|
|
+/* Card
|
|
|
+--------------------------*/
|
|
|
+/* Slider
|
|
|
+--------------------------*/
|
|
|
+/* Steps
|
|
|
+--------------------------*/
|
|
|
+/* Menu
|
|
|
+--------------------------*/
|
|
|
+/* Rate
|
|
|
+--------------------------*/
|
|
|
+/* DatePicker
|
|
|
+--------------------------*/
|
|
|
+/* Loading
|
|
|
+--------------------------*/
|
|
|
+/* Scrollbar
|
|
|
+--------------------------*/
|
|
|
+/* Carousel
|
|
|
+--------------------------*/
|
|
|
+/* Collapse
|
|
|
+--------------------------*/
|
|
|
+/* Transfer
|
|
|
+--------------------------*/
|
|
|
+/* Header
|
|
|
+ --------------------------*/
|
|
|
+/* Footer
|
|
|
+--------------------------*/
|
|
|
+/* Main
|
|
|
+--------------------------*/
|
|
|
+/* Break-point
|
|
|
+--------------------------*/
|
|
|
+/* Break-points
|
|
|
+ -------------------------- */
|
|
|
+/* Scrollbar
|
|
|
+ -------------------------- */
|
|
|
+/* Placeholder
|
|
|
+ -------------------------- */
|
|
|
+/* BEM
|
|
|
+ -------------------------- */
|
|
|
+/* Element Chalk Variables */
|
|
|
+/* Transition
|
|
|
+-------------------------- */
|
|
|
+/* Colors
|
|
|
+-------------------------- */
|
|
|
+/* 53a8ff */
|
|
|
+/* 66b1ff */
|
|
|
+/* 79bbff */
|
|
|
+/* 8cc5ff */
|
|
|
+/* a0cfff */
|
|
|
+/* b3d8ff */
|
|
|
+/* c6e2ff */
|
|
|
+/* d9ecff */
|
|
|
+/* ecf5ff */
|
|
|
+/* Link
|
|
|
+-------------------------- */
|
|
|
+/* Background
|
|
|
+-------------------------- */
|
|
|
+/* Border
|
|
|
+-------------------------- */
|
|
|
+/* Box-shadow
|
|
|
+-------------------------- */
|
|
|
+/* Fill
|
|
|
+-------------------------- */
|
|
|
+/* Font
|
|
|
+-------------------------- */
|
|
|
+/* Size
|
|
|
+-------------------------- */
|
|
|
+/* z-index
|
|
|
+-------------------------- */
|
|
|
+/* Disable base
|
|
|
+-------------------------- */
|
|
|
+/* Icon
|
|
|
+-------------------------- */
|
|
|
+/* Checkbox
|
|
|
+-------------------------- */
|
|
|
+/* Radio
|
|
|
+-------------------------- */
|
|
|
+/* Select
|
|
|
+-------------------------- */
|
|
|
+/* Alert
|
|
|
+-------------------------- */
|
|
|
+/* Message Box
|
|
|
+-------------------------- */
|
|
|
+/* Message
|
|
|
+-------------------------- */
|
|
|
+/* Notification
|
|
|
+-------------------------- */
|
|
|
+/* Input
|
|
|
+-------------------------- */
|
|
|
+/* Cascader
|
|
|
+-------------------------- */
|
|
|
+/* Group
|
|
|
+-------------------------- */
|
|
|
+/* Tab
|
|
|
+-------------------------- */
|
|
|
+/* Button
|
|
|
+-------------------------- */
|
|
|
+/* cascader
|
|
|
+-------------------------- */
|
|
|
+/* Switch
|
|
|
+-------------------------- */
|
|
|
+/* Dialog
|
|
|
+-------------------------- */
|
|
|
+/* Table
|
|
|
+-------------------------- */
|
|
|
+/* Pagination
|
|
|
+-------------------------- */
|
|
|
+/* Popover
|
|
|
+-------------------------- */
|
|
|
+/* Tooltip
|
|
|
+-------------------------- */
|
|
|
+/* Tag
|
|
|
+-------------------------- */
|
|
|
+/* Tree
|
|
|
+-------------------------- */
|
|
|
+/* Dropdown
|
|
|
+-------------------------- */
|
|
|
+/* Badge
|
|
|
+-------------------------- */
|
|
|
+/* Card
|
|
|
+--------------------------*/
|
|
|
+/* Slider
|
|
|
+--------------------------*/
|
|
|
+/* Steps
|
|
|
+--------------------------*/
|
|
|
+/* Menu
|
|
|
+--------------------------*/
|
|
|
+/* Rate
|
|
|
+--------------------------*/
|
|
|
+/* DatePicker
|
|
|
+--------------------------*/
|
|
|
+/* Loading
|
|
|
+--------------------------*/
|
|
|
+/* Scrollbar
|
|
|
+--------------------------*/
|
|
|
+/* Carousel
|
|
|
+--------------------------*/
|
|
|
+/* Collapse
|
|
|
+--------------------------*/
|
|
|
+/* Transfer
|
|
|
+--------------------------*/
|
|
|
+/* Header
|
|
|
+ --------------------------*/
|
|
|
+/* Footer
|
|
|
+--------------------------*/
|
|
|
+/* Main
|
|
|
+--------------------------*/
|
|
|
+/* 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: #5a45df;
|
|
|
+ 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: #5a45df; }
|
|
|
+
|
|
|
+.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__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 #409eff inset;
|
|
|
+ box-shadow: 0 0 2px 2px #409eff 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: #fff; }
|
|
|
+ .el-tabs__item.is-active {
|
|
|
+ color: #5a45df; }
|
|
|
+ .el-tabs__item:hover {
|
|
|
+ color: #5a45df;
|
|
|
+ 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; }
|
|
|
+
|
|
|
+.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: #fff; }
|
|
|
+ .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: #fff;
|
|
|
+ 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: -1px -1px 0;
|
|
|
+ color: #909399; }
|
|
|
+ .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
|
|
|
+ color: #5a45df;
|
|
|
+ background-color: #fff;
|
|
|
+ border-right-color: #dcdfe6;
|
|
|
+ border-left-color: #dcdfe6; }
|
|
|
+ .el-tabs--border-card > .el-tabs__header .el-tabs__item:hover {
|
|
|
+ color: #5a45df; }
|
|
|
+
|
|
|
+.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__item:nth-child(2), .el-tabs--top.el-tabs--card .el-tabs__item:nth-child(2), .el-tabs--top .el-tabs--left .el-tabs__item:nth-child(2), .el-tabs--top .el-tabs--right .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--border-card .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--card .el-tabs__item:nth-child(2), .el-tabs--bottom .el-tabs--left .el-tabs__item:nth-child(2), .el-tabs--bottom .el-tabs--right .el-tabs__item:nth-child(2) {
|
|
|
+ padding-left: 20px; }
|
|
|
+
|
|
|
+.el-tabs--top.el-tabs--border-card .el-tabs__item:last-child, .el-tabs--top.el-tabs--card .el-tabs__item:last-child, .el-tabs--top .el-tabs--left .el-tabs__item:last-child, .el-tabs--top .el-tabs--right .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--border-card .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--card .el-tabs__item:last-child, .el-tabs--bottom .el-tabs--left .el-tabs__item:last-child, .el-tabs--bottom .el-tabs--right .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.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, .el-tabs--right .el-tabs__nav {
|
|
|
+ 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__nav-prev, .el-tabs--left .el-tabs__nav-next, .el-tabs--right .el-tabs__nav-prev, .el-tabs--right .el-tabs__nav-next {
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer; }
|
|
|
+ .el-tabs--left .el-tabs__nav-prev i, .el-tabs--left .el-tabs__nav-next i, .el-tabs--right .el-tabs__nav-prev i, .el-tabs--right .el-tabs__nav-next i {
|
|
|
+ -webkit-transform: rotateZ(90deg);
|
|
|
+ transform: rotateZ(90deg); }
|
|
|
+ .el-tabs--left .el-tabs__nav-prev, .el-tabs--right .el-tabs__nav-prev {
|
|
|
+ left: auto;
|
|
|
+ top: 0; }
|
|
|
+ .el-tabs--left .el-tabs__nav-next, .el-tabs--right .el-tabs__nav-next {
|
|
|
+ right: auto;
|
|
|
+ bottom: 0; }
|
|
|
+
|
|
|
+.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; }
|
|
|
+
|
|
|
+.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; } }
|