devextreme/less/sources/widgets/ios7/navBar.ios7.less

HTML5 JavaScript Component Suite for Responsive Web Development

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

.dx-navbar {
    display: inline-table;
    padding: 0;
    width: 100%;
    height: 58px;
    border: 0;
    border-top: 1px solid @IOS7_NAVBAR_BORDER;
    background: @IOS7_NAVBAR_BACKGROUND;
    table-layout: fixed;
    border-radius: 0;

    .dx-hairlines & {
        border-top-width: 0.5px;
    }

    .dx-nav-item,
    .dx-rtl .dx-nav-item {
        position: relative;
        padding: 0 4px;
        min-width: 52px;
        height: 100%;
        border: none;
        background: transparent;
        border-radius: 0;

        &:first-child,
        &:last-child {
            border: none;
            border-radius: 0;
        }

        .dx-icon {
            position: absolute;
            margin: 2px 4px;
            top: 0;
            left: 50%;
            display: block;
            margin-left: -19px;
            .dx-icon-sizing(30px, 38px);

            color: @IOS7_NAVBAR_ICON_COLOR;

            .dx-rtl&,
            .dx-rtl & {
                margin: 2px 4px;
                margin-left: -19px;
            }
        }

        .dx-tab-text {
            display: block;
            padding: 0;
            padding-top: 30px;
            width: 100%;
            color: @IOS7_NAVBAR_TEXT;
            font-size: 11px;
            line-height: 28px;
        }

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

            .dx-tab-text {
                color: @IOS7_NAVBAR_SELECTED_TAB_TEXT;
            }
        }

        &.dx-state-active {
            background: none;

            .dx-icon {
                color: @IOS7_NAVBAR_TEXT;
            }

            .dx-tab-text {
                color: @IOS7_NAVBAR_TEXT;
            }

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

                .dx-tab-text {
                    color: @IOS7_NAVBAR_SELECTED_TAB_TEXT;
                }
            }
        }
    }
}

.dx-navbar-item-badge {
    top: 5%;
}

.dx-state-disabled {
    &.dx-nav-item,
    .dx-nav-item {
        &.dx-tab-selected .dx-tab-text,
        .dx-tab-text {
            color: @IOS7_NAVBAR_DISABLE_TEXT;
        }
    }
}

.dx-device-tablet {
    .dx-nav-item {
        display: inline-block;
        padding: 0 30px;
    }
}