devextreme/less/sources/widgets/generic/tabPanel.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/generic/tabPanel.generic.less)
* Version: 19.2.6
* Build date: Thu Jan 30 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
@import (once) "./multiView.generic.less";
@import (once) "./tabs.generic.less";

.dx-tabpanel {
    .dx-tabs {
        display: block;
        border-bottom: none;
        background-color: @tabs-tab-bg;

        .dx-empty-collection& {
            border-top: none;
        }
    }

    .dx-tab {
        width: 140px;

        &:not(.dx-tab-selected):not(.dx-state-hover) {
            background: none;
        }
    }

    .dx-tab-selected:before {
        content: "";
        pointer-events: none;
        position: absolute;
        top: 100%;
        bottom: -1px;
        left: 0;
        right: 0;
        z-index: 2;
        height: 0;
        border-bottom: 1.5px solid @tabs-tab-selected-bg;
        // NOTE: fractional pixels for ie
        // stylelint-disable-next-line declaration-block-no-duplicate-properties
        bottom: -1.4px;
    }

    .dx-tabs-wrapper {
        display: block;
    }

    &.dx-state-focused {
        .dx-multiview-wrapper {
            border: @GENERIC_TAB_FOCUS_BORDER;
        }

        .dx-tab-selected:after {
            border-top: @GENERIC_TAB_FOCUS_BORDER;
            border-right: @GENERIC_TAB_FOCUS_BORDER;
            border-left: @GENERIC_TAB_FOCUS_BORDER;
        }

        .dx-tabs-scrollable {
            .dx-tab:not(.dx-tab-selected):before {
                content: "";
                pointer-events: none;
                position: absolute;
                top: 100%;
                bottom: -1px;
                left: 0;
                right: 0;
                z-index: 2;
                height: 0;
                border-bottom: 1.5px solid @tabs-focused-border-color;
                bottom: -1.4px; // stylelint-disable-line declaration-block-no-duplicate-properties
            }

            .dx-tab-selected:after {
                border-bottom: 1.5px solid @tabs-tab-bg;
            }
        }
    }

    .dx-multiview-wrapper {
        border: 1px solid @tabs-border-color;
    }
}