devextreme/less/sources/widgets/generic/tabs.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/generic/tabs.generic.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.generic.less";
@import (once) "./button.generic.less";
@import (once) "./scrollable.generic.less";

.dx-size-default() {
    @GENERIC_TABS_ITEM_PADDING: 9px;
    @GENERIC_TAB_TEXT_LINE_HEIGHT: 25px;

    @GENERIC_TABS_NAV_BUTTON_POSITION: 4px 6px;
    @GENERIC_TABS_NAV_BUTTON_SIZE: 20px;
}

.dx-size-compact() {
    @GENERIC_TABS_ITEM_PADDING: 4px;
    @GENERIC_TAB_TEXT_LINE_HEIGHT: 21px;

    @GENERIC_TABS_NAV_BUTTON_POSITION: 8px 5px;
    @GENERIC_TABS_NAV_BUTTON_SIZE: 13px;
}

@GENERIC_TABS_BORDER_WIDTH: @GENERIC_BASE_BORDER_WIDTH;
@GENERIC_TABS_BORDER: @GENERIC_TABS_BORDER_WIDTH solid @tabs-border-color;
@GENERIC_TABS_TRANSPARENT_BORDER: @GENERIC_TABS_BORDER_WIDTH solid @tabs-tab-bg;
@GENERIC_TAB_FOCUS_BORDER: @GENERIC_TABS_BORDER_WIDTH solid @tabs-focused-border-color;


.dx-tabs-border-mixin(@border-horizontal, @border-vertical) {
    &:after {
        content: "";
        pointer-events: none;
        position: absolute;
        top: -1px;
        bottom: -1px;
        right: -1px;
        left: -1px;
        border-right: @border-horizontal;
        border-left: @border-horizontal;
        border-top: @border-vertical;
        border-bottom: @border-vertical;
        z-index: 1;
    }
}

.dx-tabs {
    border: @GENERIC_TABS_BORDER;
}

.dx-tabs-scrollable {
    margin: -@GENERIC_TABS_BORDER_WIDTH;
    height: calc(100% + 2px);

    .dx-tabs-wrapper {
        border: @GENERIC_TABS_BORDER;

        .dx-tabs-nav-buttons & {
            border-left: @GENERIC_TABS_TRANSPARENT_BORDER;
            border-right: @GENERIC_TABS_TRANSPARENT_BORDER;
        }
    }
}

.dx-tabs-nav-button {
    border: none;
    background-color: @tabs-tab-bg;
    border-radius: 0;
    box-shadow: none;

    .dx-button-content {
        padding: 0;
    }

    &.dx-state-active {
        border: none;
    }

    &.dx-state-disabled {
        opacity: 1;

        .dx-button-content {
            opacity: @tabs-tab-button-disabled-opacity;
        }
    }
}

.dx-tab {
    padding: @GENERIC_TABS_ITEM_PADDING;
    background-color: @tabs-tab-bg;
    color: @tabs-tab-color;

    .dx-icon {
        color: @tabs-tab-icon-color;
        display: inline-block;
        vertical-align: middle;
        .dx-icon-sizing(@GENERIC_BASE_ICON_SIZE);
        .dx-icon-margin(@GENERIC_BASE_ICON_SIZE/2);
    }

    &.dx-state-hover {
        background-color: @tabs-tab-hover-bg;
    }

    &.dx-state-active {
        background-color: @tabs-tab-active-bg;
        color: @tabs-tab-selected-color;
    }

    &.dx-state-focused {
        .dx-tabs-border-mixin(@GENERIC_TAB_FOCUS_BORDER, @GENERIC_TAB_FOCUS_BORDER);
    }

    &.dx-tab-selected {
        background-color: @tabs-tab-selected-bg;
        color: @tabs-tab-selected-color;
    }
}

.dx-tab-selected {
    .dx-tabs-border-mixin(@GENERIC_TABS_BORDER, none);

    .dx-icon {
        color: @tabs-tab-icon-selected-color;
    }

    &:not(.dx-state-focused) {
        & + & {
            &:after {
                border-left: @GENERIC_TABS_TRANSPARENT_BORDER;

                .dx-rtl & {
                    border-left: @GENERIC_TABS_BORDER;
                    border-right: @GENERIC_TABS_TRANSPARENT_BORDER;
                }
            }
        }
    }
}

.dx-tab-text {
    vertical-align: middle;
    line-height: @GENERIC_TAB_TEXT_LINE_HEIGHT;
}

.dx-state-disabled {
    &.dx-tabs {
        opacity: 1;
    }

    .dx-tab-content {
        opacity: 0.3;
    }
}