@fesjs/fes-design/es/tabs/style/index.less

fes-design for PC

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin.less';

@tabs-prefix-cls: ~'@{cls-prefix}-tabs';
@tabs-border-color: var(--f-border-color-split);
@tabs-border: var(--f-border-width-base) var(--f-border-style-base) @tabs-border-color;

@tab-active-color: var(--f-primary-color);
@tab-active-bar-width: 2px;
@tab-padding-small: 4px;
@tab-padding-large: 16px;
@horizon-tab-padding: @tab-padding-small @tab-padding-large;
@vertical-tab-padding: @tab-padding-large;

@text-color-disabled: var(--f-text-color-disabled);

.@{tabs-prefix-cls} {
    display: flex;
    background: var(--f-white);
    .default();
    .text();
    
    &-nav {
        position: relative;
        display: flex;
        align-items: center;

        &::before {
            position: absolute;
            background-color: @tabs-border-color;
            content: "";
            pointer-events: none;
        }

        &-prefix,
        &-suffix {
            padding: @horizon-tab-padding;
        }

        .@{tabs-prefix-cls}-nav-scroll {
            .@{tabs-prefix-cls}-nav-scroll-content {
                display: flex;
                flex-wrap: nowrap;
                align-items: center;
            }
        }
    }

    &-tab {
        padding: @horizon-tab-padding;
        color: var(--f-font-color-base);
        font-size: var(--f-font-size-base);
        cursor: pointer;
        transition: width,color,background @animation-duration-slow;
        user-select: none;

        &.hover {
            .@{tabs-prefix-cls}-tab-close {
                width: 0;
                opacity: 0;
            }
            &:hover {    
                .@{tabs-prefix-cls}-tab-close {
                    width: 22px; // icon size + padding left
                    opacity: 0.8;
                }
            }
        }


        &-disabled {
            color: var(--f-text-color-disabled);
            cursor: not-allowed;

            &:hover {
                color: var(--f-text-color-disabled);
            }
        }

        &-label {
            position: relative;
            display: flex;
            flex-wrap: nowrap;
            white-space: nowrap;

            &::before {
                position: absolute;
                background-color: @tab-active-color;
            }
        }

        &-close {
            display: flex;
            align-items: center;
            box-sizing: border-box;
            width: 22px;
            overflow: hidden;
            color: var(--f-text-color-disabled);
            transform: translateX(8px);
            opacity: 0.6;
            transition: all @animation-duration-slow;

            &:hover {
                opacity: 1;
            }
        }

        &-active {
            color: @tab-active-color;
        }
    }

    &-top, &-bottom {
        .@{tabs-prefix-cls}-nav {
            .@{tabs-prefix-cls}-nav-scroll {
                .@{tabs-prefix-cls}-nav-scroll-content {
                    flex-direction: row;
                }
            }
        }
    }

    &-top {
        flex-direction: column;
        
        .@{tabs-prefix-cls}-nav {
            align-items: flex-end;

            &::before {
                bottom: 0;
                left: 0;
                width: 100%;
                height: 1px;
            }

            .@{tabs-prefix-cls}-tab-active:not(.@{tabs-prefix-cls}-tab-card)  {
                .@{tabs-prefix-cls}-tab-label {
                    &::before {
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        height: @tab-active-bar-width;
                        transform: translateY(@tab-padding-small);
                        content: '';
                    }
                }
            }
        }
    }

    &-bottom {
        flex-direction: column-reverse;

        .@{tabs-prefix-cls}-nav {
            align-items: flex-end;

            &::before {
                top: 0;
                left: 0;
                width: 100%;
                height: 1px;
            }

            .@{tabs-prefix-cls}-tab-active:not(.@{tabs-prefix-cls}-tab-card)  {
                .@{tabs-prefix-cls}-tab-label {
                    &::before {
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: @tab-active-bar-width;
                        transform: translateY(0 - @tab-padding-small);
                        content: '';
                    }
                }
            }
        }
    }

    &-left, &-right {
        .@{tabs-prefix-cls}-nav {
            .@{tabs-prefix-cls}-nav-scroll {
                .@{tabs-prefix-cls}-nav-scroll-content {
                    flex-direction: column;

                    .@{tabs-prefix-cls}-tab {
                        width: 100%;

                        &-label {
                            justify-content: center;
                        }
                    }
                }
            }

            &-prefix,
            &-suffix {
                width: 100%;
                padding: 16px;
                text-align: center;
            }
        }
    }

    &-left {
        flex-direction: row;
        .@{tabs-prefix-cls}-nav {
            flex-direction: column;

            &::before {
                top: 0;
                right: 0;
                width: 1px;
                height: 100%;
            }
        }

        .@{tabs-prefix-cls}-tab {
            padding: @vertical-tab-padding;
            text-align: right;

            &.@{tabs-prefix-cls}-tab-active:not(.@{tabs-prefix-cls}-tab-card) {
                .@{tabs-prefix-cls}-tab-label {
                    &::before {
                        top: 0;
                        right: 0;
                        width: @tab-active-bar-width;
                        height: 100%;
                        transform: translateX(@tab-padding-large);
                        content: '';
                    }
                }
            }
        }
    }

    &-right {
        flex-direction: row-reverse;
        .@{tabs-prefix-cls}-nav {
            flex-direction: column;

            &::before {
                top: 0;
                left: 0;
                width: 1px;
                height: 100%;
            }
        }

        .@{tabs-prefix-cls}-tab {
            padding: @vertical-tab-padding;
            text-align: left;

            &.@{tabs-prefix-cls}-tab-active:not(.@{tabs-prefix-cls}-tab-card) {
                .@{tabs-prefix-cls}-tab-label {
                    &::before {
                        top: 0;
                        left: 0;
                        width: @tab-active-bar-width;
                        height: 100%;
                        transform: translateX(0 - @tab-padding-large);
                        content: '';
                    }
                }
            }
        }
    }
    
    &-card {
        .@{tabs-prefix-cls}-nav {
            &::before {
                display: none;
            }

            &-prefix,
            &-suffix {
                border-bottom: @tabs-border;
            }
        }

        .@{tabs-prefix-cls}-tab {
            &-pad {
                align-self: flex-end;
                min-width: 4px;
                border-bottom: @tabs-border;
                // border-bottom-color: var(--f-border-color-base);
            }

            &-pad--last {
                flex: 1;
                align-self: flex-end;
                border-bottom: @tabs-border;
            }
    
            &-card {
                display: flex;
                flex-shrink: 0;
                flex-wrap: nowrap;
                background: var(--f-disabled-color-light);
                border: @tabs-border;
                // border-color: var(--f-border-color-base);
                border-top-left-radius: var(--f-border-radius-base);
                border-top-right-radius: var(--f-border-radius-base);
            }

            &-active {
                margin-bottom: 1px;
                background: none;
                border-bottom: 0;

            }

            &.addable {
                align-items: center;
                align-self: stretch;
                padding: 8px;
            }

        }

    }

    &-tab-pane-wrapper {
        flex: 1;
        overflow: hidden;
    }

    &-tab-pane {
        display: inline-block;
        width: 100%;
    }

    &-slide-fade-enter-active {
        transition: all @animation-duration-slow @ease-base-out;
    }
      
    &-slide-fade-leave-active {
        transition: all @animation-duration-fast @ease-base-out;
    }
    
    &-slide-fade-enter-from {
        transform: translateX(100%);
    }

    &-slide-fade-leave-to {
        opacity: 0;
    }
}