devextreme/less/sources/widgets/material/textBox.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/textBox.material.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) "./textEditor.material.less";

.dx-searchbox {
    .dx-icon-search {
        .dx-icon(search);
        .dx-texteditor-icon();

        &:before {
            position: static;
            text-indent: 0;
            color: @textbox-search-icon-color;
        }

        color: @texteditor-placeholder-color;
    }

    &.dx-editor-underlined {
        .dx-icon-search {
            left: @MATERIAL_STANDARD_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;

            .dx-rtl&,
            .dx-rtl & {
                left: initial;
                right: @MATERIAL_STANDARD_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
            }
        }

        .dx-texteditor-input,
        .dx-placeholder:before {
            padding-left: @MATERIAL_TEXTEDITOR_ICON_CONTAINER_SIZE + @MATERIAL_STANDARD_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;

            .dx-rtl&,
            .dx-rtl & {
                padding-left: @MATERIAL_STANDARD_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
                padding-right: @MATERIAL_TEXTEDITOR_ICON_CONTAINER_SIZE + @MATERIAL_STANDARD_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
            }
        }
    }

    &.dx-editor-filled,
    &.dx-editor-outlined {
        .dx-icon-search {
            left: @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;

            .dx-rtl&,
            .dx-rtl & {
                left: initial;
                right: @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
            }
        }

        .dx-texteditor-input,
        .dx-placeholder:before {
            padding-left: @MATERIAL_TEXTEDITOR_ICON_CONTAINER_SIZE + @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;

            .dx-rtl&,
            .dx-rtl & {
                padding-left: @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
                padding-right: @MATERIAL_TEXTEDITOR_ICON_CONTAINER_SIZE + @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
            }
        }
    }
}

.dx-searchbar {
    padding-bottom: 5px;

    .dx-texteditor {
        margin: 0;
    }
}