devextreme/less/sources/widgets/material/tabs.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

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

.dx-size-default() {
    @MATERIAL_TABS_ITEM_PADDING: 12px 16px;
    @MATERIAL_TAB_TEXT_LINE_HEIGHT: 24px;
    @MATERIAL_TAB_HEIGHT: 48px;
    @MATERIAL_TAB_MIN_WIDTH: 90px;
}

.dx-size-compact() {
    @MATERIAL_TABS_ITEM_PADDING: 6px 12px;
    @MATERIAL_TAB_TEXT_LINE_HEIGHT: 24px;
    @MATERIAL_TAB_HEIGHT: 36px;
    @MATERIAL_TAB_MIN_WIDTH: 82px;
}

@MATERIAL_TABS_BACKGROUND: darken(@base-bg, 4%);

.dx-tabs {
    padding: 0;
    background-color: @MATERIAL_TABS_BACKGROUND;
    position: relative;

    .dx-inkripple {
        overflow: hidden;
    }
}

.dx-tabs-nav-buttons .dx-tabs-scrollable {
    margin-right: 36px;
    margin-left: 36px;
}

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

    &.dx-button.dx-tabs-nav-button.dx-button-has-icon:not(.dx-button-has-text) {
        .dx-button-flat-color-styling(@base-icon-color, fade(@button-normal-bg-inverted, 8%), fade(@button-normal-bg-inverted, 8%), fade(@button-normal-bg-inverted, 30%));

        border-radius: 0;
    }

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

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

    &.dx-state-disabled {
        opacity: 1;
        background-color: @tabs-tab-bg;

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

.dx-tab {
    padding: @MATERIAL_TABS_ITEM_PADDING;
    min-width: @MATERIAL_TAB_MIN_WIDTH;
    background-color: @tabs-tab-bg;
    color: @tabs-tab-color;

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

    .dx-icon {
        color: @tabs-tab-icon-color;
        vertical-align: middle;
        .dx-icon-sizing(@MATERIAL_BASE_ICON_SIZE);

        margin: 0 auto;
    }

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

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

        &:before {
            content: "";
            position: absolute;
            bottom: 0;
            height: 2px;
            left: 0;
            right: 0;
            background-color: @tabs-selected-tab-bottom-border-color;
        }
    }
}

.dx-tab-content,
.dx-tab-text {
    vertical-align: middle;
    text-transform: uppercase;
    line-height: @MATERIAL_TAB_TEXT_LINE_HEIGHT;
    font-weight: 500;
}

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

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