devextreme/less/sources/widgets/material/htmlEditor.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/htmlEditor.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) "./popup.material.less";
@import (once) "./list.material.less";
@import (once) "./toolbar.material.less";
@import (once) "./selectBox.material.less";
@import (once) "./colorBox.material.less";
@import (once) "./form.material.less";

.dx-htmleditor {
    .dx-htmleditor-toolbar-wrapper:first-child {
        border-bottom: 1px solid @htmleditor-toolbar-border-color;
    }

    border-color: @htmleditor-border-color;

    &.dx-invalid {
        border-color: @htmleditor-invalid-faded-border-color;

        &.dx-state-focused {
            border-color: @htmleditor-invalid-border-color;
        }
    }
}

.dx-htmleditor-content {
    &.ql-blank::before { // stylelint-disable-line selector-class-pattern
        color: @texteditor-placeholder-color;
    }

    pre {
        color: fade(@base-text-color, 80%);
    }

    blockquote {
        color: fade(@base-text-color, 80%);
        border-left-color: @htmleditor-toolbar-border-color;

        .dx-rtl & {
            border-right-color: @htmleditor-toolbar-border-color;
        }
    }

    .dx-variable {
        & > span {
            background: @htmleditor-variable-bg;
        }
    }
}

.dx-htmleditor-toolbar {
    background-color: transparent;

    .dx-format-active:not(.dx-color-format):not(.dx-background-format) {
        background-color: @htmleditor-normal-format-active-bg;

        &.dx-button-success {
            background-color: @htmleditor-success-format-active-bg;
        }

        &.dx-button-default {
            background-color: @htmleditor-default-format-active-bg;
        }

        &.dx-button-danger {
            background-color: @htmleditor-danger-format-active-bg;
        }
    }
}

.dx-htmleditor-toolbar-format {
    &.dx-dropdowneditor.dx-editor-filled {
        background-color: transparent;
    }

    &.dx-color-format,
    &.dx-background-format {
        .dx-button-content {
            padding-bottom: @MATERIAL_BUTTON_VERTICAL_PADDING - 3px;
        }
    }
}

.dx-htmleditor-toolbar-separator {
    height: 50%;
    border-left-color: @htmleditor-toolbar-border-color;

    .dx-toolbar-multiline & {
        height: @MATERIAL_TOOLBAR_HEIGHT / 2;
    }
}

.dx-htmleditor-toolbar-menu-separator {
    border-top-color: @htmleditor-toolbar-border-color;
}

.dx-resize-frame {
    border-color: @htmleditor-resize-frame-border-color;

    .dx-resizable-handle-corner-top-right,
    .dx-resizable-handle-corner-top-left,
    .dx-resizable-handle-corner-bottom-right,
    .dx-resizable-handle-corner-bottom-left {
        background-color: @htmleditor-resize-handle-bg;
    }

    .dx-resizable-handle-top,
    .dx-resizable-handle-left,
    .dx-resizable-handle-right,
    .dx-resizable-handle-bottom {
        &::after {
            background-color: @htmleditor-resize-handle-bg;
        }
    }
}

.dx-mention {
    background-color: @htmleditor-mention-bg;
}

.dx-suggestion-list-wrapper {
    .dx-dropdownlist-list-appearance();
}