devextreme/less/sources/widgets/common/tabs.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/common/tabs.less)
* Version: 20.1.4
* Build date: Tue Jun 02 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
@import (once) "./badge.less";
@import (once) "./button.less";
@import (once) "./scrollable.less";

@nav_button_width: 25px;
@icon_size: 16px;

.dx-tabs-ie-hack() {
    a {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        color: white;
        text-decoration: none;
        opacity: 0.001;
    }
}

.dx-tabs-ie-hack {
    .dx-tabs-ie-hack();
}

.dx-tabs {
    .user-select(none);

    display: inline-block;
    width: 100%;
    text-align: center;
    table-layout: fixed;
    position: relative;

    &.dx-tabs-stretched {
        table-layout: auto;
    }

    &.dx-overflow-hidden {
        overflow: hidden;
    }
}

.dx-tabs-wrapper {
    display: table-row;
}


.dx-tabs-scrollable {
    .dx-tabs-wrapper {
        display: block;
        white-space: nowrap;
        height: 100%;
    }

    .dx-tab {
        height: 100%;
        display: inline-block;

        &:before {
            content: "";
            height: 100%;
            display: inline-block;
            vertical-align: middle;
        }
    }

    .dx-scrollable-content {
        height: 100%;
    }
}

.dx-tabs-nav-buttons {
    .dx-tabs-scrollable {
        margin-right: @nav_button_width;
        margin-left: @nav_button_width;
    }
}

.dx-tabs-nav-button {
    width: @nav_button_width;
    padding: 0;
    height: 100%;
    position: absolute;
    top: 0;
}

.dx-tabs-nav-button-left {
    left: 0;
}

.dx-tabs-nav-button-right {
    right: 0;
}

.dx-tabs-expanded {
    display: table;
}

.dx-tab {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;

    .dx-tabs-ie-hack();

    .dx-icon {
        width: @icon_size;
        height: @icon_size;
        display: block;
        margin: 0 auto;
        -webkit-user-drag: none;
    }
}

.dx-tab-content {
    display: inline-block;
    max-width: 100%;
}

.dx-tab-text {
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    max-width: 100%;
    -webkit-user-drag: none;
    .dx-overflow;
}

.dx-tabs-item-badge {
    display: inline-block;
    vertical-align: top;
}

.dx-state-disabled {
    .dx-tab {
        cursor: default;
    }
}