devextreme/less/sources/widgets/common/htmlEditor.less

HTML5 JavaScript Component Suite for Responsive Web Development

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

@LIST_STYLE: decimal lower-alpha lower-roman;
@LIST_STYLE_WIDTH: 1.2em;
@LIST_STYLE_MARGIN: 0.3em;
@LIST_STYLE_OUTER_WIDTH: @LIST_STYLE_MARGIN + @LIST_STYLE_WIDTH;
@MAX_INDENT: 9;
@RESIZE_HANDLE_SIZE: 11px;
@TOUCH_RESIZE_HANDLE_SIZE: 15px;
@HALF_RESIZE_HANDLE_SIZE: @RESIZE_HANDLE_SIZE / 2;
@HALF_TOUCH_RESIZE_HANDLE_SIZE: @TOUCH_RESIZE_HANDLE_SIZE / 2;

@TRANSPARENT_BORDER: 1px solid transparent;

.add-counter-reset(@counter, @start: 1) when (@counter >= @start) {
    .add-counter-reset(@counter - 1, @start);

    counter-reset+_: ~"list-@{counter}";
}

.if-less-then-max-indent(@value) when (@value < @MAX_INDENT) {
    li.ql-indent-@{value} {
        .add-counter-reset(@MAX_INDENT, @value + 1);
    }
}

.add-indent-styles(@counter) when (@counter > 0) {
    .add-indent-styles(@counter - 1);

    .ql-indent-@{counter} {
        padding-left: 3 * @counter * 1em;

        .dx-rtl & {
            padding-left: 0;
            padding-right: 3 * @counter * 1em;
        }
    }

    li.ql-indent-@{counter} {
        padding-left: 3 * @counter + @LIST_STYLE_OUTER_WIDTH;

        .dx-rtl & {
            padding-left: 0;
            padding-right: 3 * @counter + @LIST_STYLE_OUTER_WIDTH;
        }
    }
}

.add-counter(@counter) when (@counter > 0) {
    .add-counter(@counter - 1);

    ol li.ql-indent-@{counter} {
        counter-increment: ~"list-@{counter}";

        &::before {
            content: counter(~"list-@{counter}", extract(@LIST_STYLE, mod(@counter, 3) + 1)) ". ";
        }
    }

    .if-less-then-max-indent(@counter);
}

.dx-htmleditor {
    display: flex;
    flex-direction: column;
    border: @TRANSPARENT_BORDER;
}

.dx-quill-container {
    box-sizing: border-box;
    display: flex;
    flex: 1;
    flex-basis: auto;
    min-height: 1px;
    margin: 0;
    position: relative;
    overflow: hidden;
}

.ql-clipboard { // stylelint-disable-line selector-class-pattern
    left: -100000px;
    height: 1px;
    overflow-y: hidden;
    position: absolute;
    top: 50%;

    p {
        margin: 0;
        padding: 0;
    }
}

