devextreme/less/sources/widgets/generic/htmlEditor.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

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

@GENERIC_HTML_EDITOR_TOOLBAR_HEIGHT: @GENERIC_BASE_INLINE_WIDGET_HEIGHT;
@GENERIC_MOBILE_HTML_EDITOR_TOOLBAR_HEIGHT: @GENERIC_MOBILE_BASE_INLINE_WIDGET_SIZE;

.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-separator {
        height: @GENERIC_HTML_EDITOR_TOOLBAR_HEIGHT;

        .dx-device-mobile & {
            height: @GENERIC_MOBILE_HTML_EDITOR_TOOLBAR_HEIGHT;
        }
    }
}

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

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

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

.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;
    color: @htmleditor-mention-color;
}

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