Skip to content

Commit b0e2942

Browse files
simeonoffsimeonoff
authored
Merge pull request #9093 from IgniteUI/simeonoff/input-group-css-output
refactor(input-group): reduce compiled CSS size
2 parents 7c78d07 + e74ef54 commit b0e2942

File tree

2 files changed

+29
-46
lines changed

2 files changed

+29
-46
lines changed

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

Lines changed: 6 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -301,7 +301,6 @@
301301
}
302302

303303
@include e(file-input) {
304-
@extend %form-group-input--box !optional;
305304
@extend %form-group-file-input--box !optional;
306305
}
307306

@@ -364,15 +363,14 @@
364363
}
365364

366365
@include e(input) {
367-
@extend %form-group-input--box !optional;
366+
@extend %form-group-input--border !optional;
368367
}
369368

370369
@include e(file-input) {
371-
@extend %form-group-input--box !optional;
370+
@extend %form-group-input--border !optional;
372371
}
373372

374373
@include e(label) {
375-
@extend %form-group-label--box !optional;
376374
@extend %form-group-label--border !optional;
377375
}
378376

@@ -383,28 +381,24 @@
383381

384382
@include mx(border, filled) {
385383
@include e(label) {
386-
@extend %form-group-label-float !optional;
387384
@extend %form-group-label--float-border !optional;
388385
}
389386
}
390387

391388
@include mx(border, file) {
392389
@include e(label) {
393-
@extend %form-group-label-float !optional;
394390
@extend %form-group-label--float-border !optional;
395391
}
396392
}
397393

398394
@include mx(border, focused) {
399395
@include e(label) {
400-
@extend %form-group-label--float !optional;
401396
@extend %form-group-label--float-border !optional;
402397
}
403398
}
404399

405400
@include mx(border, placeholder) {
406401
@include e(label) {
407-
@extend %form-group-label--float !optional;
408402
@extend %form-group-label--float-border !optional;
409403
}
410404
}
@@ -423,32 +417,24 @@
423417

424418
@include mx(border, cosy, filled) {
425419
@include e(label) {
426-
@extend %form-group-label--float !optional;
427-
@extend %form-group-label--float-border !optional;
428420
@extend %form-group-label--float-border-cosy !optional;
429421
}
430422
}
431423

432424
@include mx(border, cosy, file) {
433425
@include e(label) {
434-
@extend %form-group-label--float !optional;
435-
@extend %form-group-label--float-border !optional;
436426
@extend %form-group-label--float-border-cosy !optional;
437427
}
438428
}
439429

440430
@include mx(border, cosy, focused) {
441431
@include e(label) {
442-
@extend %form-group-label--float !optional;
443-
@extend %form-group-label--float-border !optional;
444432
@extend %form-group-label--float-border-cosy !optional;
445433
}
446434
}
447435

448436
@include mx(border, cosy, placeholder) {
449437
@include e(label) {
450-
@extend %form-group-label--float !optional;
451-
@extend %form-group-label--float-border !optional;
452438
@extend %form-group-label--float-border-cosy !optional;
453439
}
454440
}
@@ -467,32 +453,24 @@
467453

468454
@include mx(border, compact, filled) {
469455
@include e(label) {
470-
@extend %form-group-label--float !optional;
471-
@extend %form-group-label--float-border !optional;
472456
@extend %form-group-label--float-border-compact !optional;
473457
}
474458
}
475459

476460
@include mx(border, compact, file) {
477461
@include e(label) {
478-
@extend %form-group-label--float !optional;
479-
@extend %form-group-label--float-border !optional;
480462
@extend %form-group-label--float-border-compact !optional;
481463
}
482464
}
483465

484466
@include mx(border, compact, focused) {
485467
@include e(label) {
486-
@extend %form-group-label--float !optional;
487-
@extend %form-group-label--float-border !optional;
488468
@extend %form-group-label--float-border-compact !optional;
489469
}
490470
}
491471

492472
@include mx(border, compact, placeholder) {
493473
@include e(label) {
494-
@extend %form-group-label--float !optional;
495-
@extend %form-group-label--float-border !optional;
496474
@extend %form-group-label--float-border-compact !optional;
497475
}
498476
}
@@ -688,11 +666,11 @@
688666
}
689667

690668
@include e(input) {
691-
@extend %form-group-input--box !optional;
669+
@extend %form-group-input--indigo !optional;
692670
}
693671

694672
@include e(file-input) {
695-
@extend %form-group-input--box !optional;
673+
@extend %form-group-input--indigo !optional;
696674
}
697675

698676
@include e(label) {
@@ -971,11 +949,11 @@
971949
}
972950

973951
@include e(input) {
974-
@extend %form-group-input--box !optional;
952+
@extend %form-group-input--search !optional;
975953
}
976954

977955
@include e(label) {
978-
@extend %form-group-label--box !optional;
956+
@extend %form-group-label--search !optional;
979957
}
980958

981959
@include e(hint) {

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

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -454,10 +454,6 @@
454454
padding: 0 rem(16px, map-get($base-scale-size, 'comfortable'));
455455
background: --var($theme, 'box-background');
456456
box-shadow: inset 0 -2px 0 0 --var($theme, 'idle-bottom-line-color');
457-
458-
%form-group-label--box + %form-group-input--box {
459-
transform: translateY(0);
460-
}
461457
}
462458

463459
%form-group-bundle--indigo {
@@ -830,10 +826,6 @@
830826
border-radius: --var($theme, 'search-border-radius');
831827
background: --var($theme, 'search-background');
832828
box-shadow: --var($theme, 'search-resting-shadow');
833-
834-
%form-group-label--box + %form-group-input--box {
835-
transform: translateY(0);
836-
}
837829
}
838830

839831
%form-group-bundle--search-cosy {
@@ -911,13 +903,29 @@
911903

912904
%form-group-label--box {
913905
transform: translateY(0);
906+
907+
+ %form-group-input--box,
908+
~ %form-group-file-input--box {
909+
transform: translateY(0);
910+
}
914911
}
915912

916913
%form-group-label--border {
917914
padding: 0 rem(4px);
918915
transition: all $transition-timing;
919916
}
920917

918+
%form-group-label--border,
919+
%form-group-label--search {
920+
transform: translateY(0);
921+
}
922+
923+
%form-group-label--search {
924+
+ %form-group-input--search {
925+
transform: translateY(0);
926+
}
927+
}
928+
921929
%form-group-label--float {
922930
overflow: visible;
923931
transform: translateY(-50%) scale(.75);
@@ -1077,18 +1085,15 @@
10771085
}
10781086
}
10791087

1080-
%form-group-input--box {
1088+
%form-group-input--box,
1089+
%form-group-file-input--box,
1090+
%form-group-input--search,
1091+
%form-group-input--border,
1092+
%form-group-input--indigo,
1093+
%form-group-file-input-indigo {
10811094
transform: translateY(-25%);
10821095
}
10831096

1084-
%form-group-file-input--box {
1085-
span {
1086-
top: initial;
1087-
transform: none;
1088-
bottom: 0;
1089-
}
1090-
}
1091-
10921097
%form-group-input--hover {
10931098
cursor: pointer;
10941099
}
@@ -1294,7 +1299,7 @@
12941299
padding: rem(8px, map-get($base-scale-size, 'comfortable'));
12951300
line-height: normal;
12961301

1297-
%igx-icon-display {
1302+
igx-icon {
12981303
width: rem(18px);
12991304
height: rem(18px);
13001305
font-size: rem(18px);

0 commit comments

Comments
 (0)