devextreme/less/sources/widgets/generic/toolbar.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/generic/toolbar.generic.less)
* Version: 20.1.7
* Build date: Tue Aug 25 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
@import (once) "./list.generic.less";
@import (once) "./actionSheet.generic.less";
@import (once) "./dropDownMenu.generic.less";
@import (once) "./button.generic.less";
@import (once) "./autocomplete.generic.less";
@import (once) "./checkBox.generic.less";
@import (once) "./dateBox.generic.less";
@import (once) "./menu.generic.less";
@import (once) "./selectBox.generic.less";
@import (once) "./tabs.generic.less";
@import (once) "./textBox.generic.less";
@import (once) "./buttonGroup.generic.less";
@import (once) "./dropDownButton.generic.less";

@GENERIC_TOOLBAR_HEIGHT: @GENERIC_BASE_INLINE_WIDGET_HEIGHT;
@GENERIC_TOOLBAR_PADDING: 0;
@GENERIC_TOOLBAR_ITEM_SPACING: 5px;
@GENERIC_TOOLBAR_LABEL_FONT_SIZE: @GENERIC_M_FONT_SIZE;
@GENERIC_TOOLBAR_SECTION_PADDING: 15px;

@GENERIC_MOBILE_TOOLBAR_HEIGHT: @GENERIC_MOBILE_BASE_INLINE_WIDGET_SIZE;
@GENERIC_MOBILE_TOOLBAR_PADDING: 0;
@GENERIC_MOBILE_TOOLBAR_ITEM_SPACING: 5px;
@GENERIC_MOBILE_TOOLBAR_LABEL_FONT_SIZE: 20px;

.dx-size-default() {
    @GENERIC_TOOLBAR_MENU_TOP_PADDING: 7px;
    @GENERIC_TOOLBAR_MENU_BOTTOM_PADDING: 8px;
}

.dx-size-compact() {
    @GENERIC_TOOLBAR_MENU_TOP_PADDING: 4px;
    @GENERIC_TOOLBAR_MENU_BOTTOM_PADDING: 4px;
}

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

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

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

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

        .dx-rtl& {
            padding-left: 0;
            padding-right: @GENERIC_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: @GENERIC_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;
    }
}

.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(
        @GENERIC_TOOLBAR_HEIGHT,
        @GENERIC_TOOLBAR_PADDING,
        @GENERIC_TOOLBAR_LABEL_FONT_SIZE,
        @GENERIC_TOOLBAR_ITEM_SPACING
    );

    .dx-device-mobile & {
        .dx-toolbar-sizing(
            @GENERIC_MOBILE_TOOLBAR_HEIGHT,
            @GENERIC_MOBILE_TOOLBAR_PADDING,
            @GENERIC_MOBILE_TOOLBAR_LABEL_FONT_SIZE,
            @GENERIC_MOBILE_TOOLBAR_ITEM_SPACING
        );
    }

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

    &.dx-toolbar-compact {
        .dx-button {
            min-width: auto;
        }
    }
}

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

    .dx-device-mobile & {
        .dx-toolbar-item {
            .dx-toolbar-item-padding(@GENERIC_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 {
        .dx-button-content {
            padding: 0;
        }
    }

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

    .dx-toolbar-item-auto-hide {
        padding: @GENERIC_TOOLBAR_ITEM_SPACING @GENERIC_TOOLBAR_ITEM_SPACING * 2;
    }
}

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

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

.dx-toolbar-button {
    .dx-menu {
        .dx-menu-item {
            border: @GENERIC_BUTTON_BORDER_WEIGHT solid transparent;
            border-radius: @button-border-radius;

            .dx-menu-item-content {
                padding-top: @GENERIC_TOOLBAR_MENU_TOP_PADDING;
                padding-bottom: @GENERIC_TOOLBAR_MENU_BOTTOM_PADDING;
                line-height: 0;

                .dx-menu-item-text {
                    line-height: normal;
                }
            }
        }
    }
}

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

    .dx-buttongroup-wrapper {
        .dx-buttongroup-item.dx-button {
            .dx-button-content {
                padding: @GENERIC_TOOLBAR_ITEM_SPACING 2 * @GENERIC_TOOLBAR_ITEM_SPACING;
            }
        }
    }
}