@progress/kendo-ui/css/web/common/editor.less

This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.

/*!
 * Copyright 2020 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
// Editor
.k-editor {
    border-style: solid;
    border-width: 1px;
    font-size: 100%;
    vertical-align: top;
    position: relative;

    > .k-content,
    iframe.k-content,
    .k-editor-content {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        border: 0;
        box-sizing: border-box;
        background: none;
        display: block;
    }
}
table.k-editor {
    width: 100%;
    height: 250px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;

    tbody,
    tr,
    td {
        border-color: inherit;
    }

    .k-editable-area {
        color: black;
        background: white;
    }
}


// Editor inline
.k-editor-inline {
    padding: .3em .5em;
    background: none;
    word-wrap: break-word;
    overflow: auto;
    position: relative;

    &.k-editor {
        border: 1px solid transparent;
    }
}

.k-window.k-editor-widget {
    min-height: 0;
}
.editorToolbarWindow  {
    padding: @toolbar-padding-y @toolbar-padding-x;
    font-size: 14px;
    display: flex;
    align-content: flex-start;

    .k-editor-toolbar {
        padding: 0;
        border-width: 0;
        background: none;
    }
}
.k-editortoolbar-dragHandle {
    margin: 0 @toolbar-spacing 0 0;
    padding: 0;
    position: relative;
    cursor: move;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}


// Editor toolbar
.k-editor-toolbar {
    border-width: 0 0 @toolbar-border-width 0;
    border-color: inherit;

    // Group
    .k-tool-group {
        .k-widget ~ .k-widget {
            margin-inline-start: @toolbar-spacing;
        }
    }

    // Tool
    .k-tool-group > .k-tool {
        padding: @button-padding-y;
        width: @button-calc-size;
        height: @button-calc-size;
    }
    .k-tool-text {
        display: none;
    }

    // Editor widgets
    // .k-editor-widget { width: auto; }

    // default tool widths
    // .k-fontName { width: 110px; }
    // .k-fontSize { width: 124px; }
    // .k-formatBlock { width: 147px; }

    // Overflow tools
    .k-overflow-tools {
        margin: 0;
        border-color: inherit;
        visibility: hidden;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
    }
    .k-overflow-anchor {
        position: relative;
    }

    // Break
    .k-break,
    .k-row-break {
        display: block;
        height: 1px;
        font-size: 0;
        line-height: 0;
    }
}


// Editable area
.k-editable-area {
    width: 100%;
    height: 100%;
    outline: 0;

    .k-resizable & {
        padding-bottom: 16px;
    }
}

.k-editor .k-raw-content,
.k-editor-dialog .k-editor-textarea {
    font-size: inherit;
    font-family: consolas, "courier new", monospace;
}

.k-editor-dialog
{
    padding: 1em;
    width: 400px;

    .k-edit-label
    {
        width: 25%;
    }

    .k-edit-field
    {
        width: 66%;

        .k-textbox
        {
            width: 96%;
        }
    }
}

.k-filebrowser-dialog
{
    width: auto;
    min-width: 350px;

    .k-filebrowser
    {
        margin: 0 1em 0;
    }

    .k-edit-label
    {
        width: 18%;
    }

    .k-edit-field
    {
        width: 75%;

        .k-textbox
        {
            width: 70%;
        }
    }
}

#k-editor-image-width,
#k-editor-image-height
{
    width: 5em;
}

.k-editor-dialog .k-button
{
    display: inline-block;
}

.k-button-wrapper .k-link:hover {
    text-decoration: underline;
}

@editor-createTable-cellSize: 18px;

.k-ct-popup {
    width: (8.2 * (@editor-createTable-cellSize + 4));
    padding: .65em .5em .5em;

    .k-button {
        width: 100%;
    }
}

.k-ct-popup .k-status {
    margin: .3em 0;
}

.k-ct-popup .k-ct-cell {
    border-width: 1px;
    border-style: solid;
    width: @editor-createTable-cellSize;
    height: @editor-createTable-cellSize;
    margin: 1px;
    vertical-align: top;
    display: inline-block;
    overflow: hidden;
    pointer-events: all;
    .disable-high-contrast();
}

.k-editor .k-resize-handle {
    padding: 0;
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: se-resize;
}
.k-editor .k-resize-handle .k-icon {
    vertical-align: bottom;
}

.k-editor .k-overlay {
    position: absolute;
    background-color: #fff;
    opacity: 0;
}

.k-editor-inline .k-table-resize-handle-wrapper {
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: #fff;
    border: 1px solid #000;
    z-index: 100;

    .k-table-resize-handle {
        width: 100%;
        height: 100%;

        &.k-resize-east {
            cursor: e-resize;
        }

        &.k-resize-north {
            cursor: n-resize;
        }

        &.k-resize-northeast {
            cursor: ne-resize;
        }

        &.k-resize-northwest {
            cursor: nw-resize;
        }

        &.k-resize-south {
            cursor: s-resize;
        }

        &.k-resize-southeast {
            cursor: se-resize;
        }

        &.k-resize-southwest {
            cursor: sw-resize;
        }

        &.k-resize-west {
            cursor: w-resize;
        }
    }
}

.k-editor-inline .k-column-resize-handle-wrapper {
    position: absolute;
    height: 10px;
    width: 10px;
    cursor: col-resize;
    z-index: 2;

    .k-column-resize-handle {
        width: 100%;
        height: 100%;

        .k-column-resize-marker {
            width: 2px;
            height: 100%;
            margin: 0 auto;
            background-color: #00b0ff;
            display: none;
            opacity: 0.8;
        }
    }
}

.k-editor-inline .k-table {
    width: 100%;
    border-spacing: 0;
    margin: 0 0 1em;

    &,
    & td {
        outline: 0;
        border: 1px dotted #ccc;
    }

    td {
        min-width: 1px;
        padding: .2em .3em;
    }
}

.k-table.k-table-resizing {
    opacity: 0.6;
}

.k-editor-inline .k-row-resize-handle-wrapper {
    position: absolute;
    z-index: 2;
    cursor: row-resize;
    width: 10px;
    height: 10px;

    .k-row-resize-handle {
        display: table;
        width: 100%;
        height: 100%;
    }

    .k-row-resize-marker-wrapper {
        display: table-cell;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        vertical-align: middle;
    }

    .k-row-resize-marker {
        display: none;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 2px;
        background-color: #00b0ff;
        opacity: 0.8;
    }
}


.k-viewhtml-dialog {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;

    .k-editor-textarea {
        margin: 1em;
        padding: @input-padding-y @input-padding-y;
        // width: 100%;
        height: 100%;
        border-width: 1px;
        border-style: solid;
        box-sizing: border-box;
        font: inherit;
        font-family: consolas, monospace;
        flex-grow: 1;
        overflow: auto;
        resize: none;
    }

    .k-edit-buttons {
        text-align: right;
        border-width: 1px 0 0;
        border-style: solid;
        position: relative;
        bottom: -1em;
        padding: .6em;

        .k-button {
            margin-right: 0.5em;
        }
    }
}

//TableWizard dialog styles
.k-editor-dialog.k-editor-table-wizard-dialog.k-window-content {
    overflow: hidden;
    min-width: 325px;
    width: 24em;
    padding: 1em 0;
}

.k-editor-dialog .k-edit-form-container {
    width: auto;
}

.k-editor-dialog .k-tabstrip {
    margin: -1.333em 0 0;
}

.k-editor-dialog .k-root-tabs {
    margin: -1em -1em -1.5em;
    padding: 0.5em 1em 0;
    border-width: 0;
}

.k-editor-dialog ul.k-tabstrip-items {
    padding: 0.5em 1em 0;
    border-width: 0 0 1px;
    border-style: solid;
}

.k-editor-dialog ul.k-tabstrip-items .k-loading {
    border-top-width: 0;
}

.k-editor-dialog .k-tabstrip:focus {
    box-shadow: none;
}

.k-editor-dialog.k-editor-table-wizard-dialog .k-tabstrip-wrapper .k-content {
    overflow: hidden;
    min-height: 440px;
    height: 35em;
    margin: 0;
    padding: 1em 0.5em 0;
    border-width: 0;
}

.k-editor-dialog .k-edit-field .k-numerictextbox {
    width: 10.6em;
    margin: 0 .35714285em 0 0;
}

.k-editor-dialog.k-editor-table-wizard-dialog .k-edit-field .k-numerictextbox + .k-dropdown {
    width: 4em;
}

.k-editor-dialog.k-editor-table-wizard-dialog .k-edit-field .k-textbox,
.k-editor-dialog.k-editor-table-wizard-dialog .k-edit-field .k-dropdown {
    width: 15em;
}

.k-editor-table-wizard-dialog .k-numerictextbox + .k-dropdown {
    width: 5.35714285em;
}

.k-editor-dialog textarea.k-textbox {
    height: 14.28571428em;
}

.k-editor-dialog textarea.k-textbox.k-editor-accessibility-summary {
    height: auto;
}

.k-editor-dialog.k-editor-table-wizard-dialog .k-dropdown.k-align {
    width: 4em;
}

.k-popup.k-list-container.k-align {
    padding: 0;
    text-align: center;
}

.k-align-group {
    vertical-align: text-top;
}

.k-popup.k-align .k-list .k-item {
    display: inline-block;
    width: 2.57142857em;
    height: 2.57142857em;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}

.k-popup.k-align .k-list .k-icon {
    vertical-align: bottom;
    vertical-align: -webkit-baseline-middle;
}

.k-popup.k-align .k-list .k-item:last-child {
    width: auto;
    display: block;
    border-width: 1px 0 0;
    border-style: solid;
}

.k-popup.k-align .k-list .k-item:before {
    width: 2.57142857em;
    height: 2.57142857em;
    line-height: 2.57142857em;
}

.k-editor-dialog.k-editor-table-wizard-dialog .k-edit-buttons {
    padding: 1em 0.8em;
    margin: 0.5em 0 0;
}

// End - TableWizard dialog styles