@progress/kendo-theme-fluent 11.2.1-dev.0 → 11.3.0-dev.0

package/scss/splitter/_layout.scss

@@ -1,193 +1,30 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/splitter/_layout.scss" as *;
 
 @mixin kendo-splitter--layout() {
-
-    // Base
-    .k-splitter {
-        height: 300px;
-        border-width: var( --kendo-splitter-border-width, #{$kendo-splitter-border-width} );
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: var( --kendo-splitter-font-family, #{$kendo-splitter-font-family} );
-        font-size: var( --kendo-splitter-font-size, #{$kendo-splitter-font-size} );
-        line-height: var( --kendo-splitter-line-height, #{$kendo-splitter-line-height} );
-        display: block;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        // Pane
-        .k-pane {
-            overflow: hidden;
-            box-sizing:border-box;
-        }
-        .k-scrollable {
-            overflow: auto;
-        }
-        .k-splitter-resizing {
-            overflow: hidden;
-        }
-        // Loading
-        .k-pane-loading {
-            position: static;
-            top: 50%;
-            left: 50%;
-        }
-
-    }
-
-
-    // Splitbar
-    .k-ghost-splitbar,
-    .k-splitbar {
-        border-style: solid;
-        outline: 0;
-        position: absolute;
-        user-select: none;
-        touch-action: none;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        .k-collapse-prev,
-        .k-collapse-next {
-            cursor: pointer;
-            padding: var( --kendo-splitter-collapse-icon-padding-y, #{$kendo-splitter-collapse-icon-padding-y} ) var( --kendo-splitter-collapse-icon-padding-x, #{$kendo-splitter-collapse-icon-padding-x} );
-        }
-
-    }
-
-    .k-splitbar-draggable-horizontal { cursor: col-resize; }
-    .k-splitbar-draggable-vertical { cursor: row-resize; }
-
-    .k-ghost-splitbar-horizontal,
-    .k-splitbar-horizontal {
-        width: var( --kendo-splitter-splitbar-size, #{$kendo-splitter-splitbar-size} );
-        border-width: 0;
-        background-repeat: repeat-y;
-        flex-direction: column;
-        top: 0;
-    }
-    .k-ghost-splitbar-vertical,
-    .k-splitbar-vertical {
-        height: var( --kendo-splitter-splitbar-size, #{$kendo-splitter-splitbar-size} );
-        border-width: 0;
-        background-repeat: repeat-x;
-        flex-direction: row;
-        left: 0;
-    }
+    @include kendo-splitter--layout-base();
 
     .k-splitbar-static-horizontal {
-        width: var( --kendo-splitter-splitbar-static-size, #{$kendo-splitter-splitbar-static-size} );
+        width: $kendo-splitter-splitbar-static-size;
     }
     .k-splitbar-static-vertical {
-        height: var( --kendo-splitter-splitbar-static-size, #{$kendo-splitter-splitbar-static-size} );
-    }
-
-    .k-splitbar-draggable-horizontal .k-resize-handle {
-        width: var( --kendo-splitter-drag-handle-thickness, #{$kendo-splitter-drag-handle-thickness} );
-        height: var( --kendo-splitter-drag-handle-length, #{$kendo-splitter-drag-handle-length} );
-        position: static;
-        z-index: 1;
-    }
-
-    .k-splitbar .k-resize-handle {
-        display: none;
-        background-color: currentColor;
-    }
-
-    .k-splitbar-draggable-horizontal,
-    .k-splitbar-draggable-vertical {
-
-        .k-resize-handle {
-            display: block;
-        }
+        height: $kendo-splitter-splitbar-static-size;
     }
 
     .k-splitbar-horizontal .k-collapse-prev {
-        margin-block-end: var( --kendo-splitter-drag-icon-margin, #{$kendo-splitter-drag-icon-margin} );
+        margin-block-end: $kendo-splitter-drag-icon-margin;
     }
 
     .k-splitbar-horizontal .k-collapse-next {
-        margin-block-start: var( --kendo-splitter-drag-icon-margin, #{$kendo-splitter-drag-icon-margin} );
+        margin-block-start: $kendo-splitter-drag-icon-margin;
     }
 
     .k-splitbar-vertical .k-collapse-prev {
-        margin-inline-end: var( --kendo-splitter-drag-icon-margin, #{$kendo-splitter-drag-icon-margin} );
+        margin-inline-end: $kendo-splitter-drag-icon-margin;
     }
 
     .k-splitbar-vertical .k-collapse-next {
-        margin-inline-start: var( --kendo-splitter-drag-icon-margin, #{$kendo-splitter-drag-icon-margin} );
-    }
-
-    .k-splitbar-draggable-vertical .k-resize-handle {
-        width: var( --kendo-splitter-drag-handle-length, #{$kendo-splitter-drag-handle-length} );
-        height: var( --kendo-splitter-drag-handle-thickness, #{$kendo-splitter-drag-handle-thickness} );
-        position: static;
-        z-index: 1;
-    }
-
-    .k-pane > {
-        .k-splitter {
-            border-width: 0;
-            overflow: hidden;
-        }
-
-        .k-splitter-overlay {
-            opacity: 0;
-            position: absolute;
-        }
-    }
-
-    // flexbox-based splitter
-
-    .k-splitter-flex {
-        display: flex;
-        width: 100%;
-        height: auto;
-
-        .k-pane {
-            position: relative;
-            flex: 1 1 auto;
-            min-width: 0;
-            max-width: 100%;
-            min-height: 0;
-            max-height: 100%;
-            height: 100%; // allows nested elements to use height: 100%
-        }
-
-        .k-pane-static {
-            flex-grow: 0;
-            flex-shrink: 0;
-        }
-
-        .k-pane-flex {
-            display: flex;
-        }
-
-        .k-splitbar {
-            position: static;
-            flex: 0 0 auto;
-        }
-
-        .k-pane,
-        .k-pane-flex {
-            &.k-hidden,
-            &[hidden] {
-                // hidden panes need to be zero-width to allow pane animation
-                flex: 0 1 0% !important; // stylelint-disable-line declaration-no-important
-                overflow: hidden !important; // stylelint-disable-line declaration-no-important
-                display: block !important; // stylelint-disable-line declaration-no-important
-            }
-        }
-
-        &.k-splitter-horizontal {
-            flex-direction: row;
-        }
-        &.k-splitter-vertical {
-            flex-direction: column;
-        }
+        margin-inline-start: $kendo-splitter-drag-icon-margin;
     }
 }

package/scss/splitter/_theme.scss

@@ -1,36 +1,7 @@
+@use "@progress/kendo-theme-core/scss/components/splitter/_theme.scss" as *;
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-splitter--theme() {
-
-    .k-splitter {
-        @include fill(
-            var( --kendo-splitter-text, #{$kendo-splitter-text} ),
-            var( --kendo-splitter-bg, #{$kendo-splitter-bg} ),
-            var( --kendo-splitter-border, #{$kendo-splitter-border} )
-        );
-    }
-
-    // Splitbar
-    .k-splitbar {
-        color: var( --kendo-splitbar-text, #{$kendo-splitbar-text} );
-        background-color: var( --kendo-splitbar-bg, #{$kendo-splitbar-bg} );
-    }
-    .k-splitbar:hover,
-    .k-splitbar.k-hover,
-    .k-splitbar-horizontal-hover,
-    .k-splitbar-vertical-hover {
-        color: var( --kendo-splitbar-hover-text, #{$kendo-splitbar-hover-text} );
-        background-color: var( --kendo-splitbar-hover-bg, #{$kendo-splitbar-hover-bg} );
-    }
-    .k-splitbar:focus,
-    .k-splitbar.k-focus {
-        color: var( --kendo-splitbar-selected-text, #{$kendo-splitbar-selected-text} );
-        background: var( --kendo-splitbar-selected-bg, #{$kendo-splitbar-selected-bg} );
-    }
-
-    // Ghost splitbar
-    .k-ghost-splitbar {
-        background-color: var( --kendo-splitbar-hover-bg, #{$kendo-splitbar-hover-bg} );
-    }
+    @include kendo-splitter--theme-base();
 }

package/scss/splitter/_variables.scss

@@ -3,68 +3,90 @@
 
 /// The width of the border around the Splitter.
 /// @group splitter
-$kendo-splitter-border-width: 1px !default;
+$kendo-splitter-border-width: var( --kendo-splitter-border-width, 1px ) !default;
 /// The font size of the Splitter.
 /// @group splitter
-$kendo-splitter-font-size: var( --kendo-font-size, initial ) !default;
+$kendo-splitter-font-size: var( --kendo-splitter-font-size, var( --kendo-font-size, initial ) ) !default;
 /// The line height of the Splitter.
 /// @group splitter
-$kendo-splitter-line-height: var( --kendo-line-height, initial ) !default;
+$kendo-splitter-line-height: var( --kendo-splitter-line-height, var( --kendo-line-height, initial ) ) !default;
 /// The font family of the Splitter.
 /// @group splitter
-$kendo-splitter-font-family: var( --kendo-font-family, initial ) !default;
+$kendo-splitter-font-family: var( --kendo-splitter-font-family, var( --kendo-font-family, initial ) ) !default;
 
 /// The background color of the Splitter.
 /// @group splitter
-$kendo-splitter-bg: k-color(surface-alt) !default;
+$kendo-splitter-bg: var( --kendo-splitter-bg, #{k-color(surface-alt)} ) !default;
 /// The text color of the Splitter.
 /// @group splitter
-$kendo-splitter-text: k-color(on-app-surface) !default;
+$kendo-splitter-text: var( --kendo-splitter-text, #{k-color(on-app-surface)} ) !default;
 /// The border color of the Splitter.
 /// @group splitter
-$kendo-splitter-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-splitter-border: var( --kendo-splitter-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
 
 /// The size of the Splitter split bar.
 /// @group splitter
-$kendo-splitter-splitbar-size: k-spacing(3) !default;
+$kendo-splitter-splitbar-size: var( --kendo-splitter-splitbar-size, #{k-spacing(3)} ) !default;
 /// The length of the Splitter drag handle.
 /// @group splitter
-$kendo-splitter-drag-handle-length: k-spacing(5) !default;
+$kendo-splitter-drag-handle-length: var( --kendo-splitter-drag-handle-length, #{k-spacing(5)} ) !default;
 /// The thickness of the Splitter drag handle.
 /// @group splitter
-$kendo-splitter-drag-handle-thickness: k-spacing(0.5) !default;
+$kendo-splitter-drag-handle-thickness: var( --kendo-splitter-drag-handle-thickness, #{k-spacing(0.5)} ) !default;
 /// The margin of the Splitter drag handle icon.
 /// @group splitter
-$kendo-splitter-drag-icon-margin: k-spacing(2) !default;
+$kendo-splitter-drag-icon-margin: var( --kendo-splitter-drag-icon-margin, #{k-spacing(2)} ) !default;
 
 /// The horizontal padding of the collapse icon in the Splitter.
 /// @group splitter
-$kendo-splitter-collapse-icon-padding-x: null !default;
+$kendo-splitter-collapse-icon-padding-x: var( --kendo-splitter-collapse-icon-padding-x, null ) !default;
 /// The vertical padding of the collapse icon in the Splitter.
 /// @group splitter
-$kendo-splitter-collapse-icon-padding-y: k-spacing(.5) !default;
+$kendo-splitter-collapse-icon-padding-y: var( --kendo-splitter-collapse-icon-padding-y, #{k-spacing(.5)} ) !default;
 
 /// The background color of the Splitter split bar.
 /// @group splitter
-$kendo-splitbar-bg: k-color(surface) !default;
+$kendo-splitbar-bg: var( --kendo-splitbar-bg, #{k-color(surface)} ) !default;
 /// The text color of the Splitter split bar.
 /// @group splitter
-$kendo-splitbar-text: k-color(on-app-surface) !default;
+$kendo-splitbar-text: var( --kendo-splitbar-text, #{k-color(on-app-surface)} ) !default;
 
 /// The hover background color of the Splitter split bar.
 /// @group splitter
-$kendo-splitbar-hover-bg: k-color(base-hover) !default;
+$kendo-splitbar-hover-bg: var( --kendo-splitbar-hover-bg, #{k-color(base-hover)} ) !default;
 /// The hover text color of the Splitter split bar.
 /// @group splitter
-$kendo-splitbar-hover-text: $kendo-splitbar-text !default;
+$kendo-splitbar-hover-text: var( --kendo-splitbar-hover-text, #{$kendo-splitbar-text} ) !default;
 
 /// The selected background color of the Splitter split bar.
 /// @group splitter
-$kendo-splitbar-selected-bg: k-color(primary) !default;
+$kendo-splitbar-selected-bg: var( --kendo-splitbar-selected-bg, #{k-color(primary)} ) !default;
 /// The selected text color of the Splitter split bar.
 /// @group splitter
-$kendo-splitbar-selected-text: k-color(surface-alt) !default;
+$kendo-splitbar-selected-text: var( --kendo-splitbar-selected-text, #{k-color(surface-alt)} ) !default;
 
 /// The size of the Splitter static split bar.
 /// @group splitter
-$kendo-splitter-splitbar-static-size: k-spacing(0.5) !default;
+$kendo-splitter-splitbar-static-size: var( --kendo-splitter-splitbar-static-size, #{k-spacing(0.5)} ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/splitter/_variables.scss" with (
+    $kendo-splitter-border-width: $kendo-splitter-border-width,
+    $kendo-splitter-font-family: $kendo-splitter-font-family,
+    $kendo-splitter-font-size: $kendo-splitter-font-size,
+    $kendo-splitter-line-height: $kendo-splitter-line-height,
+    $kendo-splitter-bg: $kendo-splitter-bg,
+    $kendo-splitter-text: $kendo-splitter-text,
+    $kendo-splitter-border: $kendo-splitter-border,
+    $kendo-splitter-splitbar-size: $kendo-splitter-splitbar-size,
+    $kendo-splitter-drag-handle-length: $kendo-splitter-drag-handle-length,
+    $kendo-splitter-drag-handle-thickness: $kendo-splitter-drag-handle-thickness,
+    $kendo-splitter-drag-icon-margin: $kendo-splitter-drag-icon-margin,
+    $kendo-splitter-collapse-icon-padding-x: $kendo-splitter-collapse-icon-padding-x,
+    $kendo-splitter-collapse-icon-padding-y: $kendo-splitter-collapse-icon-padding-y,
+    $kendo-splitbar-bg: $kendo-splitbar-bg,
+    $kendo-splitbar-text: $kendo-splitbar-text,
+    $kendo-splitbar-hover-bg: $kendo-splitbar-hover-bg,
+    $kendo-splitbar-hover-text: $kendo-splitbar-hover-text,
+    $kendo-splitbar-selected-bg: $kendo-splitbar-selected-bg,
+    $kendo-splitbar-selected-text: $kendo-splitbar-selected-text
+);