@progress/kendo-theme-core 10.2.0-dev.1 → 10.2.0-dev.3

package/scss/components/dock-manager/_layout.scss

@@ -0,0 +1,226 @@
+@use "../../typography/index.import.scss" as *;
+@use "./variables.scss" as *;
+
+@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;
+        }
+    }
+
+    // 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;
+            width: 100%;
+        }
+
+        .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;
+    }
+
+    .k-dock-manager-window:has(.k-pane) .k-window-content {
+        padding: 0;
+    }
+
+}
+
+@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/components/dock-manager/_theme.scss

@@ -0,0 +1,50 @@
+@use "../../mixins/index.import.scss" as *;
+@use "./variables.scss" as *;
+
+@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();
+}

package/scss/components/dock-manager/_variables.scss

@@ -0,0 +1,43 @@
+$kendo-dock-manager-border-width: null !default;
+$kendo-dock-manager-border-style: null !default;
+$kendo-dock-manager-border: null !default;
+
+$kendo-dock-manager-pane-header-padding-y: null !default;
+$kendo-dock-manager-pane-header-padding-x: null !default;
+$kendo-dock-manager-pane-header-border-width: null !default;
+$kendo-dock-manager-pane-header-border-style: null !default;
+$kendo-dock-manager-pane-header-bg: null !default;
+
+$kendo-dock-manager-pane-title-padding-y: null !default;
+$kendo-dock-manager-pane-title-padding-x: null !default;
+$kendo-dock-manager-pane-title-font-family: null !default;
+$kendo-dock-manager-pane-title-font-size: null !default;
+$kendo-dock-manager-pane-title-line-height: null !default;
+$kendo-dock-manager-pane-title-font-weight: null !default;
+
+$kendo-dock-manager-pane-content-padding-x: null !default;
+$kendo-dock-manager-pane-content-padding-y: null !default;
+
+$kendo-dock-manager-tabbed-pane-padding-y: null !default;
+$kendo-dock-manager-tabbed-pane-padding-x: null !default;
+
+$kendo-dock-manager-unpinned-container-width: null !default;
+$kendo-dock-manager-unpinned-container-bg: null !default;
+$kendo-dock-manager-unpinned-container-shadow: null !default;
+
+$kendo-dock-indicator-padding: null !default;
+$kendo-dock-indicator-bg: null !default;
+$kendo-dock-indicator-text: null !default;
+$kendo-dock-indicator-outline-width: null !default;
+$kendo-dock-indicator-outline-style: null !default;
+$kendo-dock-indicator-outline: null !default;
+$kendo-dock-indicator-shadow: null !default;
+
+$kendo-dock-indicator-hover-bg: null !default;
+$kendo-dock-indicator-hover-text: null !default;
+
+$kendo-dock-manager-dock-preview-border-width: null !default;
+$kendo-dock-manager-dock-preview-border-style: null !default;
+$kendo-dock-manager-dock-preview-border-radius: null !default;
+$kendo-dock-manager-dock-preview-bg: null !default;
+$kendo-dock-manager-dock-preview-border: null !default;

package/scss/components/draggable/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-draggable--styles() {
+    @include import-once( "draggable" ) {
+        @include core-styles();
+        @include kendo-draggable--layout();
+        @include kendo-draggable--theme();
+    }
+}

package/scss/components/draggable/_layout.scss

