@progress/kendo-ui/css/web/common/toolbar.less

This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.

// Toolbar
.k-toolbar {
    margin: 0;
    padding: (@toolbar-padding-y /2) @toolbar-padding-x;
    border-width: @toolbar-border-width;
    border-style: solid;
    .border-radius( @toolbar-border-radius );
    box-sizing: border-box;
    outline: 0;
    font-size: @toolbar-font-size;
    line-height: @toolbar-line-height;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;

    &::before {
        content: "";
        height: @button-calc-size;
    }

    &.k-toolbar-resizable {
       flex-wrap: nowrap;
    }

    > * {
        // Until flex gap is available in chrome
        margin-top: (@toolbar-padding-y / 2);
        margin-bottom: (@toolbar-padding-y / 2);
        margin-right: @toolbar-spacing;
        flex-shrink: 0;
        display: inline-flex;
        align-items: stretch;
        align-content: center;
        vertical-align: middle;

        > label {
            margin-right: @toolbar-spacing;
        }
    }
    > :last-child {
        margin-right: 0;
    }

    .k-button,
    .k-button-group,
    .k-separator,
    .k-split-button,
    .k-textbox,
    .k-widget,
    label {
        align-self: center;
    }
    .k-split-button > .k-button {
        align-self: stretch;
    }

     // Input
    .k-input,
    .k-picker {
        width: 10em;
    }
    .k-colorpicker {
        width: min-content;
    }

    // Overflow anchor
    .k-overflow-anchor {
        margin: 0;
        width: @toolbar-calc-inner-size;
        height: 100%;
        border-width: 0;
        border-left-width: @button-border-width;
        border-radius: 0;
        border-color: inherit;
        box-sizing: border-box;
        justify-content: center;
        position: absolute;
        top: 0;
        right: 0;
    }


    // Separator
    .k-separator,
    .k-toolbar-separator {
        width: 0;
        height: @line-height-em;
        border-width: 0 0 0 1px;
        border-style: solid;
    }


    // Spacer
    .k-spacer,
    .k-toolbar-spacer {
        height: @line-height-em;
        flex: 1 1 auto;
    }

}

// Overflow container
.k-overflow-container {

    > .k-item {
        padding: 1px;
    }

    // Group
    .k-overflow-tool-group {
        display: block;
    }

    // Button
    .k-overflow-button {
        width: 100%;
        border-color: transparent;
        background-color: transparent;
        background-image: none !important;
        text-align: left;
        justify-content: flex-start;
    }

    // Button group
    .k-button-group {
        display: flex;
        flex-direction: column;

        .k-button ~ .k-button {
            margin: 0;
        }
    }

    // Split button
    .k-split-button {
        display: flex;
        flex-direction: column;

        .k-button {
            padding: @button-padding-y @button-padding-x;
        }

        .k-button ~ .k-button {
            margin: 0;
        }
    }

    // Separators
    .k-separator {
        display: none;
    }

    // Hidden items
    .k-overflow-hidden {
        display: none;
    }
}




// RTL
.k-rtl {
    .k-toolbar {
        > * {
            margin-right: 0;
            margin-left: @toolbar-spacing;
        }
        > :last-child {
            margin-left: 0;
        }
        .k-overflow-anchor {
            border-left-width: 0;
            border-right-width: @button-border-width;
            right: auto;
            left: 0;
        }
    }
    .k-overflow-container {
        .k-overflow-button {
            text-align: right;
        }
    }
}




// No flexbox
.k-no-flexbox .k-toolbar {
    display: block;

    &.k-toolbar-resizable {
        white-space: nowrap;
    }

    > * {
        display: inline-block;
        vertical-align: middle;
    }

    > .k-align-left {
        float: none;
    }

    > .k-align-right {
        float: right;
    }
}