Skip to content

feat(splitter): update splitter styles #16909

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
didimmova wants to merge 10 commits into
base: master
Choose a base branch
from
+101 −28
Open

feat(splitter): update splitter styles #16909

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
add746e
feat(splitter): update splitter styles
didimmova Feb 16, 2026
2e3bd37
styles(splitter): use background transiton, not opacity
didimmova Feb 17, 2026
4896899
Merge branch 'master' into didimmova/update-splitter
didimmova Feb 19, 2026
21b32cf
Merge branch 'master' into didimmova/update-splitter
kacheshmarova Feb 20, 2026
363e751
Merge branch 'master' into didimmova/update-splitter
desig9stein Feb 20, 2026
6eb365c
Merge branch 'master' into didimmova/update-splitter
didimmova Mar 2, 2026
6fba3da
style(splitter): update splitter opacity styles
didimmova Mar 2, 2026
61178cd
feat(splitter): fix latest issues
didimmova Mar 2, 2026
0e86417
chore(splitter): fix transitions
didimmova Mar 2, 2026
3fd8c71
fix(splitter): expand non-collapsible splitterin indigo
didimmova Mar 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 27 additions & 1 deletion projects/igniteui-angular/core/src/core/styles/components/splitter/_splitter-component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
@extend %igx-splitter-base !optional;

@include b(#{$this}-bar-host) {
&:focus {
&:focus-visible {
@extend %igx-splitter-bar--focus !optional;
}
}
Expand All @@ -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;
Expand Down
101 changes: 74 additions & 27 deletions projects/igniteui-angular/core/src/core/styles/components/splitter/_splitter-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,10 @@

$variant: map.get($theme, '_meta', 'theme');

//splitter-size + borders
$splitter-size: unitless(map.get($theme, 'size')) + 2;
$base-font-size: 16;

//splitter-size (convert rem to px) + padding
$splitter-size: unitless(map.get($theme, 'size')) * $base-font-size + 2;

//calculate the value for the slim(indigo) splitter
$slim-splitter: calc( 1 / $splitter-size);
Expand Down Expand Up @@ -62,7 +64,7 @@
%show-controls {
%igx-splitter-handle,
%igx-splitter-expander {
opacity: 1;
opacity: .68;
transition: opacity .25s ease;
pointer-events: auto;
}
Expand All @@ -76,11 +78,13 @@
[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);
Expand All @@ -90,17 +94,23 @@
transform: scaleY($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 {
Expand All @@ -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;
}
}
}
}

Expand All @@ -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%;

Expand All @@ -202,6 +228,10 @@
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');
Expand Down Expand Up @@ -231,7 +261,7 @@
}

%igx-splitter-expander--start {
border-bottom: var-get($theme, 'size') solid var-get($theme, 'expander-color');
border-block-end: var-get($theme, 'size') solid var-get($theme, 'expander-color');

&::before {
@extend %igx-splitter-hitbox;
Expand All @@ -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: var-get($theme, 'size') solid var-get($theme, 'expander-color');

&::before {
@extend %igx-splitter-hitbox;
Expand All @@ -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-block-start: 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-end: var-get($theme, 'size') solid transparent;
border-inline-start: unset;

&::before {
Expand All @@ -270,10 +307,15 @@
}
}

%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: var-get($theme, 'size') solid transparent;
border-inline-end: unset;
border-bottom: var-get($theme, 'size') solid transparent;
border-block-end: var-get($theme, 'size') solid transparent;
border-inline-start: var-get($theme, 'size') solid var-get($theme, 'expander-color');

&::before {
Expand All @@ -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');
}
}
Loading