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

HTML5 JavaScript Component Suite for Responsive Web Development

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

@GENERIC_TABPANEL_INSET_SHADOW_LEFT: inset @GENERIC_TABS_BORDER_WIDTH 0;
@GENERIC_TABPANEL_INSET_SHADOW_TOP: inset 0 @GENERIC_TABS_BORDER_WIDTH;
@GENERIC_TABPANEL_INSET_SHADOW_RIGHT: inset (-@GENERIC_TABS_BORDER_WIDTH) 0;
@GENERIC_TABPANEL_INSET_SHADOW_BOTTOM: inset 0 (-@GENERIC_TABS_BORDER_WIDTH);

.tabpanel-shadow-mixin(@accent-color) {
    & > .dx-tabpanel-tabs {
        .dx-tabs {
            box-shadow: @GENERIC_TABPANEL_INSET_SHADOW_BOTTOM @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_TOP, @GENERIC_TABPANEL_INSET_SHADOW_RIGHT, @GENERIC_TABPANEL_INSET_SHADOW_LEFT;
        }

        .dx-tab {
            box-shadow: @GENERIC_TABPANEL_INSET_SHADOW_TOP, @GENERIC_TABPANEL_INSET_SHADOW_BOTTOM @accent-color;

            &.dx-tab-selected {
                box-shadow: @GENERIC_TABPANEL_INSET_SHADOW_TOP @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_RIGHT @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_LEFT @accent-color;
            }

            &.dx-tab-selected,
            &.dx-tab-active {
                .dx-tab-content {
                    color: @tabs-tab-selected-color;
                }
            }
        }

        .dx-tabs-expanded {
            .dx-tab:not(.dx-tab-selected) {
                &:first-of-type {
                    box-shadow: @GENERIC_TABPANEL_INSET_SHADOW_BOTTOM @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_LEFT, @GENERIC_TABPANEL_INSET_SHADOW_TOP;

                    .dx-rtl&,
                    .dx-rtl & {
                        box-shadow: @GENERIC_TABPANEL_INSET_SHADOW_BOTTOM @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_RIGHT, @GENERIC_TABPANEL_INSET_SHADOW_TOP;
                    }
                }
            }
        }

        .dx-tabs-stretched {
            .dx-tab:not(.dx-tab-selected) {
                &:last-of-type {
                    box-shadow: @GENERIC_TABPANEL_INSET_SHADOW_BOTTOM @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_RIGHT, @GENERIC_TABPANEL_INSET_SHADOW_TOP;

                    .dx-rtl&,
                    .dx-rtl & {
                        box-shadow: @GENERIC_TABPANEL_INSET_SHADOW_BOTTOM @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_LEFT, @GENERIC_TABPANEL_INSET_SHADOW_TOP;
                    }
                }
            }
        }

        .dx-tabs-nav-button-left {
            box-shadow: @GENERIC_TABPANEL_INSET_SHADOW_BOTTOM @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_LEFT, @GENERIC_TABPANEL_INSET_SHADOW_TOP;
        }

        .dx-tabs-nav-button-right {
            box-shadow: @GENERIC_TABPANEL_INSET_SHADOW_BOTTOM @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_TOP, @GENERIC_TABPANEL_INSET_SHADOW_RIGHT;
        }
    }

    .dx-multiview-wrapper {
        border-color: @accent-color;
    }
}

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

        .dx-tab {
            color: @tabs-border-color;

            .dx-tab-content {
                color: @tabs-tab-color;
            }

            &:after,
            &:before {
                content: none;
            }
        }

        .dx-tabs-nav-button {
            color: @tabs-border-color;
        }
    }

    .dx-tabs-scrollable {
        margin-top: 0;
        margin-bottom: 0;
        height: 100%;

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

    .dx-tab {
        width: 140px;
    }

    &:not(.dx-empty-collection) {
        .dx-multiview-wrapper {
            border-top: none;
        }
    }

    .tabpanel-shadow-mixin(@tabs-border-color);

    &.dx-state-focused {
        .tabpanel-shadow-mixin(@tabs-focused-border-color);
    }

    .dx-multiview-wrapper {
        border: @GENERIC_TABS_BORDER;
    }
}