Skip to content

Commit cb515ea

Browse files
SisIvanovaSisIvanova
authored
fix(combo/select): toggle button styles (#15375)
1 parent adb1c79 commit cb515ea

File tree

4 files changed

+120
-7
lines changed

4 files changed

+120
-7
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -261,7 +261,6 @@
261261
}
262262
}
263263

264-
%form-group-bundle:not(%form-group-bundle--disabled):hover,
265264
%form-group-bundle:not(%form-group-bundle--disabled):focus-within {
266265
%igx-combo__toggle-button {
267266
color: var-get($theme, 'toggle-button-foreground-focus');
@@ -274,6 +273,14 @@
274273
}
275274
}
276275

276+
@if $variant == 'indigo' {
277+
%form-group-bundle:not(%form-group-bundle--disabled):hover {
278+
%igx-combo__toggle-button {
279+
color: var-get($theme, 'toggle-button-foreground-focus');
280+
}
281+
}
282+
}
283+
277284
.igx-input-group--filled {
278285
%igx-combo__toggle-button {
279286
color: var-get($theme, 'toggle-button-foreground-filled');
@@ -293,8 +300,10 @@
293300
}
294301

295302
.igx-input-group.igx-input-group--focused:not(.igx-input-group--box) {
296-
%igx-combo__toggle-button {
297-
background: var-get($theme, 'toggle-button-background-focus--border');
303+
@if $variant != 'fluent' {
304+
%igx-combo__toggle-button {
305+
background: var-get($theme, 'toggle-button-background-focus--border');
306+
}
298307
}
299308
}
300309

‎projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,24 @@
244244
}
245245
}
246246

247+
@include m(warning) {
248+
@include e(label) {
249+
@extend %form-group-label--warning !optional;
250+
}
251+
252+
@include e(line) {
253+
@extend %form-group-line--warning !optional;
254+
}
255+
256+
@include e(hint) {
257+
@extend %form-group-helper--warning !optional;
258+
}
259+
260+
@include e(bundle) {
261+
@extend %form-group-bundle--warning !optional;
262+
}
263+
}
264+
247265
@include m(invalid) {
248266
@include e(label) {
249267
@extend %form-group-label--error !optional;

‎projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss‎

Lines changed: 78 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -512,6 +512,7 @@
512512
}
513513

514514
%form-group-display--disabled {
515+
pointer-events: none;
515516
user-select: none;
516517
color: var-get($theme, 'disabled-text-color') !important;
517518

@@ -613,6 +614,13 @@
613614
caret-color: initial;
614615
}
615616

617+
%form-group-bundle--warning {
618+
&::after {
619+
border-block-end-color: var-get($theme, 'warning-secondary-color');
620+
}
621+
caret-color: initial;
622+
}
623+
616624
%form-group-bundle--error {
617625
&::after {
618626
border-block-end-color: var-get($theme, 'error-secondary-color');
@@ -803,6 +811,25 @@
803811
&::after {
804812
display: none;
805813
}
814+
815+
&:hover {
816+
%form-group-bundle-start {
817+
border-color: var-get($theme, 'hover-border-color');
818+
}
819+
820+
%igx-input-group__filler {
821+
border-color: var-get($theme, 'hover-border-color');
822+
}
823+
824+
%igx-input-group__notch {
825+
border-block-start-color: var-get($theme, 'hover-border-color');
826+
border-block-end-color: var-get($theme, 'hover-border-color');
827+
}
828+
829+
%form-group-bundle-end {
830+
border-color: var-get($theme, 'hover-border-color');
831+
}
832+
}
806833
}
807834

808835
%form-group-bundle-border--disabled {
@@ -981,6 +1008,21 @@
9811008
}
9821009
}
9831010

1011+
%form-group-label--focused-border:not(:is(
1012+
%form-group-border--error,
1013+
%form-group-border--warning,
1014+
%form-group-border--success))
1015+
{
1016+
&:hover {
1017+
%form-group-bundle-start,
1018+
%form-group-bundle-end,
1019+
%igx-input-group__filler,
1020+
%igx-input-group__notch {
1021+
border-color: var-get($theme, 'focused-border-color');
1022+
}
1023+
}
1024+
}
1025+
9841026
%form-group-label--float-border {
9851027
--label-position: #{sizable(18px, 22px, 26px)};
9861028

@@ -1064,6 +1106,10 @@
10641106
color: var-get($theme, 'focused-secondary-color');
10651107
}
10661108

1109+
%form-group-label--warning {
1110+
color: var-get($theme, 'warning-secondary-color');
1111+
}
1112+
10671113
%form-group-label--success {
10681114
color: var-get($theme, 'success-secondary-color');
10691115
}
@@ -1305,10 +1351,19 @@
13051351
%igx-input-group__filler {
13061352
border-block-color: var-get($theme, 'success-secondary-color');
13071353
}
1354+
1355+
%form-group-bundle--border:hover {
1356+
%form-group-bundle-start,
1357+
%form-group-bundle-end,
1358+
%igx-input-group__filler,
1359+
%igx-input-group__notch {
1360+
border-color: var-get($theme, 'success-secondary-color');
1361+
}
1362+
}
13081363
}
13091364

