devextreme/less/sources/widgets/material/toolbar.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/toolbar.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) "./list.material.less";
@import (once) "./actionSheet.material.less";
@import (once) "./dropDownMenu.material.less";
@import (once) "./button.material.less";
@import (once) "./autocomplete.material.less";
@import (once) "./checkBox.material.less";
@import (once) "./dateBox.material.less";
@import (once) "./menu.material.less";
@import (once) "./selectBox.material.less";
@import (once) "./tabs.material.less";
@import (once) "./textBox.material.less";
@import (once) "./buttonGroup.material.less";
@import (once) "./dropDownButton.material.less";

.dx-size-default() {
    @MATERIAL_TOOLBAR_HEIGHT: 76px;
    @MATERIAL_TOOLBAR_MENU_VERTICAL_PADDING: 7px;
}

.dx-size-compact() {
    @MATERIAL_TOOLBAR_HEIGHT: 56px;
    @MATERIAL_TOOLBAR_MENU_VERTICAL_PADDING: 5px;
}

@MATERIAL_TOOLBAR_PADDING: 0;
@MATERIAL_TOOLBAR_ITEM_SPACING: 5px;
@MATERIAL_TOOLBAR_LABEL_FONT_SIZE: @MATERIAL_M_FONT_SIZE;
@MATERIAL_TOOLBAR_SECTION_PADDING: 15px;

@MATERIAL_MOBILE_TOOLBAR_HEIGHT: @MATERIAL_TOOLBAR_HEIGHT;
@MATERIAL_MOBILE_TOOLBAR_PADDING: 0;
@MATERIAL_MOBILE_TOOLBAR_ITEM_SPACING: 5px;
@MATERIAL_MOBILE_TOOLBAR_LABEL_FONT_SIZE: 20px;


.dx-toolbar-sizing(@height, @padding, @label-font-size, @item-spacing) {
    padding: @padding;
    overflow: visible;

    .dx-toolbar-before {
        padding-right: @MATERIAL_TOOLBAR_SECTION_PADDING;

        .dx-rtl& {
            padding-right: 0;
            padding-left: @MATERIAL_TOOLBAR_SECTION_PADDING;
        }
    }

    .dx-toolbar-after {
        padding-left: @MATERIAL_TOOLBAR_SECTION_PADDING;

        .dx-rtl& {
            padding-left: 0;
            padding-right: @MATERIAL_TOOLBAR_SECTION_PADDING;
        }
    }

    .dx-toolbar-before:empty,
    .dx-toolbar-after:empty {
        padding: 0;
    }

    .dx-toolbar-items-container {
        height: @height;
        overflow: visible;
    }

    .dx-toolbar-menu-container {
        padding: 0 0 0 @item-spacing;

        .dx-rtl& {
            padding: 0 @item-spacing 0 0;
        }
    }

    .dx-toolbar-item {
        padding: 0 @item-spacing 0 0;

        &.dx-toolbar-first-in-group {
            padding-left: @MATERIAL_TOOLBAR_ITEM_SPACING*4;
        }

        &:last-child {
            padding: 0;
        }

        .dx-rtl& {
            padding: 0 0 0 @item-spacing;

            &:last-child {
                padding: 0;
            }
        }
    }

    .dx-toolbar-label {
        font-size: @label-font-size;
        font-weight: 500;
    }
}

.dx-toolbar-item-padding(@padding) {
    padding: 0 0 0 @padding;

    &:last-child {
        padding: 0 0 0 @padding;
    }

    &:first-child {
        padding: 0;
    }

    .dx-rtl & {
        &:first-child {
            padding-left: @padding;
        }
    }
}

