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

package/dist/meta/variables.json

@@ -625,7 +625,7 @@
     },
     "kendo-components": {
         "type": "List",
-        "value": "\"typography\", \"utils\", \"draggable\", \"table\", \"icon\", \"chip\", \"messagebox\", \"input\", \"list\", \"listgroup\", \"overlay\", \"ripple\", \"virtual-scroller\", \"avatar\", \"badge\", \"color-preview\", \"loader\", \"skeleton\", \"tooltip\", \"button\", \"split-button\", \"menu-button\", \"textbox\", \"textarea\", \"checkbox\", \"listbox\", \"progressbar\", \"radio\", \"slider\", \"form\", \"validator\", \"floating-label\", \"calendar\", \"popup\", \"time-selector\", \"autocomplete\", \"captcha\", \"color-palette\", \"color-gradient\", \"color-editor\", \"color-picker\", \"combobox\", \"date-input\", \"date-picker\", \"time-picker\", \"date-time-picker\", \"date-range-picker\", \"dropdown-grid\", \"dropdown-list\", \"dropdown-tree\", \"masked-textbox\", \"multiselect\", \"numeric-textbox\", \"rating\", \"searchbox\", \"switch\", \"upload\", \"dropzone\", \"actions\", \"appbar\", \"fab\", \"menu\", \"toolbar\", \"action-sheet\", \"dialog\", \"drawer\", \"notification\", \"popover\", \"responsive-panel\", \"window\", \"bottom-navigation\", \"breadcrumb\", \"pager\", \"stepper\", \"tabstrip\", \"treeview\", \"wizard\", \"card\", \"expander\", \"panelbar\", \"splitter\", \"tile-layout\", \"grid\", \"listview\", \"spreadsheet\", \"pivotgrid\", \"treelist\", \"filter\", \"file-manager\", \"task-board\", \"editor\", \"image-editor\", \"gantt\", \"scheduler\", \"adaptive\", \"chat\", \"media-player\", \"timeline\", \"pdf-viewer\", \"scroller\", \"scrollview\", \"dataviz\", \"map\", \"orgchart\", \"signature\""
+        "value": "\"typography\", \"utils\", \"draggable\", \"table\", \"icon\", \"chip\", \"messagebox\", \"input\", \"list\", \"listgroup\", \"overlay\", \"ripple\", \"virtual-scroller\", \"avatar\", \"badge\", \"color-preview\", \"loader\", \"skeleton\", \"tooltip\", \"button\", \"split-button\", \"menu-button\", \"textbox\", \"textarea\", \"checkbox\", \"listbox\", \"progressbar\", \"radio\", \"slider\", \"form\", \"validator\", \"floating-label\", \"calendar\", \"popup\", \"time-selector\", \"autocomplete\", \"captcha\", \"color-palette\", \"color-gradient\", \"color-editor\", \"color-picker\", \"combobox\", \"date-input\", \"date-picker\", \"time-picker\", \"date-time-picker\", \"date-range-picker\", \"dropdown-grid\", \"dropdown-list\", \"dropdown-tree\", \"masked-textbox\", \"multiselect\", \"numeric-textbox\", \"rating\", \"searchbox\", \"switch\", \"upload\", \"dropzone\", \"actions\", \"appbar\", \"fab\", \"menu\", \"toolbar\", \"action-sheet\", \"dialog\", \"drawer\", \"notification\", \"popover\", \"responsive-panel\", \"window\", \"bottom-navigation\", \"breadcrumb\", \"pager\", \"stepper\", \"tabstrip\", \"treeview\", \"wizard\", \"card\", \"expander\", \"panelbar\", \"splitter\", \"tile-layout\", \"dock-manager\", \"grid\", \"listview\", \"spreadsheet\", \"pivotgrid\", \"treelist\", \"filter\", \"file-manager\", \"task-board\", \"editor\", \"image-editor\", \"gantt\", \"scheduler\", \"adaptive\", \"chat\", \"media-player\", \"timeline\", \"pdf-viewer\", \"scroller\", \"scrollview\", \"dataviz\", \"map\", \"orgchart\", \"signature\""
     },
     "equilateral-index": {
         "type": "Number",
@@ -8859,6 +8859,146 @@
         "type": "Color",
         "value": "rgba(255, 255, 255, 0.2)"
     },