.dx-htmleditor-content {
    box-sizing: border-box;
    line-height: 1.42;
    width: 100%;
    outline: none;
    overflow-y: auto;
    padding: 12px 15px;
    white-space: pre-wrap;
    word-wrap: break-word;

    .dx-variable {
        & > span {
            padding: 3px 6px;
            border-radius: 8px;
        }
    }

    > * {
        cursor: text;
    }

    p,
    ol,
    ul,
    pre,
    blockquote,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 0;
        padding: 0;
    }

    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    ol,
    ul {
        .add-counter-reset(@MAX_INDENT);
    }

    table {
        border-collapse: collapse;
    }

    td {
        border: 1px solid #000;
        padding: 2px 5px;
    }

    ol,
    ul {
        padding-left: 1.5em;

        .dx-rtl & {
            padding-left: 0;
            padding-right: 1.5em;
        }
    }

    li {
        list-style-type: none;
        padding-left: @LIST_STYLE_OUTER_WIDTH;
        position: relative;

        &::before {
            display: inline-block;
            margin-left: -1 * @LIST_STYLE_OUTER_WIDTH;
            margin-right: @LIST_STYLE_MARGIN;
            text-align: right;
            white-space: nowrap;
            width: @LIST_STYLE_WIDTH;
        }

        .dx-rtl & {
            padding-left: 0;
            padding-right: @LIST_STYLE_OUTER_WIDTH;

            &::before {
                margin-left: @LIST_STYLE_MARGIN;
                margin-right: -1 * @LIST_STYLE_OUTER_WIDTH;
                text-align: left;
            }
        }
    }

    ul > li::before {
        content: '\2022';
    }

    li {  // stylelint-disable-line no-duplicate-selectors
        .add-counter-reset(@MAX_INDENT);

        counter-increment: list-0;

        &::before {  // stylelint-disable-line no-duplicate-selectors
            content: counter(list-0, extract(@LIST_STYLE, 1)) ". ";
        }
    }

    .add-counter(@MAX_INDENT);
    .add-indent-styles(@MAX_INDENT);

    .dx-rtl & li { // stylelint-disable-line no-duplicate-selectors
        padding-right: @LIST_STYLE_OUTER_WIDTH;

        &::before { // stylelint-disable-line no-duplicate-selectors
            margin-left: @LIST_STYLE_MARGIN;
            margin-right: -1 * @LIST_STYLE_OUTER_WIDTH;
            text-align: left;
        }
    }

    table { // stylelint-disable-line no-duplicate-selectors
        table-layout: fixed;
        width: 100%;

        td {
            outline: none;
        }
    }

    // stylelint-disable selector-class-pattern
    .ql-code-block-container {
        font-family: monospace;
    }

    .ql-video {
        display: block;
        max-width: 100%;
    }

    .ql-video.ql-align-center {
        margin: 0 auto;
    }

    .ql-video.ql-align-right {
        margin: 0 0 0 auto;
    }

    .ql-font-serif {
        font-family: Georgia, Times New Roman, serif;
    }

    .ql-font-monospace {
        font-family: Monaco, Courier New, monospace;
    }

    .ql-direction-rtl {
        direction: rtl;
        text-align: inherit;
    }

    &.ql-blank::before {
        color: rgba(0, 0, 0, 0.6);
        content: attr(data-placeholder);
        font-style: italic;
        left: 15px;
        pointer-events: none;
        position: absolute;
        right: 15px;
    }
    // stylelint-enable selector-class-pattern

    pre {
        white-space: pre-wrap;
        background-color: rgba(191, 191, 191, 0.15);
    }

    blockquote {
        padding-left: 12px;
        border-left: 4px solid;

        .dx-rtl & {
            padding-left: 0;
            padding-right: 12px;
            border-left: none;
            border-right: 4px solid;
        }
    }
}

.dx-suggestion-list-wrapper {
    .dx-list {
        min-height: 35px;

        .dx-scrollable-content {
            margin: 0;
        }
    }
}

.dx-suggestion-list {
    min-width: 50px;

    .dx-list-item {
        display: block;
    }

    .dx-list-item-icon {
        border-radius: 50%;
        vertical-align: text-bottom;
    }
}

.dx-formdialog-form {
    min-width: 360px;
}

.dx-formdialog-field-target .dx-field-item-content {
    text-align: right;

    .dx-rtl & {
        text-align: left;
    }
}

.dx-htmleditor-toolbar-wrapper {
    padding: 5px;
}

.dx-color-format,
.dx-background-format {
    .dx-icon-color,
    .dx-icon-background {
        border-bottom: 3px solid transparent;
    }
}

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

.dx-htmleditor-toolbar-menu-separator {
    width: 100%;
    border-top: @TRANSPARENT_BORDER;

    &::before {
        content: none;
    }
}

