Skip to content

Commit 0b696a4

Browse files
didimmovadidimmova
authored
feat(input-group): improve input-group theme (#15728)
1 parent 750e6b6 commit 0b696a4

File tree

1 file changed

+254
-18
lines changed

1 file changed

+254
-18
lines changed

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

Lines changed: 254 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -141,24 +141,228 @@
141141
}
142142

143143
$theme: digest-schema($input-group-schema);
144+
$variant: map.get($theme, '_meta', 'theme');
145+
144146
$search-resting-elevation: map.get($input-group-schema, 'search-resting-elevation');
145147
$search-hover-elevation: map.get($input-group-schema, 'search-hover-elevation');
146148
$search-disabled-elevation: map.get($input-group-schema, 'search-disabled-elevation');
147149

148-
@if not($placeholder-color) and $box-background {
149-
$placeholder-color: text-contrast($box-background);
150+
@if $variant == 'material' {
151+
@if not($box-background-hover) and $box-background {
152+
$box-background-hover: var(--box-background);
153+
}
154+
155+
@if not($box-background-focus) and $box-background {
156+
$box-background-focus: hsl(from var(--box-background) h s calc(l * 0.9));
157+
}
158+
159+
@if not($box-disabled-background) and $box-background {
160+
$box-disabled-background: hsla(from var(--box-background) h s l / 0.4);
161+
}
162+
163+
@if not($disabled-placeholder-color) and $box-disabled-background {
164+
$disabled-placeholder-color: adaptive-contrast(var(--box-disabled-background));
165+
}
166+
167+
@if not($disabled-text-color) and $box-disabled-background {
168+
$disabled-text-color: adaptive-contrast(var(--box-disabled-background));
169+
}
170+
171+
@if not($placeholder-color) and $box-background {
172+
$placeholder-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.6);
173+
}
174+
175+
@if not($hover-placeholder-color) and $box-background-hover {
176+
$hover-placeholder-color: hsla(from adaptive-contrast(var(--box-background-hover)) h s l / 0.6);
177+
}
178+
179+
@if not($idle-text-color) and $box-background {
180+
$idle-text-color: adaptive-contrast(var(--box-background));
181+
}
182+
183+
@if not($filled-text-color) and $box-background {
184+
$filled-text-color: adaptive-contrast(var(--box-background));
185+
}
186+
187+
@if not($filled-text-hover-color) and $box-background {
188+
$filled-text-hover-color: adaptive-contrast(var(--box-background));
189+
}
190+
191+
@if not($focused-text-color) and $box-background-focus {
192+
$focused-text-color: adaptive-contrast(var(--box-background-focus));
193+
}
194+
195+
@if not($idle-bottom-line-color) and $box-background {
196+
$idle-bottom-line-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.6);
197+
}
198+
199+
@if not($hover-bottom-line-color) and $box-background {
200+
$hover-bottom-line-color: adaptive-contrast(var(--box-background));
201+
}
202+
203+
@if not($idle-secondary-color) and $box-background {
204+
$idle-secondary-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.6);
205+
}
206+
207+
@if not($focused-secondary-color) and $box-background-focus {
208+
$focused-secondary-color: adaptive-contrast(var(--box-background-focus));
209+
}
210+
211+
@if not($input-prefix-color) and $box-background {
212+
$input-prefix-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.6);
213+
}
214+
215+
@if not($input-prefix-color--filled) and $box-background {
216+
$input-prefix-color--filled: adaptive-contrast(var(--box-background));
217+
}
218+
219+
@if not($input-prefix-color--focused) and $box-background-focus {
220+
$input-prefix-color--focused: adaptive-contrast(var(--box-background-focus));
221+
}
222+
223+
@if not($input-suffix-color) and $box-background {
224+
$input-suffix-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.6);
225+
}
226+
227+
@if not($input-suffix-color--filled) and $box-background {
228+
$input-suffix-color--filled: adaptive-contrast(var(--box-background));
229+
}
230+
231+
@if not($input-suffix-color--focused) and $box-background-focus {
232+
$input-suffix-color--focused: adaptive-contrast(var(--box-background-focus));
233+
}
234+
}
235+
236+
@if $variant == 'fluent' or $variant == 'bootstrap' {
237+
@if not($input-prefix-background) and $input-suffix-background {
238+
$input-prefix-background: var(--input-suffix-background);
239+
}
240+
241+
@if not($input-suffix-background) and $input-prefix-background {
242+
$input-suffix-background: var(--input-prefix-background);
243+
}
150244
}
151245

