@chief-editor/ui/css/components/Tab/styles.less

UI Component for chief editor

@import "./var.less";
@import "./mixin.less";

.tab-size(@size, @tab-right-span, @tab-bottom-span) {
    &.@{prefixCls}-tab-type-basic,
    &.@{prefixCls}-tab-type-line {
        &.@{prefixCls}-tab-tabPosition-top,
        &.@{prefixCls}-tab-tabPosition-bottom {
            > .@{prefixCls}-tab-bar .@{prefixCls}-tab-bar-item {
                &:not(:last-child) {
                    margin-right: @tab-right-span;
                }
            }
        }

        &.@{prefixCls}-tab-tabPosition-left,
        &.@{prefixCls}-tab-tabPosition-right {
            > .@{prefixCls}-tab-bar .@{prefixCls}-tab-bar-item {
                &:not(:last-child) {
                    margin-bottom: @tab-bottom-span;
                }
            }
        }

        .@{prefixCls}-tab-bar {
            &-item {
                .font-height(@size);
            }
        }
    }
}

.@{prefixCls}-tab {
    display: flex;

    &-bar {
        display: flex;
        flex: none;
        align-items: center;
        justify-content: space-between;

        &-items {
            align-self: flex-end;
            position: relative;
            overflow: hidden;
        }

        &-items-inner {
            display: flex;
            align-items: center;
            width: 100%;
            height: 100%;
            @transition-value: all ease-in-out @motion-duration-a,
            transform ease-in-out @motion-duration-c;
            .property-prefix(transition, @transition-value);

            &-line {
                display: none;
                position: absolute;
                width: 1px;
                height: 1px;
                background-color: @color-primary6;
                @transition-value: all ease-in-out @motion-duration-b,
                opacity linear 0s;
                .property-prefix(transition, @transition-value);
            }
        }

        &-extra {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            align-self: stretch;
            flex: auto;
        }

        &-collapse {
            a {
                padding: 4px 8px;
                color: @color-text-grey3;

                & > span:last-child {
                    margin-left: 4px;
                }
            }
        }

        &-item {
            display: inline-block;
            margin-left: 16px;
            position: relative;
            width: 100%;
            cursor: pointer;
            color: @color-text-grey2;
            font-size: 12px;
            font-weight: 400;
            white-space: nowrap;
            @transition-value: all ease-in-out @motion-duration-a,
            font-weight linear 0s,
            border linear 50ms 0s;
            .property-prefix(transition, @transition-value);

            &:hover:not(.@{prefixCls}-tab-bar-item-disabled) {
                color: @color-text-grey1;
            }

            &-active {
                color: @color-text-grey1;
                @transition-value: all ease-in-out @motion-duration-a,
                font-weight linear 0s,
                border linear 0s @motion-duration-b;
                .property-prefix(transition, @transition-value);
            }

            &-disabled {
                cursor: not-allowed;
                color: @color-text-grey4;
            }
        }
    }


    &-tabPosition-top,
    &-tabPosition-bottom {
        flex-direction: column;

        > .@{prefixCls}-tab-bar {
            flex-direction: row;

            .@{prefixCls}-tab-bar-items-inner {
                flex-direction: row;
            }

            .@{prefixCls}-tab-bar-item {
                padding: 8px 0;
            }

            .@{prefixCls}-tab-bar-prev {
                margin-right: 4px;
            }

            .@{prefixCls}-tab-bar-next {
                margin-left: 4px;
            }

            .@{prefixCls}-tab-bar-extra {
                flex-direction: row;
            }

            .@{prefixCls}-tab-bar-extra-content {
                padding: 4px 0;
                margin-left: 16px;
            }

            .@{prefixCls}-tab-bar-add {
                margin-left: 8px;
                margin-right: 8px;
            }
        }
    }

    &-tabPosition-left,
    &-tabPosition-right {
        flex-direction: row;

        > .@{prefixCls}-tab-bar {
            flex-direction: column;

            .@{prefixCls}-tab-bar-items-inner {
                flex-direction: column;
            }

            .@{prefixCls}-tab-bar-items {
                width: 100%;
            }

            .@{prefixCls}-tab-bar-item {
                padding: 4px 8px;
            }

            .@{prefixCls}-tab-bar-prev {
                margin-bottom: 4px;
            }

            .@{prefixCls}-tab-bar-next {
                margin-top: 4px;
            }

            .@{prefixCls}-tab-bar-extra {
                flex-direction: column;
            }

            .@{prefixCls}-tab-bar-extra-content {
                padding: 0 4px;
                margin-top: 16px;
            }

            .@{prefixCls}-tab-bar-add {
                margin-left: 8px;
                margin-right: 8px;
            }
        }
    }

    &-tabPosition-left {
        > .@{prefixCls}-tab-bar {
            .@{prefixCls}-tab-bar-item {
                text-align: right;
            }
        }
    }


    &-type-line {
        &.@{prefixCls}-tab-tabPosition-top,
        &.@{prefixCls}-tab-tabPosition-bottom {
            > .@{prefixCls}-tab-bar {
                margin: 0;
            }
        }

        .line-position(@placement, @border-placement) {
            &.@{prefixCls}-tab-tabPosition-@{placement} {
                > .@{prefixCls}-tab-bar {
                    border-@{border-placement}: 1px solid @color-neutral5;

                    .@{prefixCls}-tab-bar-item {
                        border-@{border-placement}: 1px solid transparent;
                    }

                    .@{prefixCls}-tab-bar-item-active {
                        border-@{border-placement}: 1px solid @color-primary6;
                    }
                }

                .@{prefixCls}-tab-bar-items-inner-line {
                    display: block;
                        @{border-placement}: 0;
                }
            }
        }

        .line-position(bottom, top);
        .line-position(top, bottom);
        .line-position(right, left);
        .line-position(left, right);
    }

    &-item {
        flex: 1;
        display: none;

        &-active {
            display: block;
        }
    }

    &-bar-collapse {
        .@{prefixCls}-tab-bar-item {
            margin-left: 0;
        }
    }
}