.dx-resize-frame {
    position: absolute;
    box-sizing: content-box;
    border: 1px dashed lightslategrey;

    .dx-resizable-handle-corner-top-right,
    .dx-resizable-handle-corner-top-left,
    .dx-resizable-handle-corner-bottom-right,
    .dx-resizable-handle-corner-bottom-left {
        border: 1px solid white;
        width: @RESIZE_HANDLE_SIZE;
        height: @RESIZE_HANDLE_SIZE;
        border-radius: 0;

        .dx-touch-device& {
            width: @TOUCH_RESIZE_HANDLE_SIZE;
            height: @TOUCH_RESIZE_HANDLE_SIZE;
        }
    }

    .dx-resizable-handle-corner-top-right,
    .dx-resizable-handle-corner-bottom-right {
        right: -@HALF_RESIZE_HANDLE_SIZE;

        .dx-touch-device& {
            right: -@HALF_TOUCH_RESIZE_HANDLE_SIZE;
        }
    }

    .dx-resizable-handle-corner-top-left,
    .dx-resizable-handle-corner-bottom-left {
        left: -@HALF_RESIZE_HANDLE_SIZE;

        .dx-touch-device& {
            left: -@HALF_TOUCH_RESIZE_HANDLE_SIZE;
        }
    }

    .dx-resizable-handle-corner-top-right,
    .dx-resizable-handle-corner-top-left {
        top: -@HALF_RESIZE_HANDLE_SIZE;

        .dx-touch-device& {
            top: -@HALF_TOUCH_RESIZE_HANDLE_SIZE;
        }
    }

    .dx-resizable-handle-corner-bottom-right,
    .dx-resizable-handle-corner-bottom-left {
        bottom: -@HALF_RESIZE_HANDLE_SIZE;

        .dx-touch-device& {
            bottom: -@HALF_TOUCH_RESIZE_HANDLE_SIZE;
        }
    }

    .dx-resizable-handle-right,
    .dx-resizable-handle-left,
    .dx-resizable-handle-top,
    .dx-resizable-handle-bottom {
        &::after {
            content: "";
            position: absolute;
            width: @RESIZE_HANDLE_SIZE;
            height: @RESIZE_HANDLE_SIZE;
            border: 1px solid white;

            .dx-touch-device& {
                width: @TOUCH_RESIZE_HANDLE_SIZE;
                height: @TOUCH_RESIZE_HANDLE_SIZE;
            }
        }
    }

    .dx-resizable-handle-right,
    .dx-resizable-handle-left {
        &::after {
            top: calc(50% - @HALF_RESIZE_HANDLE_SIZE);

            .dx-touch-device& {
                top: calc(50% - @HALF_TOUCH_RESIZE_HANDLE_SIZE);
            }
        }
    }

    .dx-resizable-handle-top,
    .dx-resizable-handle-bottom {
        &::after {
            left: calc(50% - @HALF_RESIZE_HANDLE_SIZE);

            .dx-touch-device& {
                left: calc(50% - @HALF_TOUCH_RESIZE_HANDLE_SIZE);
            }
        }
    }

    .dx-resizable-handle-right::after {
        right: -@HALF_RESIZE_HANDLE_SIZE;

        .dx-touch-device& {
            right: -@HALF_TOUCH_RESIZE_HANDLE_SIZE;
        }
    }

    .dx-resizable-handle-left::after {
        left: -@HALF_RESIZE_HANDLE_SIZE;

        .dx-touch-device& {
            left: -@HALF_TOUCH_RESIZE_HANDLE_SIZE;
        }
    }

    .dx-resizable-handle-top::after {
        top: -@HALF_RESIZE_HANDLE_SIZE;

        .dx-touch-device& {
            top: -@HALF_TOUCH_RESIZE_HANDLE_SIZE;
        }
    }

    .dx-resizable-handle-bottom::after {
        bottom: -@HALF_RESIZE_HANDLE_SIZE;

        .dx-touch-device& {
            bottom: -@HALF_TOUCH_RESIZE_HANDLE_SIZE;
        }
    }
}

.dx-mention {
    padding: 1px 0;
    border-radius: 2px;

    .dx-template-wrapper {
        white-space: nowrap;
        display: inline-block;
    }

    & > span {
        margin: 0 2px;
    }
}