@progress/kendo-theme-fluent 5.7.0

package/scss/editor/_layout.scss

@@ -0,0 +1,688 @@
+@use "../core/" as *;
+@use "_variables.scss" as *;
+@use "../toolbar/_variables.scss" as *;
+@use "../button/_variables.scss" as *;
+@use "../input/_variables.scss" as *;
+@use "../window/_variables.scss" as *;
+
+@mixin kendo-editor--layout() {
+
+    // Base
+    .k-editor {
+        border-width: var( --kendo-editor-border-width, #{$kendo-editor-border-width} );
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: var( --kendo-editor-font-family, #{$kendo-editor-font-family} );
+        font-size: var( --kendo-editor-font-size, #{$kendo-editor-font-size} );
+        line-height: var( --kendo-editor-line-height, #{$kendo-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 {
+            opacity: .6;
+            fill: grayscale(.1);
+            > .k-content,
+            .k-editor-content {
+                pointer-events: auto;
+            }
+
+            .k-editor-content.k-focus {
+                outline-width: 1px;
+                outline-style: dashed;
+            }
+        }
+    }
+
+    // Inline editor
+    .k-editor-inline {
+        @include border-radius( $kendo-border-radius-md );
+        padding: $kendo-padding-y-sm $kendo-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: var( --kendo-editor-resize-handle-size, #{$kendo-editor-resize-handle-size} );
+        height: var( --kendo-editor-resize-handle-size, #{$kendo-editor-resize-handle-size} );
+        border-width: var( --kendo-editor-resize-handle-border-width, #{$kendo-editor-resize-handle-border-width} );
+        border-style: solid;
+        box-sizing: border-box;
+        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: var( --kendo-editor-selectednode-outline-width, #{$kendo-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-toolbar,
+    .k-editor > .k-toolbar {
+        border-width: 0 0 $kendo-toolbar-border-width 0;
+        flex-shrink: 0;
+    }
+
+
+    // jQuery toolbar
+    .k-editor-toolbar {
+        border-width: 0 0 $kendo-toolbar-border-width 0;
+
+        // Tool
+        .k-tool {
+            padding: $kendo-button-padding-y-md;
+            width: $kendo-button-calc-size;
+            height: $kendo-button-calc-size;
+        }
+        .k-tool-text {
+            display: none;
+        }
+
+        // Overflow tools
+        .k-overflow-tools {
+            margin: 0;
+            position: absolute;
+            inset-block-start: 0;
+            inset-inline-end: 0;
+            visibility: hidden;
+
+            .k-overflow-anchor {
+                position: relative;
+            }
+        }
+
+        .k-editor-export {
+            .k-icon {
+                margin-inline-end: var( --kendo-editor-export-tool-icon-margin-x, #{$kendo-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: $kendo-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: var( --kendo-editor-placeholder-text, #{$kendo-editor-placeholder-text} );
+                float: left;
+                opacity: var( --kendo-editor-placeholder-opacity, #{$kendo-editor-placeholder-opacity} );
+                cursor: text;
+                user-select: none;
+            }
+        }
+    }
+    td.k-editor-content {
+        padding-block: $kendo-input-padding-y-md;
+        width: 100%;
+        height: 100%;
+        border-width: 0;
+        outline: 0;
+
+        .k-resizable & {
+            padding: $kendo-input-padding-y-md $kendo-input-padding-y-md map-get( $kendo-spacing, 4 );
+        }
+    }
+
+    .k-edit-form-content {
+        flex: 1 1 auto;
+        overflow: auto;
+        margin: (-$kendo-window-inner-padding-y) (-$kendo-window-inner-padding-x);
+        padding: $kendo-window-inner-padding-y $kendo-window-inner-padding-x;
+    }
+
+    // Insert table
+    .k-ct-popup {
+        box-sizing: border-box;
+        width: calc( #{$ct-cell-size} * 10 - (#{$ct-cell-size} / 2) );
+        padding: calc( #{$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,
+        .k-i-caret-br {
+            display: none;
+        }
+    }
+
+
+    // 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;
+        }
+
+        .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;
+        }
+    }
+
+    .k-editor-dialog {
+        box-sizing: border-box;
+
+        .k-edit-form-container {
+            width: auto;
+        }
+
+        .k-edit-label {
+            width: 30%;
+            padding-block: calc( #{$kendo-padding-y} + #{$kendo-input-border-width} );
+        }
+
+        .k-edit-field {
+            width: 66%;
+        }
+    }
+
+    // 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;
+    }
+
+    .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-inline-start: map-get( $kendo-spacing, 4 );
+            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-block-start: map-get( $kendo-spacing, 4 );
+        }
+
+        .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-block-end: map-get( $kendo-spacing, 4 );
+            padding: $kendo-padding-y $kendo-padding-x;
+            border-top-width: 0;
+            overflow: auto;
+        }
+
+        .k-tile {
+            width: 33%;
+            height: 90px;
+            padding: $kendo-padding-y $kendo-padding-x;
+            box-sizing: border-box;
+            white-space: nowrap;
+            overflow: hidden;
+            cursor: pointer;
+            @include border-radius( $kendo-border-radius-md );
+
+            .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-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-inline-end: $kendo-padding-x-sm;
+        }
+
+        .k-breadcrumbs-wrap {
+            position: absolute;
+            inset-inline-start: $kendo-input-padding-x-md;
+            inset-block-start: $kendo-input-padding-y-md;
+
+            .k-icon {
+                position: static;
+                margin-block-start: 0;
+            }
+        }
+    }
+
+    .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-block-end: 0;
+            }
+        }
+
+        // Generic widgets
+        .k-numerictextbox {
+            width: 10em;
+
+            & + .k-dropdown-list {
+                width: 5em;
+            }
+
+            & + .k-color-picker,
+            & + .k-dropdown-list {
+                margin-inline-start: map-get( $kendo-spacing, 2 );
+            }
+        }
+
+        .k-color-picker {
+            vertical-align: middle;
+        }
+
+        .k-edit-field > .k-checkbox {
+            position: relative; // fix scrolling
+        }
+    }
+
+    .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: $kendo-padding-y-sm $kendo-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;
+            }
+        }
+    }
+
+}