devextreme/less/sources/widgets/material/navBar.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

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

.dx-size-default() {
    @MATERIAL_NAVBAR_ICON_SIZE: 31px;
    @MATERIAL_NAVBAR_BADGE_TOP: 11%;
}
.dx-size-compact() {
    @MATERIAL_NAVBAR_ICON_SIZE: 28px;
    @MATERIAL_NAVBAR_BADGE_TOP: 11%;
}

@MATERIAL_NAVBAR_FOCUSED_ITEM_SHADOW: inset 0 0 0 1px @navbar-tab-focused-border-color;


.dx-navbar {
    padding: 0;
    border: none;
}

.dx-nav-item,
.dx-rtl .dx-nav-item {
    background: @navbar-tab-bg;

    .dx-tab-text {
        line-height: normal;
        color: @navbar-tab-color;
    }

    .dx-navbar & .dx-icon {
        .dx-icon-sizing(@MATERIAL_NAVBAR_ICON_SIZE);

        color: @navbar-tab-color;
    }

    &.dx-tab-selected,
    &.dx-state-focused,
    &.dx-state-active {
        &:after {
            content: none;
        }
    }

    &.dx-tab-selected {
        background: @navbar-tab-selected-bg;

        .dx-tab-text,
        .dx-icon {
            color: @navbar-tab-selected-color;
        }
    }

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

    &.dx-state-focused {
        box-shadow: @MATERIAL_NAVBAR_FOCUSED_ITEM_SHADOW;
    }

    &.dx-state-disabled {
        .dx-icon {
            opacity: 0.5;
        }
    }
}

.dx-navbar-item-badge {
    margin-right: -26px;
    top: @MATERIAL_NAVBAR_BADGE_TOP;
}

.dx-rtl .dx-navbar-item-badge {
    margin-left: -26px;
}