+    "kendo-dock-manager-border-width": {
+        "type": "Number",
+        "value": "1px"
+    },
+    "kendo-dock-manager-border-style": {
+        "type": "String",
+        "value": "solid"
+    },
+    "kendo-dock-manager-border": {
+        "type": "Color",
+        "value": "rgba(0, 0, 0, 0.08)"
+    },
+    "kendo-dock-manager-pane-header-padding-y": {
+        "type": "Number",
+        "value": "8px"
+    },
+    "kendo-dock-manager-pane-header-padding-x": {
+        "type": "Number",
+        "value": "16px"
+    },
+    "kendo-dock-manager-pane-header-border-width": {
+        "type": "Number",
+        "value": "1px"
+    },
+    "kendo-dock-manager-pane-header-border-style": {
+        "type": "String",
+        "value": "solid"
+    },
+    "kendo-dock-manager-pane-header-bg": {
+        "type": "Color",
+        "value": "#fafafa"
+    },
+    "kendo-dock-manager-pane-title-padding-y": {
+        "type": "Null",
+        "value": "null"
+    },
+    "kendo-dock-manager-pane-title-padding-x": {
+        "type": "Null",
+        "value": "null"
+    },
+    "kendo-dock-manager-pane-title-font-family": {
+        "type": "String",
+        "value": "inherit"
+    },
+    "kendo-dock-manager-pane-title-font-size": {
+        "type": "Number",
+        "value": "16px"
+    },
+    "kendo-dock-manager-pane-title-line-height": {
+        "type": "Number",
+        "value": "1.25"
+    },
+    "kendo-dock-manager-pane-title-font-weight": {
+        "type": "Number",
+        "value": "400"
+    },
+    "kendo-dock-manager-pane-content-padding-x": {
+        "type": "Number",
+        "value": "16px"
+    },
+    "kendo-dock-manager-pane-content-padding-y": {
+        "type": "Number",
+        "value": "16px"
+    },
+    "kendo-dock-manager-tabbed-pane-padding-y": {
+        "type": "Number",
+        "value": "14px"
+    },
+    "kendo-dock-manager-tabbed-pane-padding-x": {
+        "type": "Number",
+        "value": "8px"
+    },
+    "kendo-dock-manager-unpinned-container-width": {
+        "type": "Number",
+        "value": "300px"
+    },
+    "kendo-dock-manager-unpinned-container-bg": {
+        "type": "Color",
+        "value": "#ffffff"
+    },
+    "kendo-dock-manager-unpinned-container-shadow": {
+        "type": "List",
+        "value": "4px 0px 5px 0px rgba(0, 0, 0, 0.04), 2px 0px 4px 0px rgba(0, 0, 0, 0.03)"
+    },
+    "kendo-dock-indicator-padding": {
+        "type": "Number",
+        "value": "6px"
+    },
+    "kendo-dock-indicator-bg": {
+        "type": "Color",
+        "value": "#f5f5f5"
+    },
+    "kendo-dock-indicator-text": {
+        "type": "Color",
+        "value": "#ff6358"
+    },
+    "kendo-dock-indicator-outline-width": {
+        "type": "Number",
+        "value": "1px"
+    },
+    "kendo-dock-indicator-outline-style": {
+        "type": "String",
+        "value": "solid"
+    },
+    "kendo-dock-indicator-outline": {
+        "type": "Color",
+        "value": "#ff6358"
+    },
+    "kendo-dock-indicator-shadow": {
+        "type": "List",
+        "value": "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.2))"
+    },
+    "kendo-dock-indicator-hover-bg": {
+        "type": "Color",
+        "value": "#ff6358"
+    },
+    "kendo-dock-indicator-hover-text": {
+        "type": "Color",
+        "value": "#ffffff"
+    },
+    "kendo-dock-manager-dock-preview-border-width": {
+        "type": "Number",
+        "value": "1px"
+    },
+    "kendo-dock-manager-dock-preview-border-style": {
+        "type": "String",
+        "value": "dashed"
+    },
+    "kendo-dock-manager-dock-preview-border-radius": {
+        "type": "Number",
+        "value": "2px"
+    },
+    "kendo-dock-manager-dock-preview-bg": {
+        "type": "Color",
+        "value": "rgba(255, 99, 88, 0.16)"
+    },
+    "kendo-dock-manager-dock-preview-border": {
+        "type": "Color",
+        "value": "#ff6358"
+    },
     "kendo-adaptive-bg": {
         "type": "Color",
         "value": "#ffffff"
@@ -12111,15 +12251,15 @@
         "type": "List",
         "value": "0 0 15px rgba(0, 0, 0, 0.08)"
     },
