Skip to content

Commit d665827

Browse files
didimmovakacheshmarovadesig9steinCopilotsimeonoff
authored
feat(splitter): update splitter styles (#16909)
* feat(splitter): update splitter styles * styles(splitter): use background transiton, not opacity * style(splitter): update splitter opacity styles * feat(splitter): fix latest issues * chore(splitter): fix transitions * fix(splitter): expand non-collapsible splitterin indigo * fix(splitter): use base-font-size var and splitter-size var * Update projects/igniteui-angular/core/src/core/styles/components/splitter/_splitter-theme.scss Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update projects/igniteui-angular/core/src/core/styles/components/splitter/_splitter-component.scss Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: Vasya Kacheshmarova <vasq1989@gmail.com> Co-authored-by: Marin Popov <desig9stein@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>
1 parent b1ded1d commit d665827

File tree

2 files changed

+115
-42
lines changed

2 files changed

+115
-42
lines changed

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

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
@extend %igx-splitter-base !optional;
1717

1818
@include b(#{$this}-bar-host) {
19-
&:focus {
19+
&:focus-visible {
2020
@extend %igx-splitter-bar--focus !optional;
2121
}
2222
}
@@ -39,9 +39,35 @@
3939
@extend %igx-splitter-expander--end !optional;
4040
}
4141

42+
&:active {
43+
@extend %igx-splitter-bar--active !optional;
44+
45+
@include e(handle) {
46+
@extend %igx-splitter-handle--active !optional;
47+
}
48+
49+
@include e(expander, 'start') {
50+
@extend %igx-splitter-expander--start--active !optional;
51+
}
52+
53+
@include e(expander, 'end') {
54+
@extend %igx-splitter-expander--end--active !optional;
55+
}
56+
}
57+
4258
@include m('vertical') {
4359
@extend %igx-splitter-bar--vertical !optional;
4460

61+
&:active {
62+
@include e(expander, 'start') {
63+
@extend %igx-splitter-expander--start-vertical--active !optional;
64+
}
65+
66+
@include e(expander, 'end') {
67+
@extend %igx-splitter-expander--end-vertical--active !optional;
68+
}
69+
}
70+
4571
@include e(handle) {
4672
@extend %igx-splitter-handle !optional;
4773
@extend %igx-splitter-handle--vertical !optional;

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

Lines changed: 88 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,21 @@
99
@mixin splitter($theme) {
1010
@include css-vars($theme);
1111
$splitter-color: var-get($theme, 'bar-color');
12+
$splitter-size: var-get($theme, 'size');
1213
$hitbox-size: rem(4px);
1314
$debug-hitbox: false;
1415
$hitbox-debug-color: rgba(coral, .24);
1516

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

18-
//splitter-size + borders
19-
$splitter-size: unitless(map.get($theme, 'size')) + 2;
20-
21-
//calculate the value for the slim(indigo) splitter
22-
$slim-splitter: calc( 1 / $splitter-size);
19+
// Get unitless value from theme for use in CSS custom properties
20+
$size-unitless: unitless(map.get($theme, 'size'));
2321

2422
%igx-splitter-base {
23+
// Define CSS custom properties that use --ig-base-font-size for dynamic calculations
24+
--splitter-size: calc(#{$size-unitless} * var(--ig-base-font-size, 16px) + 2px);
25+
--slim-splitter: calc(1 / calc(var(--splitter-size) / 1px));
26+
2527
&[aria-orientation='horizontal'] {
2628
[dir='rtl'] & {
2729
flex-direction: row-reverse !important;
@@ -37,7 +39,7 @@
3739
background: if($debug-hitbox, $hitbox-debug-color, transparent);
3840

3941
@if $variant == 'indigo' {
40-
height: rem($splitter-size * 4px);
42+
height: calc(var(--splitter-size) * 4);
4143
}
4244
}
4345

@@ -46,23 +48,23 @@
4648
height: 100%;
4749

4850
@if $variant == 'indigo' {
49-
width: rem($splitter-size * 4px);
51+
width: calc(var(--splitter-size) * 4);
5052
}
5153
}
5254

5355
%hide-controls {
5456
%igx-splitter-handle,
5557
%igx-splitter-expander {
5658
opacity: 0;
57-
transition: opacity .25s .5s ease;
59+
transition: opacity .25s .3s ease;
5860
pointer-events: none;
5961
}
6062
}
6163

6264
%show-controls {
6365
%igx-splitter-handle,
6466
%igx-splitter-expander {
65-
opacity: 1;
67+
opacity: .68;
6668
transition: opacity .25s ease;
6769
pointer-events: auto;
6870
}
@@ -76,31 +78,39 @@
7678
[aria-orientation='vertical'] & {
7779
transform: scaleY(1);
7880
}
81+
7982
transition-delay: 0s !important;
8083
}
8184

8285
%indigo-splitter-bar {
8386
@extend %hide-controls;
87+
transition: all .25s .3s $in-out-quad !important;
8488

8589
[aria-orientation='horizontal'] & {
86-
transform: scaleX($slim-splitter);
90+
transform: scaleX(var(--slim-splitter));
8791
}
8892

8993
[aria-orientation='vertical'] & {
90-
transform: scaleY($slim-splitter);
94+
transform: scaleY(var(--slim-splitter));
9195
}
9296

93-
&.igx-splitter-bar--collapsible {
94-
transition: all .25s .5s $in-out-quad !important;
97+
&:hover {
98+
@extend %expand-bars;
99+
}
95100

101+
&.igx-splitter-bar--collapsible {
96102
&::before,
97103
&::after {
98104
transition-delay: 2s;
99105
}
100106

101107
&:hover {
102-
@extend %show-controls;
103-
@extend %expand-bars;
108+
%igx-splitter-handle,
109+
%igx-splitter-expander {
110+
opacity: 1;
111+
transition: opacity .25s ease;
112+
pointer-events: auto;
113+
}
104114

105115
&::before,
106116
&::after {
@@ -126,17 +136,23 @@
126136
flex-grow: 1;
127137
justify-content: center;
128138
align-items: center;
129-
background: $splitter-color;
130-
border: rem(1px) solid $splitter-color;
139+
background: hsla(from $splitter-color h s l / 0.68);
131140
z-index: 99;
132-
opacity: .68;
133-
transition: opacity .15s $out-quad !important;
141+
padding-block: rem(1px);
134142

135143
@if $variant != 'indigo' {
144+
transition: background .15s $out-quad !important;
136145
@extend %hide-controls;
137146

138147
&.igx-splitter-bar--collapsible {
139148
@extend %show-controls;
149+
150+
&:hover {
151+
%igx-splitter-handle,
152+
%igx-splitter-expander {
153+
opacity: 1;
154+
}
155+
}
140156
}
141157
}
142158

@@ -156,31 +172,41 @@
156172

157173
&:hover {
158174
transition: all .25s ease-out;
159-
opacity: 1;
175+
background: $splitter-color;
160176
}
161177
}
162178

163179
%igx-splitter-bar--focus {
164180
// Remove the default browser outline styles
165-
outline: transparent solid rem(1px);
166-
box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'focus-color');
181+
outline: none;
182+
box-shadow: 0 0 0 rem(2px) var-get($theme, 'focus-color');
183+
transition: box-shadow .15s ease-in if($variant == 'indigo', .1s, 0s);
184+
z-index: 100;
167185

168186
@if $variant == 'indigo' {
169-
box-shadow: none;
170-
171187
%indigo-splitter-bar {
172-
background: var-get($theme, 'focus-color');
173-
border-color: var-get($theme, 'focus-color');
188+
@extend %expand-bars;
174189

175190
&.igx-splitter-bar--collapsible {
176-
@extend %show-controls;
177-
@extend %expand-bars;
191+
@extend %show-controls;
192+
193+
&:hover {
194+
%igx-splitter-handle,
195+
%igx-splitter-expander {
196+
opacity: 1;
197+
}
198+
}
178199
}
179200
}
180201
}
181202
}
182203

204+
%igx-splitter-bar--active {
205+
background: var-get($theme, 'bar-color-active');
206+
}
207+
183208
%igx-splitter-bar--vertical {
209+
padding: 0 rem(1px);
184210
flex-direction: column;
185211
height: 100%;
186212

@@ -202,14 +228,18 @@
202228
border-radius: var-get($theme, 'border-radius');
203229
}
204230

231+
%igx-splitter-handle--active {
232+
background: var-get($theme, 'handle-color-active');
233+
}
234+
205235
%igx-splitter-handle--horizontal {
206236
width: 25%;
207-
height: var-get($theme, 'size');
237+
height: $splitter-size;
208238
margin: 0 rem(48px);
209239
}
210240

211241
%igx-splitter-handle--vertical {
212-
width: var-get($theme, 'size');
242+
width: $splitter-size;
213243
height: 25%;
214244
margin: rem(48px) 0;
215245
}
@@ -224,14 +254,14 @@
224254
position: relative;
225255
width: 0;
226256
height: 0;
227-
border-inline-end: var-get($theme, 'size') solid transparent;
228-
border-inline-start: var-get($theme, 'size') solid transparent;
257+
border-inline-end: $splitter-size solid transparent;
258+
border-inline-start: $splitter-size solid transparent;
229259
cursor: pointer;
230260
z-index: 1;
231261
}
232262

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

236266
&::before {
237267
@extend %igx-splitter-hitbox;
@@ -242,9 +272,12 @@
242272
}
243273
}
244274

275+
%igx-splitter-expander--start--active {
276+
border-block-end-color: var-get($theme, 'expander-color-active');
277+
}
278+
245279
%igx-splitter-expander--end {
246-
border-bottom: unset;
247-
border-top: var-get($theme, 'size') solid var-get($theme, 'expander-color');
280+
border-block-start: $splitter-size solid var-get($theme, 'expander-color');
248281

249282
&::before {
250283
@extend %igx-splitter-hitbox;
@@ -255,10 +288,14 @@
255288
}
256289
}
257290

291+
%igx-splitter-expander--end--active {
292+
border-block-start-color: var-get($theme, 'expander-color-active');
293+
}
294+
258295
%igx-splitter-expander--start-vertical {
259-
border-top: var-get($theme, 'size') solid transparent;
260-
border-inline-end: var-get($theme, 'size') solid var-get($theme, 'expander-color');
261-
border-bottom: var-get($theme, 'size') solid transparent;
296+
border-block-start: $splitter-size solid transparent;
297+
border-inline-end: $splitter-size solid var-get($theme, 'expander-color');
298+
border-block-end: $splitter-size solid transparent;
262299
border-inline-start: unset;
263300

264301
&::before {
@@ -270,11 +307,16 @@
270307
}
271308
}
272309

310+
%igx-splitter-expander--start-vertical--active {
311+
border-block-end-color: transparent;
312+
border-inline-end-color: var-get($theme, 'expander-color-active');
313+
}
314+
273315
%igx-splitter-expander--end-vertical {
274-
border-top: var-get($theme, 'size') solid transparent;
316+
border-block-start: $splitter-size solid transparent;
275317
border-inline-end: unset;
276-
border-bottom: var-get($theme, 'size') solid transparent;
277-
border-inline-start: var-get($theme, 'size') solid var-get($theme, 'expander-color');
318+
border-block-end: $splitter-size solid transparent;
319+
border-inline-start: $splitter-size solid var-get($theme, 'expander-color');
278320

279321
&::before {
280322
@extend %igx-splitter-hitbox;
@@ -284,4 +326,9 @@
284326
width: calc(#{map.get($theme, 'size')} * 3);
285327
}
286328
}
329+
330+
%igx-splitter-expander--end-vertical--active {
331+
border-block-start-color: transparent;
332+
border-inline-start-color: var-get($theme, 'expander-color-active');
333+
}
287334
}

0 commit comments

Comments
 (0)