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

Merged
simeonoff merged 18 commits into from
Apr 14, 2026
Merged

feat(splitter): update splitter styles #16909

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
18 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
f526fd4
Merge branch 'master' into didimmova/update-splitter
didimmova Mar 5, 2026
3a9f074
fix(splitter): use base-font-size var and splitter-size var
didimmova Mar 6, 2026
4e54bbc
Merge branch 'master' into didimmova/update-splitter
didimmova Mar 12, 2026
04cefce
Merge branch 'master' into didimmova/update-splitter
didimmova Mar 26, 2026
b57299f
Update projects/igniteui-angular/core/src/core/styles/components/spli…
didimmova Mar 26, 2026
1929604
Update projects/igniteui-angular/core/src/core/styles/components/spli…
didimmova Mar 26, 2026
af5abc6
Merge branch 'master' into didimmova/update-splitter
desig9stein Mar 26, 2026
762eb1d
Merge branch 'master' into didimmova/update-splitter
simeonoff Apr 14, 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 {
Comment thread
didimmova marked this conversation as resolved.
Outdated
@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
80 changes: 54 additions & 26 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,14 +15,18 @@

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

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

@desig9stein desig9stein Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we have a global --ig-base-font-size, why not using it?


//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);

%igx-splitter-base {
&[aria-orientation='horizontal'] {
padding-block: rem(1px);

[dir='rtl'] & {
flex-direction: row-reverse !important;
}
Expand Down Expand Up @@ -126,11 +130,9 @@
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;
transition: background .15s $out-quad !important;

@if $variant != 'indigo' {
@extend %hide-controls;
Expand All @@ -156,31 +158,36 @@

&: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;
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');

&.igx-splitter-bar--collapsible {
@extend %show-controls;
@extend %expand-bars;
}
%indigo-splitter-bar.igx-splitter-bar--collapsible {
@extend %show-controls;
@extend %expand-bars;
}
}

&:hover {
box-shadow: none;
transition: box-shadow .25s ease-out;
}
}

%igx-splitter-bar--active {
background: var-get($theme, 'bar-color-active');
}

%igx-splitter-bar--vertical {
padding-inline: rem(1px);
flex-direction: column;
height: 100%;

Expand All @@ -202,6 +209,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 +242,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 +253,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 +269,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 +288,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');
Copy link
Copy Markdown
Contributor

@desig9stein desig9stein Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

var-get($theme, 'size') is used in a lot of places; better store it in a variable


&::before {
Expand All @@ -284,4 +307,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