devextreme/less/sources/widgets/material/textEditor.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/textEditor.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) "./validation.material.less";
@import (once) "./button.material.less";

.dx-size-default() {
    @MATERIAL_TEXTEDITOR_FONT_SIZE: 16px;
    @MATERIAL_TEXTEDITOR_CLEAR_ICON_SIZE: 12px;
    @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING: 12px;
    @MATERIAL_FILLED_TEXTEDITOR_INPUT_PADDING: 19px @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING 18px;
    @MATERIAL_STANDARD_TEXTEDITOR_INPUT_PADDING: 7px @MATERIAL_STANDARD_TEXTEDITOR_INPUT_HORIZONTAL_PADDING 6px;
    @MATERIAL_UNDERLINED_EDITOR_BUTTON_HEIGHT: 28px;
}
.dx-size-compact() {
    @MATERIAL_TEXTEDITOR_FONT_SIZE: 13px;
    @MATERIAL_TEXTEDITOR_CLEAR_ICON_SIZE: 10px;
    @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING: 8px;
    @MATERIAL_FILLED_TEXTEDITOR_INPUT_PADDING: 13px @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING 12px;
    @MATERIAL_STANDARD_TEXTEDITOR_INPUT_PADDING: 6px @MATERIAL_STANDARD_TEXTEDITOR_INPUT_HORIZONTAL_PADDING 5px;
    @MATERIAL_UNDERLINED_EDITOR_BUTTON_HEIGHT: 22px;
}

@MATERIAL_STANDARD_TEXTEDITOR_INPUT_HORIZONTAL_PADDING: 0;
@MATERIAL_TEXTEDITOR_ICON_CONTAINER_SIZE: @MATERIAL_BASE_ICON_SIZE - 2px;
@MATERIAL_TEXTEDITOR_INVALID_BADGE_SIZE: @MATERIAL_INVALID_BADGE_SIZE + 2 * @MATERIAL_INVALID_BADGE_HORIZONTAL_PADDING;
@MATERIAL_EDITOR_CUSTOM_BUTTON_MARGIN: 5px;


.dx-texteditor-icon() {
    position: absolute;
    top: 50%;
    margin-top: -@MATERIAL_TEXTEDITOR_ICON_CONTAINER_SIZE / 2;
    .dx-icon-sizing(@MATERIAL_TEXTEDITOR_ICON_CONTAINER_SIZE);
}

.texteditor-input-padding-underlined() {
    .dx-texteditor-input {
        padding-right: @MATERIAL_TEXTEDITOR_INVALID_BADGE_SIZE + @MATERIAL_STANDARD_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
    }

    &.dx-rtl .dx-texteditor-input {
        padding: @MATERIAL_STANDARD_TEXTEDITOR_INPUT_PADDING;
        padding-left: @MATERIAL_TEXTEDITOR_INVALID_BADGE_SIZE + @MATERIAL_STANDARD_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
    }
}

.texteditor-input-padding-filled() {
    .dx-texteditor-input {
        padding-right: @MATERIAL_TEXTEDITOR_INVALID_BADGE_SIZE + @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
    }

    &.dx-rtl .dx-texteditor-input {
        padding: @MATERIAL_FILLED_TEXTEDITOR_INPUT_PADDING;
        padding-left: @MATERIAL_TEXTEDITOR_INVALID_BADGE_SIZE + @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
    }
}

.texteditor-validation-icon-offset() {
    right: @MATERIAL_INVALID_BADGE_HALFHORIZONTAL_PADDING;

    .dx-rtl&,
    .dx-rtl & {
        left: @MATERIAL_INVALID_BADGE_HALFHORIZONTAL_PADDING;
        right: auto;
    }
}

.texteditor-validation-icon-offset-filled() {
    right: @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING + 1px;

    .dx-rtl&,
    .dx-rtl & {
        left: @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING + 1px;
        right: auto;
    }
}

