acud/es/tabs/style/card.less

acg react 组件库

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

.@{tab-prefix-cls}-card {

    >.@{tab-prefix-cls}-nav,
    >div>.@{tab-prefix-cls}-nav {
        .@{tab-prefix-cls}-tab {
            margin: 0;
            padding: @tabs-card-horizontal-padding;
            background: @tabs-card-head-background;
            border: @border-width-base @border-style-base @tabs-border-color-split;

            &-active {
                color: @tabs-active-color;
                background: @tabs-card-head-background;
            }
        }

        .@{tab-prefix-cls}-ink-bar {
            visibility: hidden;
        }
    }

    // ========================== Top & Bottom ==========================
    &.@{tab-prefix-cls}-top,
    &.@{tab-prefix-cls}-bottom {

        >.@{tab-prefix-cls}-nav,
        >div>.@{tab-prefix-cls}-nav {
            .@{tab-prefix-cls}-tab+.@{tab-prefix-cls}-tab {
                margin-left: @tabs-card-gutter;
            }
        }
    }

    &.@{tab-prefix-cls}-top {

        >.@{tab-prefix-cls}-nav,
        >div>.@{tab-prefix-cls}-nav {
            .@{tab-prefix-cls}-tab {
                border-radius: @tabs-border-radius-base @tabs-border-radius-base 0 0;

                &-active {
                    border-bottom-color: @component-background;
                }
            }
        }
    }

    &.@{tab-prefix-cls}-bottom {

        >.@{tab-prefix-cls}-nav,
        >div>.@{tab-prefix-cls}-nav {
            .@{tab-prefix-cls}-tab {
                border-radius: 0 0 @tabs-border-radius-base @tabs-border-radius-base;

                &-active {
                    border-top-color: @component-background;
                }
            }
        }
    }

    // ========================== Left & Right ==========================
    &.@{tab-prefix-cls}-left,
    &.@{tab-prefix-cls}-right {

        >.@{tab-prefix-cls}-nav,
        >div>.@{tab-prefix-cls}-nav {
            .@{tab-prefix-cls}-tab+.@{tab-prefix-cls}-tab {
                margin-top: @tabs-card-gutter;
            }
        }
    }

    &.@{tab-prefix-cls}-left {

        >.@{tab-prefix-cls}-nav,
        >div>.@{tab-prefix-cls}-nav {
            .@{tab-prefix-cls}-tab {
                border-radius: @tabs-border-radius-base 0 0 @tabs-border-radius-base;

                &-active {
                    border-right-color: @component-background;
                }
            }
        }
    }

    &.@{tab-prefix-cls}-right {

        >.@{tab-prefix-cls}-nav,
        >div>.@{tab-prefix-cls}-nav {
            .@{tab-prefix-cls}-tab {
                border-radius: 0 @tabs-border-radius-base @tabs-border-radius-base 0;

                &-active {
                    border-left-color: @component-background;
                }
            }
        }
    }
}