13101365
%form-group-line--warning {
1311-
background: var-get($theme, 'error-secondary-color');
1366+
background: var-get($theme, 'warning-secondary-color');
13121367
}
13131368

13141369
%form-group-border--warning {
@@ -1328,6 +1383,15 @@
13281383
%igx-input-group__filler {
13291384
border-block-color: var-get($theme, 'warning-secondary-color');
13301385
}
1386+
1387+
%form-group-bundle--border:hover {
1388+
%form-group-bundle-start,
1389+
%form-group-bundle-end,
1390+
%igx-input-group__filler,
1391+
%igx-input-group__notch {
1392+
border-color: var-get($theme, 'warning-secondary-color');
1393+
}
1394+
}
13311395
}
13321396

13331397
%form-group-line--error {
@@ -1351,6 +1415,15 @@
13511415
%igx-input-group__filler {
13521416
border-block-color: var-get($theme, 'error-secondary-color');
13531417
}
1418+
1419+
%form-group-bundle--border:hover {
1420+
%form-group-bundle-start,
1421+
%form-group-bundle-end,
1422+
%igx-input-group__filler,
1423+
%igx-input-group__notch {
1424+
border-color: var-get($theme, 'error-secondary-color');
1425+
}
1426+
}
13541427
}
13551428

13561429
%form-group-border--disabled {
@@ -1413,6 +1486,10 @@
14131486
color: var-get($theme, 'success-secondary-color');
14141487
}
14151488

1489+
%form-group-helper--warning {
1490+
color: var-get($theme, 'warning-secondary-color');
1491+
}
1492+
14161493
%form-group-helper--error {
14171494
color: var-get($theme, 'error-secondary-color');
14181495
}

‎projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -101,13 +101,20 @@
101101
}
102102
}
103103

104-
%form-group-bundle:hover,
105104
%form-group-bundle:focus-within {
106105
%igx-select__toggle-button {
107106
color: var-get($theme, 'toggle-button-foreground-focus');
108107
}
109108
}
110109

110+
@if $variant == 'indigo' {
111+
%form-group-bundle:hover {
112+
%igx-select__toggle-button {
113+
color: var-get($theme, 'toggle-button-foreground-focus');
114+
}
115+
}
116+
}
117+
111118
.igx-input-group--filled {
112119
%igx-select__toggle-button {
113120
color: var-get($theme, 'toggle-button-foreground-filled');
@@ -120,8 +127,10 @@
120127
}
121128

122129
.igx-input-group.igx-input-group--focused:not(.igx-input-group--box) {
123-
%igx-select__toggle-button {
124-
background: var-get($theme, 'toggle-button-background-focus--border');
130+
@if $variant != 'fluent' {
131+
%igx-select__toggle-button {
132+
background: var-get($theme, 'toggle-button-background-focus--border');
133+
}
125134
}
126135
}
127136

0 commit comments

Comments
 (0)