.validation-icon-position() {
    &.dx-invalid,
    &.dx-valid {
        &.dx-editor-underlined {
            .texteditor-input-padding-underlined();
        }

        &.dx-editor-filled,
        &.dx-editor-outlined {
            .texteditor-input-padding-filled();

            .dx-texteditor-input-container {
                &:after {
                    .texteditor-validation-icon-offset-filled();
                }
            }
        }

        .dx-texteditor-input-container {
            &:after {
                .texteditor-validation-icon-offset();
            }
        }
    }
}

.pending-indicator-position() {
    &.dx-validation-pending {
        &.dx-editor-underlined {
            .texteditor-input-padding-underlined();
        }

        &.dx-editor-filled,
        &.dx-editor-outlined {
            .texteditor-input-padding-filled();

            .dx-texteditor-input-container {
                .dx-pending-indicator {
                    .texteditor-validation-icon-offset-filled();
                }
            }
        }

        .dx-texteditor-input-container {
            .dx-pending-indicator {
                .texteditor-validation-icon-offset();
            }
        }
    }
}

.dx-texteditor {
    border-top-left-radius: @texteditor-input-border-radius;
    border-top-right-radius: @texteditor-input-border-radius;
    position: relative;

    .dx-texteditor-borders-position() {
        left: 0;
        right: 0;
        bottom: 0;
        height: 0;
        width: 100%;
        content: '';
        position: absolute;
    }

    &:before {
        .dx-texteditor-borders-position();

        z-index: 2;
        transform: scale(0);
    }

    &:after {
        .dx-texteditor-borders-position();
    }

    &.dx-state-focused,
    &.dx-state-active {
        background-color: @texteditor-focused-bg;

        &:before {
            border-bottom: 2px solid @texteditor-focused-border-color;
            transform: scale(1);
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.02, 1);
        }
    }

    .validation-icon-position();

    .pending-indicator-position();

    &.dx-editor-filled,
    &.dx-editor-outlined {
        .dx-texteditor-buttons-container {
            right: @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
        }

        &.dx-show-clear-button {
            .dx-texteditor-input {
                padding-right: @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;

                .dx-rtl&,
                .dx-rtl & {
                    padding: @MATERIAL_FILLED_TEXTEDITOR_INPUT_PADDING;
                    padding-left: @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
                }
            }
        }

        .dx-placeholder {
            &:before {
                padding: @MATERIAL_FILLED_TEXTEDITOR_INPUT_PADDING;
            }
        }

        .dx-texteditor-input {
            padding: @MATERIAL_FILLED_TEXTEDITOR_INPUT_PADDING;
        }

        .dx-rtl &,
        &.dx-rtl {
            .dx-texteditor-buttons-container {
                left: @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
                right: auto;
            }
        }
    }

    &.dx-editor-filled {
        background-color: @texteditor-bg;

        &.dx-state-hover {
            background-color: @texteditor-hover-bg;

            &:after {
                border-bottom: 1px solid @texteditor-hover-border-color;
            }
        }

        &.dx-state-disabled,
        &.dx-state-readonly,
        &.dx-state-readonly.dx-state-hover {
            background-color: fade(@texteditor-bg, 12%);

            .dx-texteditor-input {
                color: fade(@texteditor-color, 50%);
            }
        }
    }

    &.dx-editor-underlined {
        background-color: transparent;

        .dx-texteditor-buttons-container {
            right: @MATERIAL_STANDARD_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
        }

        &:after {
            border-bottom: 1px solid @texteditor-border-color;
        }

        &.dx-state-hover {
            &:after {
                border-bottom: 2px solid @texteditor-hover-border-color;
            }
        }

        .dx-placeholder {
            &:before {
                padding: @MATERIAL_STANDARD_TEXTEDITOR_INPUT_PADDING;
            }
        }

        .dx-texteditor-input {
            padding: @MATERIAL_STANDARD_TEXTEDITOR_INPUT_PADDING;
        }

        .dx-rtl &,
        &.dx-rtl {
            .dx-texteditor-buttons-container {
                left: @MATERIAL_STANDARD_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
                right: auto;
            }
        }

        &.dx-state-disabled,
        &.dx-state-readonly,
        &.dx-state-readonly.dx-state-hover {
            &:after {
                border-bottom-style: dotted;
                border-bottom-width: 1px;
            }
        }

        &.dx-invalid {
            &:after {
                border-bottom-color: @texteditor-invalid-faded-border-color;
            }
        }
    }

    &.dx-editor-outlined {
        background-color: transparent;
        border-radius: @texteditor-input-border-radius;
        box-shadow: inset 0 0 0 1px @texteditor-border-color;

        &:before {
            display: none;
        }

        &.dx-state-hover {
            box-shadow: inset 0 0 0 1px @texteditor-hover-border-color;
        }

        &.dx-state-disabled,
        &.dx-state-readonly,
        &.dx-state-readonly.dx-state-hover {
            box-shadow: inset 0 0 0 1px fade(@texteditor-color, 50%);

            .dx-texteditor-input {
                color: fade(@texteditor-color, 50%);
            }
        }

        &.dx-state-focused {
            box-shadow: inset 0 0 0 2px @texteditor-focused-border-color;

            &.dx-invalid {
                box-shadow: inset 0 0 0 2px @texteditor-invalid-focused-border-color;
            }
        }

        &.dx-invalid {
            box-shadow: inset 0 0 0 1px @texteditor-invalid-faded-border-color;
        }
    }
}