@@ -0,0 +1,133 @@
+@use "sass:math";
+@use "../../mixins/index.import.scss" as *;
+@use "./_variables.scss" as *;
+@use "../../_variables.scss" as *;
+
+@mixin kendo-draggable--layout-base() {
+
+    // Layout
+    .k-drag-clue {
+        @include border-radius( $kendo-drag-hint-border-radius );
+        padding-block: $kendo-drag-hint-padding-y;
+        padding-inline: $kendo-drag-hint-padding-x;
+        border-width: $kendo-drag-hint-border-width;
+        border-style: if( $kendo-drag-hint-border-width == null, null, solid );
+        box-sizing: border-box;
+        font-size: $kendo-drag-hint-font-size;
+        font-family: $kendo-drag-hint-font-family;
+        line-height: $kendo-drag-hint-line-height;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        align-content: center;
+        white-space: nowrap;
+        opacity: $kendo-drag-hint-opacity;
+        overflow: hidden;
+        position: absolute;
+        z-index: 20000;
+        cursor: move;
+    }
+    .k-drag-status,
+    .k-drag-clue .k-drag-status {
+        margin: 0;
+        margin-right: .4ex;
+    }
+
+
+    // Drop hint
+    .k-drop-hint {
+        display: flex;
+        gap: $kendo-drop-hint-arrow-spacing;
+        justify-content: space-between;
+        align-items: center;
+        position: absolute;
+        z-index: 1000;
+        transform: translate(-50%, -50%);
+    }
+
+    .k-drop-hint-start,
+    .k-drop-hint-end {
+        flex-shrink: 0;
+        border-width: math.div( $kendo-drop-hint-arrow-size, 2 );
+        border-style: solid;
+        border-color: transparent;
+    }
+
+    .k-drop-hint-line {
+        flex-grow: 1;
+        background-color: $kendo-drop-hint-bg;
+    }
+
+    .k-drop-hint-h {
+        .k-drop-hint-start {
+            border-left-width: ( math.div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index );
+            border-left-color: $kendo-drop-hint-bg;
+            border-right-width: 0;
+        }
+
+        .k-drop-hint-line {
+            width: $kendo-drop-hint-line-h-width;
+            height: $kendo-drop-hint-line-h-height;
+        }
+
+        .k-drop-hint-end {
+            border-right-width: ( math.div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index );
+            border-right-color: $kendo-drop-hint-bg;
+            border-left-width: 0;
+        }
+    }
+
+    .k-drop-hint-v {
+        flex-direction: column;
+
+        .k-drop-hint-start {
+            border-top-width: ( math.div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index );
+            border-top-color: $kendo-drop-hint-bg;
+            border-bottom-width: 0;
+        }
+
+        .k-drop-hint-line {
+            width: $kendo-drop-hint-line-v-width;
+            height: $kendo-drop-hint-line-v-height;
+        }
+
+        .k-drop-hint-end {
+            border-bottom-width: ( math.div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index );
+            border-bottom-color: $kendo-drop-hint-bg;
+            border-top-width: 0;
+        }
+    }
+
+
+    // Reorder cue
+    .k-reorder-cue {
+        position: absolute;
+
+        &::before,
+        &::after {
+            content: "";
+            width: 0;
+            height: 0;
+            border: 3px solid transparent;
+            position: absolute;
+            transform: translateX(-50%);
+        }
+
+        &::before {
+            border-bottom-width: 0;
+            border-top-color: currentColor;
+            top: -4px;
+        }
+        &::after {
+            border-top-width: 0;
+            border-bottom-color: currentColor;
+            bottom: -4px;
+        }
+    }
+
+}
+
+
+@mixin kendo-draggable--layout() {
+    @include kendo-draggable--layout-base();
+}

package/scss/components/draggable/_theme.scss

@@ -0,0 +1,22 @@
+@use "../../mixins/index.import.scss" as *;
+@use "./_variables.scss" as *;
+
+@mixin kendo-draggable--theme-base() {
+
+    // Drag hint
+    .k-drag-clue {
+        @include fill(
+            $kendo-drag-hint-text,
+            $kendo-drag-hint-bg,
+            $kendo-drag-hint-border,
+            $kendo-drag-hint-gradient
+        );
+        @include box-shadow( $kendo-drag-hint-shadow );
+    }
+
+}
+
+
+@mixin kendo-draggable--theme() {
+    @include kendo-draggable--theme-base();
+}

package/scss/components/draggable/_variables.scss

@@ -0,0 +1,27 @@
+// Drag hint
+$kendo-drag-hint-padding-x: null !default;
+$kendo-drag-hint-padding-y: null !default;
+$kendo-drag-hint-border-width: null !default;
+$kendo-drag-hint-border-radius: null !default;
+$kendo-drag-hint-font-size: null !default;
+$kendo-drag-hint-font-family: null !default;
+$kendo-drag-hint-line-height: null !default;
+
+$kendo-drag-hint-bg: null !default;
+$kendo-drag-hint-text: null !default;
+$kendo-drag-hint-border: null !default;
+$kendo-drag-hint-gradient: null !default;
+$kendo-drag-hint-shadow: null !default;
+
+$kendo-drag-hint-opacity: null !default;
+
+
+// Drop hint
+$kendo-drop-hint-arrow-size: null !default;
+$kendo-drop-hint-arrow-spacing: null !default;
+$kendo-drop-hint-line-h-width: null !default;
+$kendo-drop-hint-line-h-height: null !default;
+$kendo-drop-hint-line-v-width: null !default;
+$kendo-drop-hint-line-v-height: null !default;
+
+$kendo-drop-hint-bg: null !default;

package/scss/components/drawer/_index.scss

@@ -0,0 +1,22 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../overlay/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+@use "../list/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-drawer--styles() {
+    @include import-once( "drawer" ) {
+        @include core-styles();
+        @include kendo-overlay--styles();
+        @include kendo-toolbar--styles();
+        @include kendo-list--styles();
+        @include kendo-drawer--layout();
+        @include kendo-drawer--theme();
+    }
+}