@progress/kendo-theme-classic 4.41.2-dev.2 → 5.0.0-next.2

package/modules/@progress/kendo-theme-default/scss/editor/_layout.scss

@@ -1,683 +0,0 @@
-@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;
-    }
-
-
-    // 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%;
-            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 0;
-
-            > 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-direction: row;
-            flex-wrap: 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;
-            }
-        }
-    }
-
-}