.dx-show-clear-button {
    .dx-clear-button-area {
        width: @MATERIAL_TEXTEDITOR_ICON_CONTAINER_SIZE;
        min-width: @MATERIAL_TEXTEDITOR_ICON_CONTAINER_SIZE;
        right: 0;
    }

    .dx-icon-clear {
        color: @texteditor-button-clear-icon-color;
        background-color: @texteditor-button-clear-icon-color-bg;
        border-radius: 50%;
        .dx-texteditor-icon();
        .dx-icon-font-centered-sizing(@MATERIAL_TEXTEDITOR_CLEAR_ICON_SIZE);
    }

    &:not(.dx-texteditor-empty) {
        .validation-icon-position();

        .pending-indicator-position();
    }
}
.dx-placeholder {
    color: @texteditor-placeholder-color;
    font-size: @MATERIAL_TEXTEDITOR_FONT_SIZE;
}

.dx-texteditor-input {
    margin: 0;
    background-color: transparent;
    color: @texteditor-color;
    font-size: @MATERIAL_TEXTEDITOR_FONT_SIZE;
}

.dx-invalid.dx-texteditor {
    &.dx-state-hover {
        &:after {
            border-bottom-color: @texteditor-invalid-faded-border-color;
        }
    }

    &.dx-state-focused,
    &.dx-state-active {
        &:before {
            border-top: 1px solid @texteditor-invalid-focused-border-color;
            border-bottom: 1px solid @texteditor-invalid-focused-border-color;
        }
    }

    &.dx-show-invalid-badge .dx-texteditor-input-container {
        &:after {
            .dx-invalid-material-badge();
        }
    }
}

