feat(splitter): add fluent styles

packages/fluent/scss/index.scss

@@ -119,7 +119,7 @@
 @use "card";
 @use "expansion-panel";
 @use "panelbar";
-// @use "splitter";
+@use "splitter";
 @use "tilelayout";
 
 
@@ -281,7 +281,7 @@
     @include card.styles();
     @include expansion-panel.styles();
     @include panelbar.styles();
-    // @include splitter.styles();
+    @include splitter.styles();
     @include tilelayout.styles();
 
 

packages/fluent/scss/splitter/_layout.scss

@@ -0,0 +1,208 @@
+@use "../core" as *;
+@use "_variables.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: $rgba-transparent;
+
+        // Pane
+        .k-pane {
+            overflow: hidden;
+        }
+        .k-scrollable {
+            overflow: auto;
+        }
+        .k-splitter-resizing {
+            overflow: hidden;
+        }
+
+        // Nested
+        .k-pane > & {
+            border-width: 0;
+            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;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .k-collapse-prev,
+        .k-collapse-next {
+            cursor: pointer;
+        }
+
+        .k-icon {
+            font-size: var( --kendo-splitter-resize-icon-size, #{$kendo-splitter-resize-icon-size} );
+        }
+
+    }
+
+    .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;
+    }
+
+    .k-splitbar-static-horizontal {
+        width: var( --kendo-splitter-splitbar-static-size, #{$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;
+        }
+    }
+
+    .k-splitbar-horizontal .k-collapse-prev {
+        margin-block-end: var( --kendo-splitter-drag-icon-margin, #{$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} );
+    }
+
+    .k-splitbar-vertical .k-collapse-prev {
+        margin-inline-end: var( --kendo-splitter-drag-icon-margin, #{$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-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;
+            display: block; // ie10 + flex
+            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] {
+                // sass-lint:disable-block no-important
+                // hidden panes need to be zero-width to allow pane animation
+                flex: 0 1 0% !important;
+                overflow: hidden !important;
+                display: block !important;
+            }
+        }
+
+        &.k-splitter-horizontal {
+            flex-direction: row;
+
+            &[dir="rtl"] {
+                > .k-splitbar {
+                    > .k-collapse-next,
+                    > .k-collapse-prev {
+                        transform: scaleX(-1);
+                    }
+                }
+            }
+        }
+        &.k-splitter-vertical {
+            flex-direction: column;
+        }
+    }
+}

packages/fluent/scss/splitter/_theme.scss

@@ -0,0 +1,36 @@
+@use "../core/mixins" 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} );
+    }
+}

packages/fluent/scss/splitter/_variables.scss

@@ -0,0 +1,66 @@
+@use "../core/" as *;
+@use "../core/color-system" as *;
+
+/// Width of the border around the splitter.
+/// @group splitter
+$kendo-splitter-border-width: map-get( $kendo-spacing, hair ) !default;
+/// Font size of the splitter.
+/// @group splitter
+$kendo-splitter-font-size: var( --kendo-font-size, initial ) !default;
+/// Line hegiht of the splitter.
+/// @group splitter
+$kendo-splitter-line-height: var( --kendo-line-height, initial ) !default;
+/// Font family of the splitter.
+/// @group splitter
+$kendo-splitter-font-family: var( --kendo-font-family, initial ) !default;
+
+/// Background color of the splitter.
+/// @group splitter
+$kendo-splitter-bg: var( --kendo-component-bg, initial ) !default;
+/// Text color of the splitter.
+/// @group splitter
+$kendo-splitter-text: var( --kendo-component-text, initial ) !default;
+/// Border color of the splitter.
+/// @group splitter
+$kendo-splitter-border: var( --kendo-component-border, initial ) !default;
+
+/// Size of the splitter splitbar.
+/// @group splitter
+$kendo-splitter-splitbar-size: map-get( $kendo-spacing, 2 ) !default;
+/// Icon size of the splitter splitbar.
+/// @group splitter
+$kendo-splitter-resize-icon-size: calc( map-get( $kendo-spacing, 2 ) + map-get( $kendo-spacing, thin ) ) !default;
+/// Length of the splitter drag handle.
+/// @group splitter
+$kendo-splitter-drag-handle-length: map-get( $kendo-spacing, 5 ) !default;
+/// thickness of the splitter drag handle.
+/// @group splitter
+$kendo-splitter-drag-handle-thickness: map-get( $kendo-spacing, thin ) !default;
+/// Margin of the splitter drag handle icon.
+/// @group splitter
+$kendo-splitter-drag-icon-margin: calc( map-get( $kendo-spacing, 2 ) - map-get( $kendo-spacing, hair ) ) !default;
+
+/// Background color of the splitter splitbar.
+/// @group splitter
+$kendo-splitbar-bg: get-theme-color-var( neutral-10 ) !default;
+/// Text color of the splitter splitbar.
+/// @group splitter
+$kendo-splitbar-text: var( $kendo-component-text, initial ) !default;
+
+/// Hover background color of the splitter splitbar.
+/// @group splitter
+$kendo-splitbar-hover-bg: get-theme-color-var( neutral-20 ) !default;
+/// Hover text color of the splitter splitbar.
+/// @group splitter
+$kendo-splitbar-hover-text: $kendo-splitbar-text !default;
+
+/// Selected background color of the splitter splitbar.
+/// @group splitter
+$kendo-splitbar-selected-bg: var( --kendo-selected-bg, initial ) !default;
+/// Selected text color of the splitter splitbar.
+/// @group splitter
+$kendo-splitbar-selected-text: var( --kendo-selected-text, initial ) !default;
+
+/// Size of the splitter static splitbar.
+/// @group splitter
+$kendo-splitter-splitbar-static-size: map-get( $kendo-spacing, thin ) !default;

packages/fluent/scss/splitter/index.scss

@@ -0,0 +1,25 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "splitter",
+    dependencies: (
+        "icon"
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "splitter" ) {
+        @include kendo-splitter--layout();
+        @include kendo-splitter--theme();
+    }
+}