deer-ui/es/tabs/style.less

React.js UI components for PC Web

@import '../styles/themes.less';

@prefixCls: deer-ui-tabs;

.@{prefixCls} {
    font-size: @default-tabs-font-size;
    width: 100%;
    &-header {
        display: flex;
        justify-content: space-around;
        cursor: pointer;
        position: relative;
        margin-bottom: -1px;
        &-item {
            padding: 12px 30px;
            color: @default-tabs-header-color;
            &.active {
                color: @default-tabs-active-color;
            }
            &.disabled {
                color: @disabled-font-color;
                cursor: not-allowed;
            }
        }
        .@{prefixCls}-line {
            position: absolute;
            bottom: 0;
            width: auto;
            left: 0;
            border-bottom: 2px solid @default-tabs-active-color;
            transition: transform  @default-tabs-transition-time @default-tabs-transition-type;
        }
    }
    &-content {
        display: flex;
        border-top: 1px solid @default-tabs-content-border-top-color;
        width: 100%;
        padding: 12px 30px;
    }
}

.TabPane {
    color: @default-tabPane-color;
    padding-top: @default-tabPane-padding-top;
}