.dx-toolbar {
    background-color: @toolbar-bg;
    color: @toolbar-color;

    .dx-toolbar-sizing(
        @MATERIAL_TOOLBAR_HEIGHT,
        @MATERIAL_TOOLBAR_PADDING,
        @MATERIAL_TOOLBAR_LABEL_FONT_SIZE,
        @MATERIAL_TOOLBAR_ITEM_SPACING
    );

    .dx-device-mobile & {
        .dx-toolbar-sizing(
            @MATERIAL_MOBILE_TOOLBAR_HEIGHT,
            @MATERIAL_MOBILE_TOOLBAR_PADDING,
            @MATERIAL_MOBILE_TOOLBAR_LABEL_FONT_SIZE,
            @MATERIAL_MOBILE_TOOLBAR_ITEM_SPACING
        );
    }

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

.dx-toolbar-after {
    .dx-toolbar-item {
        .dx-toolbar-item-padding(@MATERIAL_TOOLBAR_ITEM_SPACING);
    }

    .dx-device-mobile & {
        .dx-toolbar-item {
            .dx-toolbar-item-padding(@MATERIAL_MOBILE_TOOLBAR_ITEM_SPACING);
        }
    }
}

.dx-toolbar-background {
    background-color: @toolbar-bg;
}

.dx-toolbar-menu-section {
    border-bottom: 1px solid @base-border-color;

    .dx-toolbar-hidden-button {
        .dx-toolbar-item-auto-hide {
            padding: 0;
        }

        .dx-button {
            height: @MATERIAL_LIST_ITEM_HEIGHT;
            padding: 0;
        }

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

    .dx-button-content {
        padding: 4px;

        .dx-icon {
            color: @toolbar-color;
            .dx-icon-sizing(@MATERIAL_BUTTON_ICON_SIZE);
        }
    }

    .dx-toolbar-item-auto-hide {
        padding: 0 @MATERIAL_LIST_ITEM_HORIZONTAL_PADDING;

        .dx-checkbox {
            padding: (@MATERIAL_LIST_ITEM_HEIGHT - @MATERIAL_CHECKBOX_SIZE) / 2 0;
        }
    }
}

.dx-toolbar-button {
    .dx-button-has-text:not(.dx-button-back) {
        .dx-icon {
            .dx-icon-sizing(@MATERIAL_BUTTON_ICON_SIZE);
            .dx-icon-margin(6px);
        }
    }

    &.dx-toolbar-text-auto-hide .dx-button {
        .dx-button-onlyicon-sizing();

        &.dx-button-has-icon.dx-button-has-text {
            border-radius: 50%;
        }
    }

    .dx-menu {
        .dx-menu-item {
            color: @toolbar-color;
            font-size: @MATERIAL_BASE_FONT_SIZE;
            font-weight: 500;
            height: @MATERIAL_BUTTON_HEIGHT;

            .dx-menu-item-content {
                padding-top: @MATERIAL_TOOLBAR_MENU_VERTICAL_PADDING;
                padding-bottom: @MATERIAL_TOOLBAR_MENU_VERTICAL_PADDING;
            }

            &.dx-menu-item-has-text.dx-menu-item-has-icon {
                .dx-icon {
                    .dx-icon-margin(6px);
                }
            }

            &.dx-state-hover {
                background-color: @button-normal-hover-bg;
            }

            &.dx-state-focused,
            &.dx-state-active {
                background-color: @button-normal-focused-bg;
            }
        }
    }
}

.dx-toolbar-menu-action .dx-button.dx-button-has-icon:not(.dx-button-has-text) {
    border-radius: 0;
}

.dx-toolbar .dx-tab {
    padding: 4px;
}

.dx-toolbar-hidden-button-group {
    margin-top: @MATERIAL_TOOLBAR_PADDING;
    margin-bottom: @MATERIAL_TOOLBAR_PADDING;

    .dx-buttongroup-wrapper {
        .dx-buttongroup-item.dx-button {
            box-shadow: none;

            .dx-button-content {
                padding: @MATERIAL_TOOLBAR_PADDING @MATERIAL_LIST_ITEM_HORIZONTAL_PADDING;
            }
        }
    }
}