_layout.scss

@include exports("editor/layout") {

    // Base
    .k-editor {
        border-width: $editor-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $editor-font-family;
        font-size: $editor-font-size;
        line-height: $editor-line-height;
        display: flex;
        flex-flow: column nowrap;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;
    }
    table.k-editor {
        width: 100%;
        display: table;
        vertical-align: top;
        table-layout: fixed;
        border-collapse: separate;
        border-spacing: 0;

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

    kendo-editor {
        .k-editor-content {
            z-index: 1;
        }

        &.k-readonly {
            @include disabled( $disabled-styling );
            > .k-content,
            .k-editor-content {
                pointer-events: auto;
            }

            .k-editor-content.k-state-focused {
                outline-width: 1px;
                outline-style: dashed;
            }
        }
    }

    // Inline editor
    .k-editor-inline {
        @include border-radius( $border-radius );
        padding: $padding-y-sm $padding-x-sm;
        border: 1px solid transparent;
        word-wrap: break-word;
        overflow: auto;
        background: none;
    }
    .k-window.k-editor-widget {
        padding: 0;
    }

    // Resizable editor
    .k-editor-resizable {
        resize: both;
        overflow: auto;
    }

    // Resizable images
    .k-editor-resize-handles-wrapper {
        position: absolute;
        visibility: hidden;
    }
    .k-editor-resize-handle {
        width: $editor-resize-handle-size;
        height: $editor-resize-handle-size;
        border-width: $editor-resize-handle-border-width;
        border-style: solid;
        position: absolute;
        visibility: visible;
        z-index: 100;

        &.northwest {
            top: 0;
            left: 0;
            transform: translate(-50%, -50%);
            cursor: nw-resize;
        }

        &.north {
            top: 0;
            left: 50%;
            transform: translate(-50%, -50%);
            cursor: n-resize;
        }

        &.northeast {
            top: 0;
            right: 0;
            transform: translate(50%, -50%);
            cursor: ne-resize;
        }

        &.southwest {
            left: 0;
            bottom: 0;
            transform: translate(-50%, 50%);
            cursor: sw-resize;
        }

        &.south {
            bottom: 0;
            left: 50%;
            transform: translate(-50%, 50%);
            cursor: s-resize;
        }

        &.southeast {
            right: 0;
            bottom: 0;
            transform: translate(50%, 50%);
            cursor: se-resize;
        }

        &.west {
            top: 50%;
            left: 0;
            transform: translate(-50%, -50%);
            cursor: w-resize;
        }

        &.east {
            top: 50%;
            right: 0;
            transform: translate(50%, -50%);
            cursor: e-resize;
        }
    }
    .ProseMirror-selectednode { // sass-lint:disable-line class-name-format
        outline-width: $editor-selectednode-outline-width;
        outline-style: solid;
    }
    .ProseMirror-hideselection { // sass-lint:disable-line class-name-format
        caret-color: transparent;

        *::selection,
        *::-moz-selection {
            background: transparent;
        }
    }

    // Toolbar
    .k-editor > .k-toolbar {
        border-width: 0 0 $toolbar-border-width 0;
        flex-shrink: 0;
    }


    // jQuery toolbar
    .k-editor-toolbar {
        border-width: 0 0 $toolbar-border-width 0;

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

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

        // Overflow tools
        .k-overflow-tools {
            margin: 0;
            position: absolute;
            top: 0;
            right: 0;
            visibility: hidden;
        }
        .k-overflow-anchor {
            border-width: 0;
            padding: $toolbar-padding-y;
            width: $toolbar-inner-calc-size;
            height: $toolbar-inner-calc-size;
            position: relative;
        }

        .k-editor-export {
            .k-icon {
                margin-right: $editor-export-tool-icon-margin-x;
            }

            .k-icon,
            .k-export-tool-text {
                vertical-align: middle;
            }
        }
    }


    // Editor content
    .k-editor-content {
        flex: 1 1 auto;
        overflow-y: auto;

        > .k-iframe {
            width: 100%;
            height: 100%;
            border-width: 0;
            display: block;
        }

        > .ProseMirror { // sass-lint:disable-line class-name-format
            padding: $padding-x;
            width: 100%;
            height: 100%;
            position: relative;
            box-sizing: border-box;
            outline: none;
            white-space: pre-wrap;
            overflow: auto;

            table {
                white-space: pre-wrap;
            }

            .k-placeholder::before {
                content: attr(data-placeholder);
                height: 0;
                color: $editor-placeholder-text;
                float: left;
                opacity: $editor-placeholder-opacity;
                cursor: text;
                user-select: none;
            }
        }
    }


    // Editable area
    .k-editable-area {
        padding: $input-padding-y;
        width: 100%;
        height: 100%;
        border-width: 0;
        outline: 0;

        iframe.k-content {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            border-width: 0;
            background: none;
            display: block;
        }

        .k-resizable & {
            padding: $input-padding-y $input-padding-y 16px;
        }
    }

    .k-edit-form-content {
        flex: 1 1 auto;
        overflow: auto;
        margin: (-$window-inner-padding-y) (-$window-inner-padding-x);
        padding: $window-inner-padding-y $window-inner-padding-x;
    }


    $ct-cell-size: 20px;

    // Insert table
    .k-ct-popup {
        box-sizing: border-box;
        width: $ct-cell-size * 10 - ($ct-cell-size / 2);
        padding: $ct-cell-size / 4;

        .k-button {
            width: 100%;
        }

        .k-ct-cell {
            margin: 1px;
            width: $ct-cell-size;
            height: $ct-cell-size;
            box-sizing: border-box;
            border: 1px solid;
            border-color: inherit;
            display: inline-block;
            vertical-align: top;
            overflow: hidden;
            opacity: .7;
            pointer-events: all;
        }
    }

    .k-editor .k-resize-handle {
        position: absolute;
        right: 0;
        bottom: 0;
        padding: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 13px 13px;
        border-color: transparent;
        border-bottom-color: inherit;
        cursor: se-resize;

        .k-i-arrow-45-down-right {
            display: none;
        }
    }

    .k-editor-widget .k-colorpicker {}

    .k-rtl .k-editor .k-editor-widget .k-dropdown-wrap {
        padding-left: 0;

        .k-select {
            border-width: 0;
        }
    }

    // Find and replace dialog
    .k-editor-find-replace {
        .k-content {
            position: relative;
        }

        .k-edit-form-container {
            display: inline-block;

            .k-edit-label {
                text-align: left;
            }
        }

        .k-actions {
            padding: 0;
        }

        .k-search-options {
            display: flex;
            flex-direction: column;
            padding: 10px 0 40px;

            > span {
                padding-bottom: $padding-y;
            }
        }

        .k-matches-container {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 0;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
    }
}

@include exports( "editor/dialog/layout" ) {


    .k-editor-dialog {
        box-sizing: border-box;

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

        .k-edit-label {
            width: 30%;
            padding: calc( #{$padding-y} + #{$input-border-width} ) 0;
        }

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

        .k-edit-buttons {}
    }

    // View HTML dialog using flex to fit child textarea
    .k-editor-dialog.k-viewhtml-dialog {
        display: flex;
        flex-direction: column;
    }

    // Text area in editor dialog
    .k-textarea.k-editor-textarea {
        width: 100%;
        height: 100%;
        resize: none;
    }

}




@include exports( "editor/filebrowser/layout" ) {


    .k-filebrowser-dialog {
        display: flex;

        .k-edit-form-container {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;

        }

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

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

    .k-filebrowser {
        max-width: 100%;

        // Breadcrumbs and search
        .k-floatwrap {
            display: flex;

            &::after { display: none; }
        }
        .k-breadcrumbs {
            flex: 1;
        }
        .k-search-wrap {
            margin: 0 0 0 $spacer-x;
            width: 150px;
            display: flex;
            align-items: center;

            .k-input {
                flex: 1;
                width: 100px; // fix width for Edge
            }
            .k-icon {
                margin: 0;
                position: static;
            }
        }

        // Filebrowser toolbar
        .k-filebrowser-toolbar {
            margin: $spacer-y 0 0 0;
        }

        .k-upload {
            padding: 0;
            border-width: 0;
            background: none;

            .k-upload-button {
                margin: 0;
            }

            .k-upload-status {
                display: none;
            }
        }

        .k-upload-files {
            display: none;
        }

        // Tiles
        .k-tiles {
            display: flex;
            flex-flow: row wrap;
            height: 390px;
            max-height: 50vh;
            margin: 0 0 $spacer-y 0;
            padding: $padding-y $padding-x;
            border-top-width: 0;
            overflow: auto;
        }

        .k-tile {
            width: 33%;
            height: 90px;
            padding: $padding-y $padding-x;
            box-sizing: border-box;
            white-space: nowrap;
            overflow: hidden;
            cursor: pointer;
            @include border-radius( $border-radius );

            .k-i-file,
            .k-i-folder {
                font-size: 4em;
            }

            input {
                width: 100px;
            }

            strong {
                display: block;
                font-weight: 400;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .k-tile-empty {
            display: block;
            margin: auto;

            &.k-state-selected {
                color: inherit;
                border-width: 0;
                background-image: none;
                background-color: transparent;
            }

            strong {
                opacity: .5;
                font-size: 3em;
                font-weight: 400;
            }
        }

        .k-thumb {
            float: left;
            margin-right: $padding-x-sm;
        }

        .k-breadcrumbs-wrap {
            position: absolute;
            left: $input-padding-x;
            top: $input-padding-y;

            .k-icon {
                position: static;
                margin-top: 0;
            }
        }
    }

}




@include exports( "editor/table-wizard/layout" ) {

    .k-editor-table-wizard-dialog {
        display: flex;

        // Edit form
        .k-edit-form-container {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
        }

        // Tabstrip wrapper
        .k-tabstrip-wrapper {
            display: flex;
            flex: 1 1 auto;
            overflow: auto;

            .k-tabstrip.k-root-tabs {
                flex: 1 1 auto;
                margin-bottom: 0;
            }
        }

        // Generic widgets
        .k-numerictextbox {
            width: 10em;

            & + .k-dropdown {
                width: 4em;
            }

            & + .k-colorpicker,
            & + .k-dropdown {
                margin-left: $padding-x-sm;
            }
        }

        .k-colorpicker {
            vertical-align: middle;
        }

        .k-edit-field > .k-checkbox {
            position: relative; // fix scrolling
        }

        // Align
        .k-dropdown.k-align {
            width: auto;
        }

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


    .k-popup.k-align {

        .k-list {
            display: flex;
            flex-flow: row wrap;
        }
        .k-list .k-item {
            padding: $button-padding-y;
            height: $button-calc-size;
            box-sizing: border-box;
            justify-content: center;
            flex: 1 0 33%;

            .k-icon {
                margin: 0;
            }
        }
        .k-list .k-item:last-child {
            flex: 1 0 100%;
        }

    }

    .k-editor-inline {

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

            &,
            & td {
                outline: 0;
                border-width: 1px;
                border-style: dotted;
            }

            td {
                min-width: 1px;
                padding: $padding-y-sm $padding-x-sm;
            }
        }

        .k-element-resize-handle-wrapper {
            position: absolute;
            width: 5px;
            height: 5px;
            border-width: 1px;
            border-style: solid;
            z-index: 100;

            .k-element-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-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;
                    display: none;
                    opacity: .8;
                }
            }
        }

        .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;
                opacity: .8;
            }
        }
    }

}