.dx-editor-outlined,
.dx-editor-filled {
    .dx-texteditor-buttons-container {
        > .dx-button {
            margin-left: @MATERIAL_EDITOR_CUSTOM_BUTTON_MARGIN;
            margin-right: @MATERIAL_EDITOR_CUSTOM_BUTTON_MARGIN;
        }

        &:first-child {
            > .dx-button {
                &:first-child {
                    margin-left: @MATERIAL_EDITOR_CUSTOM_BUTTON_MARGIN * 2;
                }

                &:last-child {
                    margin-right: 0;
                }
            }
        }

        &:last-child {
            > .dx-button {
                &:first-child {
                    margin-left: 0;
                }

                &:last-child {
                    margin-right: @MATERIAL_EDITOR_CUSTOM_BUTTON_MARGIN * 2;
                }
            }

            > .dx-dropdowneditor-button:last-child {
                margin-right: @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
            }

            > .dx-clear-button-area:last-child,
            > .dx-numberbox-spin-container:last-child {
                margin-right: 8px;
            }
        }

        .dx-rtl& {
            &:first-child {
                > .dx-button {
                    &:first-child {
                        margin-left: @MATERIAL_EDITOR_CUSTOM_BUTTON_MARGIN;
                        margin-right: @MATERIAL_EDITOR_CUSTOM_BUTTON_MARGIN * 2;
                    }

                    &:last-child {
                        margin-left: 0;
                        margin-right: @MATERIAL_EDITOR_CUSTOM_BUTTON_MARGIN;
                    }

                    &:first-child:last-child {
                        margin-left: 0;
                        margin-right: @MATERIAL_EDITOR_CUSTOM_BUTTON_MARGIN * 2;
                    }
                }
            }

            &:last-child {
                > .dx-button {
                    &:first-child {
                        margin-left: @MATERIAL_EDITOR_CUSTOM_BUTTON_MARGIN;
                        margin-right: 0;
                    }

                    &:last-child {
                        margin-left: @MATERIAL_EDITOR_CUSTOM_BUTTON_MARGIN * 2;
                        margin-right: @MATERIAL_EDITOR_CUSTOM_BUTTON_MARGIN;
                    }
                }

                > .dx-dropdowneditor-button:last-child {
                    margin-left: @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
                    margin-right: 0;
                }

                > .dx-clear-button-area:last-child,
                > .dx-numberbox-spin-container:last-child {
                    margin-left: 8px;
                    margin-right: 0;
                }
            }
        }
    }
}

.dx-editor-underlined {
    .dx-texteditor-buttons-container {
        > .dx-button.dx-button-mode-text {
            height: @MATERIAL_UNDERLINED_EDITOR_BUTTON_HEIGHT;
            margin: 1px @MATERIAL_EDITOR_CUSTOM_BUTTON_MARGIN 3px;

            .dx-button-content {
                display: flex;
                justify-content: center;
                padding-top: @MATERIAL_BUTTON_VERTICAL_PADDING - 1px;

                .dx-icon {
                    align-self: center;
                    margin-top: 1px;
                }
            }

            &.dx-button-has-text {
                .dx-button-content .dx-icon {
                    margin-top: 3px;
                }
            }

            &:not(.dx-button-has-text) {
                min-width: @MATERIAL_UNDERLINED_EDITOR_BUTTON_HEIGHT;

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

        &:first-child {
            > .dx-button {
                &:first-child {
                    margin-left: 0;
                }
            }
        }

        &:last-child {
            > .dx-button {
                &:last-child {
                    margin-right: 0;
                }
            }
        }

        .dx-rtl& {
            &:first-child {
                > .dx-button {
                    &:first-child {
                        margin-left: @MATERIAL_EDITOR_CUSTOM_BUTTON_MARGIN;
                        margin-right: 0;
                    }
                }
            }

            &:last-child {
                > .dx-button {
                    &:first-child {
                        margin-left: @MATERIAL_EDITOR_CUSTOM_BUTTON_MARGIN;
                        margin-right: @MATERIAL_EDITOR_CUSTOM_BUTTON_MARGIN;
                    }

                    &:last-child {
                        margin-left: 0;
                        margin-right: @MATERIAL_EDITOR_CUSTOM_BUTTON_MARGIN;
                    }
                }
            }
        }
    }
}

.dx-valid.dx-texteditor {
    .dx-texteditor-input-container {
        &:after {
            .dx-valid-material-badge();
        }
    }
}

.dx-validation-pending.dx-texteditor {
    .dx-texteditor-input-container {
        .dx-pending-indicator {
            .dx-pending-indicator-material();
        }
    }
}

.dx-rtl {
    .dx-placeholder,
    .dx-placeholder:before {
        right: 0;
        left: auto;
    }
}