152-
@if not($placeholder-color) and $box-background-hover {
153-
$placeholder-color: text-contrast($box-background-hover);
246+
@if $variant == 'material' or $variant == 'indigo' {
247+
//bottom line color
248+
@if not($hover-bottom-line-color) and $idle-bottom-line-color {
249+
$hover-bottom-line-color: hsl(from var(--idle-bottom-line-color) h s calc(l * 0.8));
250+
}
251+
252+
@if not($focused-bottom-line-color) and $hover-bottom-line-color {
253+
$focused-bottom-line-color: var(--hover-bottom-line-color);
254+
}
255+
256+
@if $variant == 'material' {
257+
@if not($focused-secondary-color) and $focused-bottom-line-color {
258+
$focused-secondary-color: var(--focused-bottom-line-color);
259+
}
260+
261+
@if not($border-color) and $idle-bottom-line-color {
262+
$border-color: var(--idle-bottom-line-color);
263+
}
264+
}
265+
}
266+
267+
//border-color
268+
@if $variant == 'bootstrap' {
269+
@if not($focused-border-color) and $border-color {
270+
$focused-border-color: hsl(from var(--border-color) h s calc(l * 0.8));
271+
}
272+
273+
@if not($focused-secondary-color) and $focused-border-color {
274+
$focused-secondary-color: hsla(from var(--focused-border-color) h s l / 0.4);
275+
}
276+
} @else {
277+
@if not($hover-border-color) and $border-color {
278+
$hover-border-color: hsl(from var(--border-color) h s calc(l * 0.8));
279+
}
280+
281+
@if not($focused-border-color) and $hover-border-color {
282+
$focused-border-color: var(--hover-border-color);
283+
}
284+
285+
@if $variant != 'indigo' {
286+
@if not($focused-secondary-color) and $focused-border-color {
287+
$focused-secondary-color: var(--focused-border-color);
288+
}
289+
}
154290
}
155291

156-
@if not($placeholder-color) and $box-background-focus {
157-
$placeholder-color: text-contrast($box-background-focus);
292+
@if $variant == 'material' {
293+
@if not($focused-bottom-line-color) and $focused-border-color {
294+
$focused-bottom-line-color: var(--focused-border-color);
295+
}
158296
}
159297

298+
//material search input
299+
160300
@if not($placeholder-color) and $search-background {
161-
$placeholder-color: text-contrast($search-background);
301+
$placeholder-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.6);
302+
}
303+
304+
@if not($hover-placeholder-color) and $placeholder-color {
305+
$hover-placeholder-color: var(--placeholder-color);
306+
}
307+
308+
@if not($idle-secondary-color) and $placeholder-color {
309+
$idle-secondary-color: var(--placeholder-color);
310+
}
311+
312+
@if not($idle-text-color) and $search-background {
313+
$idle-text-color: adaptive-contrast(var(--search-background));
314+
}
315+
316+
@if not($focused-secondary-color) and $search-background {
317+
$focused-secondary-color: adaptive-contrast(var(--search-background));
318+
}
319+
320+
@if not($filled-text-color) and $search-background {
321+
$filled-text-color: adaptive-contrast(var(--search-background));
322+
}
323+
324+
@if not($filled-text-hover-color) and $search-background {
325+
$filled-text-hover-color: adaptive-contrast(var(--search-background));
326+
}
327+
328+
@if not($focused-text-color) and $search-background {
329+
$focused-text-color: adaptive-contrast(var(--search-background));
330+
}
331+
332+
@if not($input-prefix-color) and $search-background {
333+
$input-prefix-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.6);
334+
}
335+
336+
@if not($input-prefix-color--filled) and $search-background {
337+
$input-prefix-color--filled: adaptive-contrast(var(--search-background));
338+
}
339+
340+
@if not($input-prefix-color--focused) and $search-background {
341+
$input-prefix-color--focused: adaptive-contrast(var(--search-background));
342+
}
343+
344+
@if not($input-suffix-color) and $search-background {
345+
$input-suffix-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.6);
346+
}
347+
348+
@if not($input-suffix-color--filled) and $search-background {
349+
$input-suffix-color--filled: adaptive-contrast(var(--search-background));
350+
}
351+
352+
@if not($input-suffix-color--focused) and $search-background {
353+
$input-suffix-color--focused: adaptive-contrast(var(--search-background));
354+
}
355+
356+
@if not($search-disabled-background) and $search-background {
357+
$search-disabled-background: hsla(from var(--search-background) h s l / 0.4);
358+
}
359+
360+
@if not($disabled-placeholder-color) and $search-disabled-background {
361+
$disabled-placeholder-color: adaptive-contrast(var(--search-disabled-background));
362+
}
363+
364+
@if not($disabled-text-color) and $search-disabled-background {
365+
$disabled-text-color: adaptive-contrast(var(--search-disabled-background));
162366
}
163367

