@progress/kendo-theme-default 6.8.0-dev.1 → 6.8.0-dev.2

package/dist/all.scss

@@ -3916,6 +3916,7 @@ $kendo-components: (
     "panelbar",
     "splitter",
     "tile-layout",
+    "dock-manager",
 
     // Data management
     "grid",
@@ -4088,6 +4089,11 @@ $_kendo-dependencies: (
         "treeview"
     ),
     dropzone: (),
+    dock-manager: (
+        "splitter",
+        "toolbar",
+        "tabstrip"
+    ),
     editor: (
         "button",
         "checkbox",
@@ -42026,6 +42032,7 @@ $kendo-splitbar-selected-text: $kendo-selected-text !default;
         // Pane
         .k-pane {
             overflow: hidden;
+            box-sizing: border-box;
         }
         .k-scrollable {
             overflow: auto;
@@ -42438,6 +42445,455 @@ $kendo-tile-layout-hint-bg: rgba(255, 255, 255, .2) !default;
     @include kendo-tile-layout--styles();
 }
 
+// #endregion
+// #region @import "./dock-manager/_index.scss"; -> scss/dock-manager/_index.scss
+// #region @import "../core/_index.scss"; -> scss/core/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+// Module meta
+$_kendo-module-meta: (
+    name: "dock-manager",
+    dependencies: (
+        "splitter",
+        "toolbar",
+        "tabstrip"
+    )
+);
+
+// Dependencies
+// #region @import "../splitter/_index.scss"; -> scss/splitter/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../toolbar/_index.scss"; -> scss/toolbar/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../tabstrip/_index.scss"; -> scss/tabstrip/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+// Component
+// #region @import "./_variables.scss"; -> scss/dock-manager/_variables.scss
+///  The width of the border around the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-border-width: 1px !default;
+/// The style of the border around the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-border-style: solid !default;
+/// The color of the border around the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-border: $kendo-base-border !default;
+
+/// The vertical padding of the pane header in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-header-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+/// The horizontal padding of the pane header in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-header-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+/// The width of the border around the pane header in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-header-border-width: $kendo-dock-manager-border-width !default;
+///  The style of the border around the pane header in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-header-border-style: solid !default;
+/// The background color of the pane header in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-header-bg: $kendo-component-header-bg !default;
+
+/// The vertical padding of the pane title in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-title-padding-y: null !default;
+/// The horizontal padding of the pane title in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-title-padding-x: null !default;
+/// The font family of the pane title in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-title-font-family: $kendo-font-family !default;
+/// The font size of the pane title in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-title-font-size: $kendo-font-size-lg !default;
+/// The line height of the pane title in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-title-line-height: $kendo-line-height-sm !default;
+/// The font weight of the pane title in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-title-font-weight: $kendo-font-weight-normal !default;
+
+/// The horizontal padding of the pane content in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-content-padding-x: $kendo-dock-manager-pane-header-padding-x !default;
+/// The vertical padding of the pane content in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-content-padding-y: $kendo-dock-manager-pane-header-padding-x !default;
+
+/// The horizontal padding of the tabbed pane in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-tabbed-pane-padding-y: k-map-get( $kendo-spacing, 3.5 ) !default;
+/// The horizontal padding of the tabbed pane in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-tabbed-pane-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+
+/// The width of the unpinned pane container in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-unpinned-container-width: 300px !default;
+/// The background-color of the unpinned pane container in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-unpinned-container-bg: $kendo-color-white !default;
+/// The box shadow of the unpinned pane container in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-unpinned-container-shadow: 4px 0px 5px 0px rgba(0, 0, 0, 0.04), 2px 0px 4px 0px rgba(0, 0, 0, 0.03) !default;
+
+/// The padding of the dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-padding: k-map-get( $kendo-spacing, 1.5 ) !default;
+/// The background color of the dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-bg: #f5f5f5 !default;
+/// The text color of the dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-text: $kendo-color-primary !default;
+/// The outline width of the dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-outline-width: 1px !default;
+/// The outline style of the dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-outline-style: solid !default;
+/// The outline color of the dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-outline: $kendo-dock-indicator-text !default;
+/// The box shadow of the dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-shadow: drop-shadow( 0px 1px 18px rgba(0, 0, 0, 0.12) ) drop-shadow( 0px 6px 10px rgba(0, 0, 0, 0.14) ) drop-shadow( 0px 3px 5px rgba(0, 0, 0, 0.20) ) !default;
+
+///  The background color of the hovered dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-hover-bg: $kendo-color-primary !default;
+/// The text color of the hovered dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-hover-text: $kendo-color-white !default;
+
+/// The width of the border around the dropping area in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-dock-preview-border-width: 1px !default;
+/// The style of the border around the dropping area in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-dock-preview-border-style: dashed !default;
+/// The border radius of the dropping area in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-dock-preview-border-radius: $kendo-border-radius-sm !default;
+/// The background color of the dropping area in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-dock-preview-bg: rgba( $kendo-color-primary, .16 ) !default;
+/// The border color of the dropping area in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-dock-preview-border: $kendo-color-primary !default;
+
+// #endregion
+// #region @import "./_layout.scss"; -> scss/dock-manager/_layout.scss
+@mixin kendo-dock-manager--layout-base() {
+
+    // DockManager
+    .k-dock-manager {
+        width: 100%;
+        height: 100%;
+        border-width: $kendo-dock-manager-border-width;
+        border-style: $kendo-dock-manager-border-style;
+        position: relative;
+        display: flex;
+        flex-flow: row nowrap;
+        overflow: auto;
+        box-sizing: border-box;
+    }
+
+    // Toolbar
+    .k-dock-manager-toolbar {
+        border-width: 0 $kendo-dock-manager-border-width 0 0;
+        border-color: inherit;
+        flex-shrink: 0;
+        writing-mode: vertical-lr;
+        box-shadow: none;
+
+        &::before {
+            height: 0;
+        }
+
+        .k-separator-horizontal {
+            width:  $kendo-line-height-em;
+            height: 0;
+            border-width: $kendo-dock-manager-border-width 0 0;
+        }
+
+        // Needed because of a bug in Chrome - Issue 1473554
+        // A fix will be shipped likely in milestone 118 and then we can revisit this
+        @supports  (not (-ms-ime-mode: none)) and (not (overflow: -webkit-marquee)) and (not (-moz-appearance:none)) {
+            .k-toolbar-button {
+                padding-block: $kendo-button-padding-x;
+                padding-inline: $kendo-button-padding-y;
+            }
+            .k-toolbar-button .k-button-text {
+                writing-mode: vertical-lr;
+            }
+        }
+    }
+
+    // Panes
+    .k-dock-manager-pane-container {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-grow: 1;
+        overflow: hidden;
+    }
+
+    // Splitter
+    .k-dock-manager-splitter,
+    .k-dock-manager-unpinned-container {
+        height: 100%;
+        border-width: 0;
+        align-items: stretch;
+
+        > .k-pane {
+            height: auto;
+            flex-direction: column;
+            border-color: inherit;
+        }
+
+        .k-pane-header {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding-block: $kendo-dock-manager-pane-header-padding-y;
+            padding-inline: $kendo-dock-manager-pane-header-padding-x;
+            border-block-end-width: $kendo-dock-manager-pane-header-border-width;
+            border-block-end-style: $kendo-dock-manager-pane-header-border-style;
+            border-color: inherit;
+        }
+
+        .k-pane-title {
+            padding-block: $kendo-dock-manager-pane-title-padding-y;
+            padding-inline: $kendo-dock-manager-pane-title-padding-x;
+            font-family: $kendo-dock-manager-pane-title-font-family;
+            font-size: $kendo-dock-manager-pane-title-font-size;
+            line-height: $kendo-dock-manager-pane-title-line-height;
+            font-weight: $kendo-dock-manager-pane-title-font-weight;
+            flex: 1 1 auto;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+
+        .k-pane-scrollable {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            border-color: inherit;
+        }
+
+        .k-pane-content {
+            height: 100%;
+            padding-block: $kendo-dock-manager-pane-content-padding-y;
+            padding-inline: $kendo-dock-manager-pane-content-padding-x;
+            overflow: auto;
+            flex: 1;
+        }
+
+        .k-pane-actions {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .k-pane-tabbed {
+            padding-block-start: $kendo-dock-manager-tabbed-pane-padding-y;
+            padding-block-end: $kendo-dock-manager-tabbed-pane-padding-x;
+            padding-inline: $kendo-dock-manager-tabbed-pane-padding-x;
+        }
+
+        .k-splitbar {
+            border-width: 0 1px;
+            border-style: solid;
+            border-color: inherit;
+        }
+        .k-splitbar-vertical {
+            border-width: 1px 0;
+        }
+    }
+
+    // Unpinned pane
+    .k-dock-manager-unpinned-container {
+        width: $kendo-dock-manager-unpinned-container-width;
+        position: absolute;
+        display: flex;
+        height: 100%;
+        border-color: inherit;
+        z-index: 20;
+
+        .k-pane {
+            display: inline-flex;
+            flex-direction: column;
+            position: relative;
+            flex: 1 1 auto;
+        }
+
+        .k-splitbar {
+            height: 100%;
+            position: relative;
+            flex: none;
+        }
+    }
+
+    // Docking preview
+    .k-docking-preview {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        display: flex;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border-width: $kendo-dock-manager-dock-preview-border-width;
+        border-style: $kendo-dock-manager-dock-preview-border-style;
+        border-radius: $kendo-dock-manager-dock-preview-border-radius;
+        z-index: 10;
+    }
+
+}
+
+@mixin kendo-dock-navigator--layout() {
+
+    // DockNavigator
+    .k-dock-navigator-container {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: absolute;
+        z-index: 10001;
+        pointer-events: none;
+    }
+
+    .k-dock-navigator {
+        display: grid;
+        grid-template-columns: repeat(3, auto);
+        grid-template-rows: repeat(3, auto);
+        justify-content: center;
+        position: absolute;
+    }
+
+    .k-dock-indicator {
+        padding: $kendo-dock-indicator-padding;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        position: relative;
+        pointer-events: all;
+        outline-width: $kendo-dock-indicator-outline-width;
+        outline-style: $kendo-dock-indicator-outline-style;
+
+        &.k-dock-indicator-middle {
+            filter: none;
+        }
+    }
+
+    .k-dock-indicator-top {
+        grid-area: 1 / 2 / auto;
+    }
+    .k-dock-indicator-right {
+        grid-area: 2 / 3 / auto;
+    }
+    .k-dock-indicator-bottom {
+        grid-area: 3 / 2 / auto;
+    }
+    .k-dock-indicator-left {
+        grid-area: 2 / 1 / auto;
+    }
+    .k-dock-indicator-middle {
+        grid-area: 2 / 2 / auto;
+    }
+
+}
+
+@mixin kendo-dock-manager--layout() {
+    @include kendo-dock-manager--layout-base();
+    @include kendo-dock-navigator--layout();
+}
+
+// #endregion
+// #region @import "./_theme.scss"; -> scss/dock-manager/_theme.scss
+@mixin kendo-dock-manager--theme-base() {
+
+    // DockManager
+    .k-dock-manager {
+        border-color: $kendo-dock-manager-border;
+    }
+
+    // Splitter
+    .k-dock-manager-splitter .k-pane-header,
+    .k-dock-manager-unpinned-container .k-pane-header {
+        background-color: $kendo-dock-manager-pane-header-bg;
+    }
+
+    .k-dock-manager-unpinned-container {
+        background-color: $kendo-dock-manager-unpinned-container-bg;
+        @include box-shadow( $kendo-dock-manager-unpinned-container-shadow );
+    }
+
+    // Docking preview
+    .k-docking-preview {
+        background-color: $kendo-dock-manager-dock-preview-bg;
+        border-color: $kendo-dock-manager-dock-preview-border;
+    }
+
+}
+
+@mixin kendo-dock-navigator--theme() {
+
+    .k-dock-indicator {
+        color: $kendo-dock-indicator-text;
+        background-color: $kendo-dock-indicator-bg;
+        outline-color: $kendo-dock-indicator-outline;
+        filter: $kendo-dock-indicator-shadow;
+
+        &:hover,
+        &.k-hover {
+            background-color: $kendo-dock-indicator-hover-bg;
+            color: $kendo-dock-indicator-hover-text;
+        }
+    }
+
+}
+
+@mixin kendo-dock-manager--theme() {
+    @include kendo-dock-manager--theme-base();
+    @include kendo-dock-navigator--theme();
+}
+
+// #endregion
+
+// Register
+// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
+// File already imported_once. Skipping output.
+// #endregion
+@include module-register( $_kendo-module-meta... );
+
+// Expose
+@mixin kendo-dock-manager--styles() {
+    @include module-render("dock-manager") {
+        @include kendo-dock-manager--layout();
+        @include kendo-dock-manager--theme();
+    }
+}
+
+@if $kendo-auto-bootstrap {
+    @include kendo-dock-manager--styles();
+}
+
 // #endregion
 
 
@@ -55422,10 +55878,9 @@ $kendo-pdf-viewer-page-text: $kendo-component-text !default;
 $kendo-pdf-viewer-page-border: $kendo-component-border !default;
 $kendo-pdf-viewer-page-shadow: 0 0 k-math-div( $kendo-pdf-viewer-page-spacing, 2 ) $kendo-pdf-viewer-page-border !default;
 
-$kendo-pdf-viewer-search-dialog-padding-x: $kendo-toolbar-md-padding-x !default;
-$kendo-pdf-viewer-search-dialog-padding-y: calc( #{$kendo-toolbar-md-padding-x} * 2 ) !default;
-$kendo-pdf-viewer-search-dialog-spacing: $kendo-toolbar-md-spacing !default;
-
+$kendo-pdf-viewer-search-panel-padding-x: $kendo-toolbar-md-padding-x !default;
+$kendo-pdf-viewer-search-panel-padding-y: calc( #{$kendo-toolbar-md-padding-x} * 2 ) !default;
+$kendo-pdf-viewer-search-panel-spacing: $kendo-toolbar-md-spacing !default;
 $kendo-pdf-viewer-search-panel-border-width: 1px !default;
 $kendo-pdf-viewer-search-panel-border-radius: 0 !default;
 $kendo-pdf-viewer-search-panel-bg: $kendo-component-bg !default;
@@ -55487,19 +55942,17 @@ $kendo-pdf-viewer-icon-text: $kendo-dropzone-icon-text !default;
             flex: 1 1 auto;
             outline: none;
 
-            .k-enable-text-select,
             &.k-enable-text-select {
                 user-select: text;
                 cursor: text;
             }
 
-            .k-enable-panning,
             &.k-enable-panning {
                 cursor: grab;
-            }
-            .k-enable-panning span::selection,
-            &.k-enable-panning span::selection {
-                background-color: transparent;
+
+                span::selection {
+                    background-color: transparent;
+                }
             }
         }
 
@@ -55532,10 +55985,6 @@ $kendo-pdf-viewer-icon-text: $kendo-dropzone-icon-text !default;
                     color: transparent;
                 }
 
-                mark {
-                    color: transparent;
-                }
-
                 .k-search-highlight-mark {
                     color: transparent;
                 }
@@ -55563,19 +56012,22 @@ $kendo-pdf-viewer-icon-text: $kendo-dropzone-icon-text !default;
     }
 
     // Search
-    .k-pdf-viewer-search-dialog {
-        padding: 0 !important; // stylelint-disable-line declaration-no-important
-    }
-
-    .k-search-panel {
-        padding-block: $kendo-pdf-viewer-search-dialog-padding-y;
-        padding-inline: $kendo-pdf-viewer-search-dialog-padding-x;
+    .k-pdf-viewer-canvas > .k-search-panel {
+        width: max-content;
+        margin-top: calc( (#{$kendo-button-calc-size} + ( 2 * #{$kendo-pdf-viewer-search-panel-border-width} ) + ( 2 * #{$kendo-pdf-viewer-search-panel-padding-y} )) * -1 );
+        padding-block: $kendo-pdf-viewer-search-panel-padding-y;
+        padding-inline: $kendo-pdf-viewer-search-panel-padding-x;
+        border-width: $kendo-pdf-viewer-search-panel-border-width;
+        border-style: solid;
+        border-radius: $kendo-pdf-viewer-search-panel-border-radius;
         display: flex;
-        gap: $kendo-pdf-viewer-search-dialog-spacing;
+        gap: $kendo-pdf-viewer-search-panel-spacing;
         flex-flow: row nowrap;
         flex: 0 0 auto;
         justify-content: flex-start;
         align-items: center;
+        z-index: 10;
+        cursor: default;
 
         .k-search-dialog-draghandle {
             cursor: move;
@@ -55597,21 +56049,6 @@ $kendo-pdf-viewer-icon-text: $kendo-dropzone-icon-text !default;
         }
     }
 
-    .k-pdf-viewer-canvas > .k-search-panel {
-        width: max-content;
-        margin-top: calc( (#{$kendo-button-calc-size} + ( 2 * #{$kendo-pdf-viewer-search-panel-border-width} ) + ( 2 * #{$kendo-pdf-viewer-search-dialog-padding-y} )) * -1 );
-        border-width: $kendo-pdf-viewer-search-panel-border-width;
-        border-style: solid;
-        border-radius: $kendo-pdf-viewer-search-panel-border-radius;
-        z-index: 10;
-        cursor: default;
-    }
-
-    // Alias
-    .k-search-container {
-        @extend .k-search-panel !optional;
-    }
-
 }
 
 
@@ -55689,10 +56126,6 @@ $kendo-pdf-viewer-icon-text: $kendo-dropzone-icon-text !default;
         @include box-shadow( $kendo-pdf-viewer-search-panel-shadow );
     }
 
-    .k-search-container {
-        @extend .k-search-panel !optional;
-    }
-
 }
 
 
@@ -58067,6 +58500,7 @@ $kendo-signature-maximized-line-width: 3px !default;
     @include kendo-panelbar--styles();
     @include kendo-splitter--styles();
     @include kendo-tile-layout--styles();
+    @include kendo-dock-manager--styles();
 
 
     // Data management