-    "kendo-pdf-viewer-search-dialog-padding-x": {
+    "kendo-pdf-viewer-search-panel-padding-x": {
         "type": "Number",
         "value": "8px"
     },
-    "kendo-pdf-viewer-search-dialog-padding-y": {
+    "kendo-pdf-viewer-search-panel-padding-y": {
         "type": "Calculation",
         "value": "calc( 8px * 2 )"
     },
-    "kendo-pdf-viewer-search-dialog-spacing": {
+    "kendo-pdf-viewer-search-panel-spacing": {
         "type": "Number",
         "value": "8px"
     },

package/lib/swatches/default-blue.json

@@ -3,7 +3,7 @@
     "name": "Default Blue",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.8.0-dev.1",
+    "version": "6.8.0-dev.2",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-dataviz-v4.json

@@ -3,7 +3,7 @@
     "name": "Default Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.8.0-dev.1",
+    "version": "6.8.0-dev.2",
     "api": "legacy",
     "previewColors": [
         "#ff6358",

package/lib/swatches/default-green.json

@@ -3,7 +3,7 @@
     "name": "Default Green",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.8.0-dev.1",
+    "version": "6.8.0-dev.2",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Default Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.8.0-dev.1",
+    "version": "6.8.0-dev.2",
     "api": "legacy",
     "previewColors": [
         "#000000",

package/lib/swatches/default-main.json

@@ -3,7 +3,7 @@
     "name": "Default Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.8.0-dev.1",
+    "version": "6.8.0-dev.2",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-nordic.json

@@ -3,7 +3,7 @@
     "name": "Default Nordic",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.8.0-dev.1",
+    "version": "6.8.0-dev.2",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-ocean-blue-a11y.json

@@ -3,7 +3,7 @@
     "name": "Default Ocean Blue A11Y",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.8.0-dev.1",
+    "version": "6.8.0-dev.2",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-ocean-blue.json

@@ -3,7 +3,7 @@
     "name": "Default Ocean Blue",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.8.0-dev.1",
+    "version": "6.8.0-dev.2",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-orange.json

@@ -3,7 +3,7 @@
     "name": "Default Orange",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.8.0-dev.1",
+    "version": "6.8.0-dev.2",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-purple.json

@@ -3,7 +3,7 @@
     "name": "Default Purple",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.8.0-dev.1",
+    "version": "6.8.0-dev.2",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-turquoise.json

@@ -3,7 +3,7 @@
     "name": "Default Turquoise",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.8.0-dev.1",
+    "version": "6.8.0-dev.2",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-urban.json

@@ -3,7 +3,7 @@
     "name": "Default Urban",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.8.0-dev.1",
+    "version": "6.8.0-dev.2",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-default",
   "description": "SASS resources for the default Kendo UI theme",
-  "version": "6.8.0-dev.1",
+  "version": "6.8.0-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -50,8 +50,8 @@
   },
   "dependencies": {
     "@progress/kendo-font-icons": "1.9.0",
-    "@progress/kendo-theme-core": "6.8.0-dev.1",
-    "@progress/kendo-theme-utils": "6.8.0-dev.1"
+    "@progress/kendo-theme-core": "6.8.0-dev.2",
+    "@progress/kendo-theme-utils": "6.8.0-dev.2"
   },
-  "gitHead": "8b90f3aef2d8742d9fea94474dabb38bd7553c1d"
+  "gitHead": "1d0254882897f857ca96fd31477a6e2c18d18433"
 }

package/scss/dock-manager/_index.scss

@@ -0,0 +1,38 @@
+@import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+// Module meta
+$_kendo-module-meta: (
+    name: "dock-manager",
+    dependencies: (
+        "splitter",
+        "toolbar",
+        "tabstrip"
+    )
+);
+
+// Dependencies
+@import "../splitter/_index.scss";
+@import "../toolbar/_index.scss";
+@import "../tabstrip/_index.scss";
+
+// Component
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";
+
+// Register
+@import "../core/module-system/index.import.scss";
+@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();
+}

package/scss/dock-manager/_layout.scss

@@ -0,0 +1,230 @@
+@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();
+}

package/scss/dock-manager/_theme.scss

@@ -0,0 +1,47 @@
+@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();
+}