@qsxy/element-plus-react 1.0.0-next.1 → 1.0.0-next.11

package/theme-chalk/tabs/index.scss

@@ -0,0 +1,620 @@
+@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;
+    }
+}