@qsxy/element-plus-react 1.0.0-next.12 → 1.0.0-next.15

package/dist/theme-chalk/tabs/index.scss

@@ -1,620 +0,0 @@
-@use '../common/var';
-
-.#{$namespace}-tabs {
-    --#{$namespace}-tabs-header-height: 40px;
-    --#{$namespace}-tabs-header-margin-bottom: 15px;
-}
-
-.#{$namespace}-tabs {
-    .#{$namespace}-tabs__header {
-        padding: 0;
-        position: relative;
-        margin: 0 0 var(--#{$namespace}-tabs-header-margin-bottom);
-    }
-    .#{$namespace}-tabs__active-bar {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        height: 2px;
-        background: var(--#{$namespace}-color-primary);
-        z-index: 1;
-        transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-        list-style: none;
-    }
-    .#{$namespace}-tabs__new-tab {
-        float: right;
-        border: 1px solid #d3dce6;
-        height: 18px;
-        width: 18px;
-        line-height: 18px;
-        margin: 10px;
-        border-radius: 3px;
-        text-align: center;
-        font-size: 12px;
-        color: #d3dce6;
-        cursor: pointer;
-        transition: all 0.15s;
-
-        .is-icon-plus {
-            height: inherit;
-            width: inherit;
-            transform: scale(0.8, 0.8);
-
-            svg {
-                vertical-align: middle;
-            }
-        }
-
-        &:hover {
-            color: var(--#{$namespace}-color-primary);
-        }
-    }
-    .#{$namespace}-tabs__nav-wrap {
-        overflow: hidden;
-        margin-bottom: -1px;
-        position: relative;
-
-        &::after {
-            content: '';
-            position: absolute;
-            left: 0;
-            bottom: 0;
-            width: 100%;
-            height: 2px;
-            background-color: var(--#{$namespace}-border-color);
-            z-index: 1;
-        }
-
-        &.is-scrollable {
-            padding: 0 30px;
-            box-sizing: border-box;
-        }
-    }
-    .#{$namespace}-tabs__nav-scroll {
-        overflow: hidden;
-        &.is-center {
-            width: 100%;
-            height: 100%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-    }
-    .#{$namespace}-tabs__nav-next,
-    .#{$namespace}-tabs__nav-prev {
-        position: absolute;
-        cursor: pointer;
-        line-height: var(--#{$namespace}-tabs-header-height);
-        font-size: 16px;
-        color: var(--#{$namespace}-text-color-secondary);
-        width: 30px;
-        text-align: center;
-
-        &.is-disabled {
-            color: var(--#{$namespace}-disabled-text-color);
-            cursor: not-allowed;
-            box-shadow: none;
-        }
-    }
-    .#{$namespace}-tabs__nav-next {
-        right: 0;
-        box-shadow: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
-    }
-    .#{$namespace}-tabs__nav-prev {
-        left: 0;
-        box-shadow: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
-    }
-    .#{$namespace}-tabs__nav {
-        white-space: nowrap;
-        position: relative;
-        transition: transform 0.3s;
-        float: left;
-        z-index: 2;
-
-        &.is-stretch {
-            min-width: 100%;
-            display: flex;
-            & > * {
-                flex: 1;
-                text-align: center;
-            }
-        }
-    }
-    .#{$namespace}-tabs__item {
-        padding: 0 20px;
-        height: var(--#{$namespace}-tabs-header-height);
-        box-sizing: border-box;
-        line-height: var(--#{$namespace}-tabs-header-height);
-        display: inline-block;
-        list-style: none;
-        font-size: 14px;
-        font-weight: 500;
-        color: var(--#{$namespace}-text-color-regular);
-        position: relative;
-
-        &:focus,
-        &:focus:active {
-            outline: none;
-        }
-
-        & .is-icon-close {
-            border-radius: 50%;
-            text-align: center;
-            transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-            margin-left: 5px;
-            &:before {
-                transform: scale(0.9);
-                display: inline-block;
-            }
-
-            &:hover {
-                background-color: var(--#{$namespace}-text-color-placeholder);
-                color: #ffffff;
-            }
-
-            svg {
-                margin-top: 1px;
-            }
-        }
-
-        &.is-active {
-            color: var(--#{$namespace}-color-primary);
-        }
-
-        &:hover {
-            color: var(--#{$namespace}-color-primary);
-            cursor: pointer;
-        }
-
-        &.is-disabled {
-            color: var(--#{$namespace}-disabled-text-color);
-            cursor: not-allowed;
-        }
-    }
-    .#{$namespace}-tabs__content {
-        overflow: hidden;
-        position: relative;
-    }
-
-    &.#{$namespace}-tabs--card {
-        & > .#{$namespace}-tabs__header {
-            border-bottom: 1px solid var(--#{$namespace}-border-color);
-        }
-        & > .#{$namespace}-tabs__header .#{$namespace}-tabs__nav-wrap::after {
-            content: none;
-        }
-        & > .#{$namespace}-tabs__header .#{$namespace}-tabs__nav {
-            border: 1px solid var(--#{$namespace}-border-color);
-            border-bottom: none;
-            border-radius: 4px 4px 0 0;
-            box-sizing: border-box;
-        }
-        & > .#{$namespace}-tabs__header .#{$namespace}-tabs__active-bar {
-            display: none;
-        }
-        & > .#{$namespace}-tabs__header .#{$namespace}-tabs__item .is-icon-close {
-            position: relative;
-            font-size: 12px;
-            width: 0;
-            height: 14px;
-            vertical-align: middle;
-            line-height: 15px;
-            overflow: hidden;
-            top: -1px;
-            right: -2px;
-            transform-origin: 100% 50%;
-        }
-        & > .#{$namespace}-tabs__header .#{$namespace}-tabs__item {
-            border-bottom: 1px solid transparent;
-            border-left: 1px solid var(--#{$namespace}-border-color);
-            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);
-            &:first-child {
-                border-left: none;
-            }
-            &.is-closable {
-                &:hover {
-                    padding-left: 13px;
-                    padding-right: 13px;
-
-                    & .is-icon-close {
-                        width: 14px;
-                    }
-                }
-            }
-            &.is-active {
-                border-bottom-color: var(--#{$namespace}-border-color);
-
-                &.is-closable {
-                    padding-left: 20px;
-                    padding-right: 20px;
-
-                    .is-icon-close {
-                        width: 14px;
-                    }
-                }
-            }
-        }
-    }
-
-    &.#{$namespace}-tabs--border-card {
-        background: var(--#{$namespace}-bg-color-overlay);
-        border: 1px solid var(--#{$namespace}-border-color);
-        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
-
-        & > .#{$namespace}-tabs__content {
-            padding: 15px;
-        }
-        & > .#{$namespace}-tabs__header {
-            background-color: var(--#{$namespace}-fill-color-light);
-            border-bottom: 1px solid var(--#{$namespace}-border-color);
-            margin: 0;
-        }
-        & > .#{$namespace}-tabs__header .#{$namespace}-tabs__nav-wrap::after {
-            content: none;
-        }
-        & > .#{$namespace}-tabs__header .#{$namespace}-tabs__item {
-            transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-            border: 1px solid transparent;
-            margin-top: -1px;
-            color: var(--#{$namespace}-text-color-secondary);
-
-            &:first-child {
-                margin-left: -1px;
-            }
-
-            & + .#{$namespace}-tabs__item {
-                margin-left: -1px;
-            }
-
-            &.is-active {
-                color: var(--#{$namespace}-color-primary);
-                background-color: var(--#{$namespace}-bg-color-overlay);
-                border-right-color: var(--#{$namespace}-border-color);
-                border-left-color: var(--#{$namespace}-border-color);
-            }
-            &:not(.is-disabled):hover {
-                color: var(--#{$namespace}-color-primary);
-            }
-            &.is-disabled {
-                color: var(--#{$namespace}-disabled-text-color);
-            }
-        }
-
-        & > .#{$namespace}-tabs__header .is-scrollable .#{$namespace}-tabs__item:first-child {
-            margin-left: 0;
-        }
-    }
-    &.#{$namespace}-tabs--top,
-    &.#{$namespace}-tabs--bottom {
-        .#{$namespace}-tabs__item.is-top:nth-child(2),
-        .#{$namespace}-tabs__item.is-bottom:nth-child(2) {
-            padding-left: 0;
-        }
-        .#{$namespace}-tabs__item.is-top:last-child,
-        .#{$namespace}-tabs__item.is-bottom:last-child {
-            padding-right: 0;
-        }
-
-        &.#{$namespace}-tabs--border-card,
-        &.#{$namespace}-tabs--card,
-        .#{$namespace}-tabs--left,
-        .#{$namespace}-tabs--elight {
-            & > .#{$namespace}-tabs__header {
-                .#{$namespace}-tabs__item:nth-child(2) {
-                    padding-left: 20px;
-                }
-                .#{$namespace}-tabs__item:last-child {
-                    padding-right: 20px;
-                }
-            }
-        }
-    }
-    &.#{$namespace}-tabs--bottom {
-        .#{$namespace}-tabs__header.is-bottom {
-            margin-bottom: 0;
-            margin-top: 10px;
-        }
-        &.#{$namespace}-tabs--border-card {
-            .#{$namespace}-tabs__header.is-bottom {
-                border-bottom: 0;
-                border-top: 1px solid var(--#{$namespace}-border-color);
-            }
-            .#{$namespace}-tabs__nav-wrap.is-bottom {
-                margin-top: -1px;
-                margin-bottom: 0;
-            }
-            .#{$namespace}-tabs__item.is-bottom:not(.is-active) {
-                border: 1px solid transparent;
-            }
-            .#{$namespace}-tabs__item.is-bottom {
-                margin: 0 -1px -1px -1px;
-            }
-        }
-    }
-    &.#{$namespace}-tabs--left,
-    &.#{$namespace}-tabs--elight {
-        overflow: hidden;
-
-        .#{$namespace}-tabs__header.is-left,
-        .#{$namespace}-tabs__header.is-right,
-        .#{$namespace}-tabs__nav-wrap.is-left,
-        .#{$namespace}-tabs__nav-wrap.is-right,
-        .#{$namespace}-tabs__nav-scroll {
-            height: 100%;
-        }
-
-        .#{$namespace}-tabs__active-bar.is-left,
-        .#{$namespace}-tabs__active-bar.is-right {
-            top: 0;
-            bottom: auto;
-            width: 2px;
-            height: auto;
-        }
-
-        .#{$namespace}-tabs__nav-wrap.is-left,
-        .#{$namespace}-tabs__nav-wrap.is-right {
-            margin-bottom: 0;
-
-            & > .#{$namespace}-tabs__nav-prev,
-            & > .#{$namespace}-tabs__nav-next {
-                height: 30px;
-                line-height: 30px;
-                width: 100%;
-                text-align: center;
-                cursor: pointer;
-
-                i {
-                    transform: rotateZ(90deg);
-                }
-            }
-            & > .#{$namespace}-tabs__nav-prev {
-                left: auto;
-                top: 0;
-            }
-            & > .#{$namespace}-tabs__nav-next {
-                right: auto;
-                bottom: 0;
-            }
-
-            &.is-scrollable {
-                padding: 30px 0;
-            }
-
-            &::after {
-                height: 100%;
-                width: 2px;
-                bottom: auto;
-                top: 0;
-            }
-        }
-
-        .#{$namespace}-tabs__nav.is-left,
-        .#{$namespace}-tabs__nav.is-right {
-            float: none;
-        }
-        .#{$namespace}-tabs__item.is-left,
-        .#{$namespace}-tabs__item.is-right {
-            display: block;
-        }
-    }
-    &.#{$namespace}-tabs--left {
-        .#{$namespace}-tabs__header.is-left {
-            float: left;
-            margin-bottom: 0;
-            margin-right: 10px;
-        }
-        .#{$namespace}-tabs__nav-wrap.is-left {
-            margin-right: -1px;
-            &::after {
-                left: auto;
-                right: 0;
-            }
-        }
-        .#{$namespace}-tabs__active-bar.is-left {
-            right: 0;
-            left: auto;
-        }
-        .#{$namespace}-tabs__item.is-left {
-            text-align: right;
-        }
-
-        &.#{$namespace}-tabs--card {
-            .#{$namespace}-tabs__active-bar.is-left {
-                display: none;
-            }
-            .#{$namespace}-tabs__item.is-left {
-                border-left: none;
-                border-right: 1px solid var(--#{$namespace}-border-color);
-                border-bottom: none;
-                border-top: 1px solid var(--#{$namespace}-border-color);
-                text-align: left;
-            }
-            .#{$namespace}-tabs__item.is-left:first-child {
-                border-right: 1px solid var(--#{$namespace}-border-color);
-                border-top: none;
-            }
-            .#{$namespace}-tabs__item.is-left.is-active {
-                border: 1px solid var(--#{$namespace}-border-color);
-                border-right-color: var(--#{$namespace}-border-color);
-                border-left: none;
-                border-bottom: none;
-
-                &:first-child {
-                    border-top: none;
-                }
-                &:last-child {
-                    border-bottom: none;
-                }
-            }
-
-            .#{$namespace}-tabs__nav {
-                border-radius: 4px 0 0 4px;
-                border-bottom: 1px solid var(--#{$namespace}-border-color);
-                border-right: none;
-            }
-
-            .#{$namespace}-tabs__new-tab {
-                float: none;
-            }
-        }
-
-        &.#{$namespace}-tabs--border-card {
-            .#{$namespace}-tabs__header.is-left {
-                border-right: 1px solid var(--#{$namespace}-border-color);
-            }
-            .#{$namespace}-tabs__item.is-left {
-                border: 1px solid transparent;
-                margin: -1px 0 -1px -1px;
-
-                &.is-active {
-                    border-color: transparent;
-                    border-top-color: var(--#{$namespace}-border-color);
-                    border-bottom-color: var(--#{$namespace}-border-color);
-                }
-            }
-        }
-    }
-    &.#{$namespace}-tabs--elight {
-        .#{$namespace}-tabs__header.is-right {
-            float: right;
-            margin-bottom: 0;
-            margin-left: 10px;
-        }
-
-        .#{$namespace}-tabs__nav-wrap.is-right {
-            margin-left: -1px;
-            &::after {
-                left: 0;
-                right: auto;
-            }
-        }
-
-        .#{$namespace}-tabs__active-bar.is-right {
-            left: 0;
-        }
-
-        &.#{$namespace}-tabs--card {
-            .#{$namespace}-tabs__active-bar.is-right {
-                display: none;
-            }
-            .#{$namespace}-tabs__item.is-right {
-                border-bottom: none;
-                border-top: 1px solid var(--#{$namespace}-border-color);
-            }
-            .#{$namespace}-tabs__item.is-right:first-child {
-                border-left: 1px solid var(--#{$namespace}-border-color);
-                border-top: none;
-            }
-            .#{$namespace}-tabs__item.is-right.is-active {
-                border: 1px solid var(--#{$namespace}-border-color);
-                border-left-color: var(--#{$namespace}-border-color);
-                border-right: none;
-                border-bottom: none;
-
-                &:first-child {
-                    border-top: none;
-                }
-                &:last-child {
-                    border-bottom: none;
-                }
-            }
-
-            .#{$namespace}-tabs__nav {
-                border-radius: 0 4px 4px 0;
-                border-bottom: 1px solid var(--#{$namespace}-border-color);
-                border-left: none;
-            }
-        }
-        &.#{$namespace}-tabs--border-card {
-            .#{$namespace}-tabs__header.is-right {
-                border-left: 1px solid var(--#{$namespace}-border-color);
-            }
-            .#{$namespace}-tabs__item.is-right {
-                border: 1px solid transparent;
-                margin: -1px -1px -1px 0;
-
-                &.is-active {
-                    border-color: transparent;
-                    border-top-color: var(--#{$namespace}-border-color);
-                    border-bottom-color: var(--#{$namespace}-border-color);
-                }
-            }
-        }
-    }
-}
-
-.slideInRight-transition,
-.slideInLeft-transition {
-    display: inline-block;
-}
-.slideInRight-enter {
-    animation: slideInRight-enter 0.3s;
-}
-.slideInRight-leave {
-    position: absolute;
-    left: 0;
-    right: 0;
-    animation: slideInRight-leave 0.3s;
-}
-.slideInLeft-enter {
-    animation: slideInLeft-enter 0.3s;
-}
-.slideInLeft-leave {
-    position: absolute;
-    left: 0;
-    right: 0;
-    animation: slideInLeft-leave 0.3s;
-}
-
-@keyframes slideInRight-enter {
-    0% {
-        opacity: 0;
-        transform-origin: 0 0;
-        transform: translateX(100%);
-    }
-
-    to {
-        opacity: 1;
-        transform-origin: 0 0;
-        transform: translateX(0);
-    }
-}
-@keyframes slideInRight-leave {
-    0% {
-        transform-origin: 0 0;
-        transform: translateX(0);
-        opacity: 1;
-    }
-
-    100% {
-        transform-origin: 0 0;
-        transform: translateX(100%);
-        opacity: 0;
-    }
-}
-@keyframes slideInLeft-enter {
-    0% {
-        opacity: 0;
-        transform-origin: 0 0;
-        transform: translateX(-100%);
-    }
-
-    to {
-        opacity: 1;
-        transform-origin: 0 0;
-        transform: translateX(0);
-    }
-}
-@keyframes slideInLeft-leave {
-    0% {
-        transform-origin: 0 0;
-        transform: translateX(0);
-        opacity: 1;
-    }
-
-    100% {
-        transform-origin: 0 0;
-        transform: translateX(-100%);
-        opacity: 0;
-    }
-}