164368
@if not($search-resting-shadow) {
@@ -173,36 +377,70 @@
173377
$search-disabled-shadow: elevation($search-disabled-elevation);
174378
}
175379

380+
//end material search input
381+
382+
@if not($input-prefix-color) and $input-suffix-color {
383+
$input-prefix-color: var(--input-suffix-color);
384+
}
385+
386+
@if not($input-suffix-color) and $input-prefix-color {
387+
$input-suffix-color: var(--input-prefix-color);
388+
}
389+
176390
@if not($input-prefix-background--filled) and $input-prefix-background {
177-
$input-prefix-background--filled: $input-prefix-background;
391+
$input-prefix-background--filled: var(--input-prefix-background);
178392
}
179393

180394
@if not($input-prefix-background--focused) and $input-prefix-background {
181-
$input-prefix-background--focused: $input-prefix-background;
395+
$input-prefix-background--focused: var(--input-prefix-background);
182396
}
183397

184398
@if not($input-prefix-color) and $input-prefix-background {
185-
$input-prefix-color: text-contrast($input-prefix-background);
399+
$input-prefix-color: adaptive-contrast(var(--input-prefix-background));
400+
}
401+
402+
@if not($input-prefix-color--filled) and $input-prefix-color {
403+
$input-prefix-color--filled: var(--input-prefix-color);
404+
}
405+
406+
@if not($input-prefix-color--focused) and $input-prefix-color--filled {
407+
$input-prefix-color--focused: var(--input-prefix-color--filled);
186408
}
187409

188410
@if not($input-prefix-color--filled) and $input-prefix-background--filled {
189-
$input-prefix-color--filled: text-contrast($input-prefix-background--filled);
411+
$input-prefix-color--filled: adaptive-contrast(var(--input-prefix-background--filled));
190412
}
191413

192414
@if not($input-prefix-color--focused) and $input-prefix-background--focused {
193-
$input-prefix-color--focused: text-contrast($input-prefix-background--focused);
415+
$input-prefix-color--focused: adaptive-contrast(var(--input-prefix-background--focused));
416+
}
417+
418+
@if not($input-suffix-background--filled) and $input-suffix-background {
419+
$input-suffix-background--filled: var(--input-suffix-background);
420+
}
421+
422+
@if not($input-suffix-background--focused) and $input-suffix-background {
423+
$input-suffix-background--focused: var(--input-suffix-background);
194424
}
195425

196426
@if not($input-suffix-color) and $input-suffix-background {
197-
$input-suffix-color: text-contrast($input-suffix-background);
427+
$input-suffix-color: adaptive-contrast(var(--input-suffix-background));
428+
}
429+
430+
@if not($input-suffix-color--filled) and $input-suffix-color {
431+
$input-suffix-color--filled: var(--input-suffix-color);
432+
}
433+
434+
@if not($input-suffix-color--focused) and $input-suffix-color--filled {
435+
$input-suffix-color--focused: var(--input-suffix-color--filled);
198436
}
199437

200438
@if not($input-suffix-color--filled) and $input-suffix-background--filled {
201-
$input-suffix-color--filled: text-contrast($input-suffix-background--filled);
439+
$input-suffix-color--filled: adaptive-contrast(var(--input-suffix-background--filled));
202440
}
203441

204442
@if not($input-suffix-color--focused) and $input-suffix-background--focused {
205-
$input-suffix-color--focused: text-contrast($input-suffix-background--focused);
443+
$input-suffix-color--focused: adaptive-contrast(var(--input-suffix-background--focused));
206444
}
207445

208446
@if not($box-border-radius) {
@@ -271,8 +509,6 @@
271509
input-suffix-background--filled: $input-suffix-background--filled,
272510
input-suffix-color--focused: $input-suffix-color--focused,
273511
input-suffix-background--focused: $input-suffix-background--focused,
274-
theme: map.get($schema, '_meta', 'theme'),
275-
variant: map.get($schema, '_meta', 'theme'),
276512
size: $size,
277513
));
278514
}
@@ -285,7 +521,7 @@
285521
// when dynamically switching between the input `type` attribute.
286522
@include css-vars($theme);
287523

288-
$variant: map.get($theme, 'variant');
524+
$variant: map.get($theme, '_meta', 'theme');
289525
$transition-timing: .25s $out-cubic;
290526
$material-theme: $variant == 'material';
291527
$indigo-theme: $variant == 'indigo';

0 commit comments

Comments
 (0)