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

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/generic/toolbar.generic.less)
* Version: 19.2.6
* Build date: Thu Jan 30 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-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;
}