feat(splitter): update splitter styles

projects/igniteui-angular/core/src/core/styles/components/splitter/_splitter-component.scss

@@ -16,7 +16,7 @@
         @extend %igx-splitter-base !optional;
 
         @include b(#{$this}-bar-host) {
-            &:focus {
+            &:focus-visible {
                 @extend %igx-splitter-bar--focus !optional;
             }
         }
@@ -39,9 +39,35 @@
                 @extend %igx-splitter-expander--end !optional;
             }
 
+            &:active {
+                @extend %igx-splitter-bar--active !optional;
+
+                @include e(handle) {
+                    @extend %igx-splitter-handle--active !optional;
+                }
+
+                @include e(expander, 'start') {
+                    @extend %igx-splitter-expander--start--active !optional;
+                }
+
+                @include e(expander, 'end') {
+                    @extend %igx-splitter-expander--end--active !optional;
+                }
+            }
+
             @include m('vertical') {
                 @extend %igx-splitter-bar--vertical !optional;
 
+                &:active {
+                    @include e(expander, 'start') {
+                        @extend %igx-splitter-expander--start-vertical--active !optional;
+                    }
+
+                    @include e(expander, 'end') {
+                        @extend %igx-splitter-expander--end-vertical--active !optional;
+                    }
+                }
+
                 @include e(handle) {
                     @extend %igx-splitter-handle !optional;
                     @extend %igx-splitter-handle--vertical !optional;

projects/igniteui-angular/core/src/core/styles/components/splitter/_splitter-theme.scss

@@ -9,19 +9,21 @@
 @mixin splitter($theme) {
     @include css-vars($theme);
     $splitter-color: var-get($theme, 'bar-color');
+    $splitter-size: var-get($theme, 'size');
     $hitbox-size: rem(4px);
     $debug-hitbox: false;
     $hitbox-debug-color: rgba(coral, .24);
 
     $variant: map.get($theme, '_meta', 'theme');
 
-    //splitter-size + borders
-    $splitter-size: unitless(map.get($theme, 'size')) + 2;
-
-    //calculate the value for the slim(indigo) splitter
-    $slim-splitter: calc( 1 / $splitter-size);
+    // Get unitless value from theme for use in CSS custom properties
+    $size-unitless: unitless(map.get($theme, 'size'));
 
     %igx-splitter-base {
+        // Define CSS custom properties that use --ig-base-font-size for dynamic calculations
+        --splitter-size: calc(#{$size-unitless} * var(--ig-base-font-size, 16px) + 2px);
+        --slim-splitter: calc(1 / calc(var(--splitter-size) / 1px));
+
         &[aria-orientation='horizontal'] {
             [dir='rtl'] & {
                 flex-direction: row-reverse !important;
@@ -37,7 +39,7 @@
         background: if($debug-hitbox, $hitbox-debug-color, transparent);
 
         @if $variant == 'indigo' {
-            height: rem($splitter-size * 4px);
+            height: calc(var(--splitter-size) * 4);
         }
     }
 
@@ -46,23 +48,23 @@
         height: 100%;
 
         @if $variant == 'indigo' {
-            width: rem($splitter-size * 4px);
+            width: calc(var(--splitter-size) * 4);
         }
     }
 
     %hide-controls {
         %igx-splitter-handle,
         %igx-splitter-expander {
             opacity: 0;
-            transition: opacity .25s .5s ease;
+            transition: opacity .25s .3s ease;
             pointer-events: none;
         }
     }
 
     %show-controls {
         %igx-splitter-handle,
         %igx-splitter-expander {
-            opacity: 1;
+            opacity: .68;
             transition: opacity .25s ease;
             pointer-events: auto;
         }
@@ -76,31 +78,39 @@
         [aria-orientation='vertical'] & {
             transform: scaleY(1);
         }
+
         transition-delay: 0s !important;
     }
 
     %indigo-splitter-bar {
         @extend %hide-controls;
+        transition: all .25s .3s $in-out-quad !important;
 
         [aria-orientation='horizontal'] & {
-            transform: scaleX($slim-splitter);
+            transform: scaleX(var(--slim-splitter));
         }
 
         [aria-orientation='vertical'] & {
-            transform: scaleY($slim-splitter);
+            transform: scaleY(var(--slim-splitter));
         }
 
-        &.igx-splitter-bar--collapsible {
-            transition: all .25s .5s $in-out-quad !important;
+        &:hover {
+            @extend %expand-bars;
+        }
 
+        &.igx-splitter-bar--collapsible {
             &::before,
             &::after {
                 transition-delay: 2s;
             }
 
             &:hover {
-                @extend %show-controls;
-                @extend %expand-bars;
+                %igx-splitter-handle,
+                %igx-splitter-expander {
+                    opacity: 1;
+                    transition: opacity .25s ease;
+                    pointer-events: auto;
+                }
 
                 &::before,
                 &::after {
@@ -126,17 +136,23 @@
         flex-grow: 1;
         justify-content: center;
         align-items: center;
-        background: $splitter-color;
-        border: rem(1px) solid $splitter-color;
+        background: hsla(from $splitter-color h s l / 0.68);
         z-index: 99;
-        opacity: .68;
-        transition: opacity .15s $out-quad !important;
+        padding-block: rem(1px);
 
         @if $variant != 'indigo' {
+            transition: background .15s $out-quad !important;
             @extend %hide-controls;
 
             &.igx-splitter-bar--collapsible {
                 @extend %show-controls;
+
+                &:hover {
+                    %igx-splitter-handle,
+                    %igx-splitter-expander {
+                        opacity: 1;
+                    }
+                }
             }
         }
 
@@ -156,31 +172,41 @@
 
         &:hover {
             transition: all .25s ease-out;
-            opacity: 1;
+            background: $splitter-color;
         }
     }
 
     %igx-splitter-bar--focus {
         // Remove the default browser outline styles
-        outline: transparent solid rem(1px);
-        box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'focus-color');
+        outline: none;
+        box-shadow: 0 0 0 rem(2px) var-get($theme, 'focus-color');
+        transition: box-shadow .15s ease-in if($variant == 'indigo', .1s, 0s);
+        z-index: 100;
 
         @if $variant == 'indigo' {
-            box-shadow: none;
-
             %indigo-splitter-bar {
-                background: var-get($theme, 'focus-color');
-                border-color: var-get($theme, 'focus-color');
+                @extend %expand-bars;
 
                 &.igx-splitter-bar--collapsible {
-                    @extend %show-controls;
-                    @extend %expand-bars;
+                     @extend %show-controls;
+
+                     &:hover {
+                        %igx-splitter-handle,
+                        %igx-splitter-expander {
+                            opacity: 1;
+                        }
+                    }
                 }
             }
         }
     }
 
+    %igx-splitter-bar--active {
+        background: var-get($theme, 'bar-color-active');
+    }
+
     %igx-splitter-bar--vertical {
+        padding: 0 rem(1px);
         flex-direction: column;
         height: 100%;
 
@@ -202,14 +228,18 @@
         border-radius: var-get($theme, 'border-radius');
     }
 
+    %igx-splitter-handle--active {
+        background: var-get($theme, 'handle-color-active');
+    }
+
     %igx-splitter-handle--horizontal {
         width: 25%;
-        height: var-get($theme, 'size');
+        height: $splitter-size;
         margin: 0 rem(48px);
     }
 
     %igx-splitter-handle--vertical {
-        width: var-get($theme, 'size');
+        width: $splitter-size;
         height: 25%;
         margin: rem(48px) 0;
     }
@@ -224,14 +254,14 @@
         position: relative;
         width: 0;
         height: 0;
-        border-inline-end: var-get($theme, 'size') solid transparent;
-        border-inline-start: var-get($theme, 'size') solid transparent;
+        border-inline-end: $splitter-size solid transparent;
+        border-inline-start: $splitter-size solid transparent;
         cursor: pointer;
         z-index: 1;
     }
 
     %igx-splitter-expander--start {
-        border-bottom: var-get($theme, 'size') solid var-get($theme, 'expander-color');
+        border-block-end: $splitter-size solid var-get($theme, 'expander-color');
 
         &::before {
             @extend %igx-splitter-hitbox;
@@ -242,9 +272,12 @@
         }
     }
 
+    %igx-splitter-expander--start--active {
+        border-block-end-color: var-get($theme, 'expander-color-active');
+    }
+
     %igx-splitter-expander--end {
-        border-bottom: unset;
-        border-top: var-get($theme, 'size') solid var-get($theme, 'expander-color');
+        border-block-start: $splitter-size solid var-get($theme, 'expander-color');
 
         &::before {
             @extend %igx-splitter-hitbox;
@@ -255,10 +288,14 @@
         }
     }
 
+    %igx-splitter-expander--end--active {
+        border-block-start-color: var-get($theme, 'expander-color-active');
+    }
+
     %igx-splitter-expander--start-vertical {
-        border-top: var-get($theme, 'size') solid transparent;
-        border-inline-end: var-get($theme, 'size') solid var-get($theme, 'expander-color');
-        border-bottom: var-get($theme, 'size') solid transparent;
+        border-block-start: $splitter-size solid transparent;
+        border-inline-end: $splitter-size solid var-get($theme, 'expander-color');
+        border-block-end: $splitter-size solid transparent;
         border-inline-start: unset;
 
         &::before {
@@ -270,11 +307,16 @@
         }
     }
 
+    %igx-splitter-expander--start-vertical--active {
+        border-block-end-color: transparent;
+        border-inline-end-color: var-get($theme, 'expander-color-active');
+    }
+
     %igx-splitter-expander--end-vertical {
-        border-top: var-get($theme, 'size') solid transparent;
+        border-block-start: $splitter-size solid transparent;
         border-inline-end: unset;
-        border-bottom: var-get($theme, 'size') solid transparent;
-        border-inline-start: var-get($theme, 'size') solid var-get($theme, 'expander-color');
+        border-block-end: $splitter-size solid transparent;
+        border-inline-start: $splitter-size solid var-get($theme, 'expander-color');
 
         &::before {
             @extend %igx-splitter-hitbox;
@@ -284,4 +326,9 @@
             width: calc(#{map.get($theme, 'size')} * 3);
         }
     }
+
+    %igx-splitter-expander--end-vertical--active {
+        border-block-start-color: transparent;
+        border-inline-start-color: var-get($theme, 'expander-color-active');
+    }
 }