@softheon/armature 15.14.2 → 15.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +1 -1
  2. package/assets/styles/sof-styles.scss +129 -280
  3. package/esm2020/lib/header/components/header/header.component.mjs +2 -2
  4. package/esm2020/lib/theming/services/theme.service.mjs +3 -1
  5. package/fesm2015/softheon-armature.mjs +4 -2
  6. package/fesm2015/softheon-armature.mjs.map +1 -1
  7. package/fesm2020/softheon-armature.mjs +4 -2
  8. package/fesm2020/softheon-armature.mjs.map +1 -1
  9. package/package.json +1 -1
package/assets/styles/sof-styles.scss CHANGED
@@ -6,26 +6,14 @@
6
6
 
7
7
  // Theme pallets
8
8
  @include mat.core();
9
- $main-theme: mat.define-light-theme(
10
- (
11
- color: (
12
- primary: mat.define-palette($arm-primary),
13
- accent: mat.define-palette($arm-accent)
14
- ),
15
- typography: mat.define-typography-config(),
16
- density: 0
17
- )
18
- );
19
- $main-theme-dark: mat.define-dark-theme(
20
- (
21
- color: (
22
- primary: mat.define-palette($arm-primary),
23
- accent: mat.define-palette($arm-accent)
24
- ),
25
- typography: mat.define-typography-config(),
26
- density: 0
27
- )
28
- );
9
+ $main-theme: mat.define-light-theme((color: (primary: mat.define-palette($arm-primary),
10
+ accent: mat.define-palette($arm-accent)),
11
+ typography: mat.define-typography-config(),
12
+ density: 0));
13
+ $main-theme-dark: mat.define-dark-theme((color: (primary: mat.define-palette($arm-primary),
14
+ accent: mat.define-palette($arm-accent)),
15
+ typography: mat.define-typography-config(),
16
+ density: 0));
29
17
 
30
18
  body {
31
19
  letter-spacing: 0px;
@@ -202,7 +190,7 @@ mat-form-field {
202
190
  }
203
191
 
204
192
  .color-error {
205
- color: mat.get-color-from-palette($arm-error, 500);
193
+ color: mat.get-color-from-palette($arm-error, 900);
206
194
  }
207
195
 
208
196
  .color-neutral {
@@ -372,9 +360,12 @@ mat-form-field {
372
360
  min-height: 152px;
373
361
  }
374
362
 
363
+ // button colors 'accent', 'info', 'success', 'warning', 'neutral' removed from documentation, not to be used 12/1/23 per design ...
364
+ // button's icon color is inherited from the button's color
375
365
  button.mat-mdc-button {
376
366
  --mat-mdc-button-persistent-ripple-color: none !important;
377
-
367
+ --mdc-text-button-label-text-color: none !important;
368
+
378
369
  &.sof-button {
379
370
  padding: 0px 24px !important;
380
371
  height: 48px !important;
@@ -387,6 +378,7 @@ button.mat-mdc-button {
387
378
  letter-spacing: 0.05em !important;
388
379
  text-transform: uppercase !important;
389
380
 
381
+
390
382
  &.fixed-width {
391
383
  width: 200px !important; // Use this is to match specific sizing
392
384
  }
@@ -397,10 +389,10 @@ button.mat-mdc-button {
397
389
 
398
390
  &:enabled {
399
391
  &.mat-primary {
400
- color: mat.get-color-from-palette($arm-primary, 500) !important;
401
392
 
402
393
  &:hover {
403
394
  background-color: mat.get-color-from-palette($arm-primary, 50);
395
+ color: map-get($arm-primary, contrast, 50);
404
396
  }
405
397
 
406
398
  &:focus {
@@ -410,10 +402,10 @@ button.mat-mdc-button {
410
402
  }
411
403
 
412
404
  &.mat-accent {
413
- color: mat.get-color-from-palette($arm-accent, 500) !important;
414
405
 
415
406
  &:hover {
416
407
  background-color: mat.get-color-from-palette($arm-accent, 50);
408
+ color: map-get($arm-accent, contrast, 50);
417
409
  }
418
410
 
419
411
  &:focus {
@@ -423,10 +415,10 @@ button.mat-mdc-button {
423
415
  }
424
416
 
425
417
  &.mat-warn {
426
- color: mat.get-color-from-palette($arm-warn, 500) !important;
427
418
 
428
419
  &:hover {
429
420
  background-color: mat.get-color-from-palette($arm-warn, 50);
421
+ color: map-get($arm-warn, contrast, 50);
430
422
  }
431
423
 
432
424
  &:focus {
@@ -436,10 +428,10 @@ button.mat-mdc-button {
436
428
  }
437
429
 
438
430
  &.mat-success {
439
- color: mat.get-color-from-palette($arm-success, 500) !important;
440
431
 
441
432
  &:hover {
442
433
  background-color: mat.get-color-from-palette($arm-success, 50);
434
+ color: map-get($arm-success, contrast, 50);
443
435
  }
444
436
 
445
437
  &:focus {
@@ -449,10 +441,10 @@ button.mat-mdc-button {
449
441
  }
450
442
 
451
443
  &.mat-error {
452
- color: mat.get-color-from-palette($arm-error, 500) !important;
453
444
 
454
445
  &:hover {
455
446
  background-color: mat.get-color-from-palette($arm-error, 50);
447
+ color: map-get($arm-error, contrast, 50);
456
448
  }
457
449
 
458
450
  &:focus {
@@ -462,10 +454,10 @@ button.mat-mdc-button {
462
454
  }
463
455
 
464
456
  &.mat-info {
465
- color: mat.get-color-from-palette($arm-info, 500) !important;
466
457
 
467
458
  &:hover {
468
459
  background-color: mat.get-color-from-palette($arm-info, 50);
460
+ color: map-get($arm-info, contrast, 50);
469
461
  }
470
462
 
471
463
  &:focus {
@@ -475,10 +467,10 @@ button.mat-mdc-button {
475
467
  }
476
468
 
477
469
  &.mat-neutral {
478
- color: #000000de !important;
479
470
 
480
471
  &:hover {
481
472
  background-color: mat.get-color-from-palette($arm-neutral, 50);
473
+ color: map-get($arm-neutral, contrast, 50);
482
474
  }
483
475
 
484
476
  &:focus {
@@ -524,10 +516,10 @@ button.mat-mdc-button {
524
516
 
525
517
  &:enabled {
526
518
  &.mat-primary {
527
- color: mat.get-color-from-palette($arm-primary, 500) !important;
528
519
 
529
520
  &:hover {
530
521
  background-color: mat.get-color-from-palette($arm-primary, 50);
522
+ color: map-get($arm-primary, contrast, 50);
531
523
  }
532
524
 
533
525
  &:focus {
@@ -537,10 +529,10 @@ button.mat-mdc-button {
537
529
  }
538
530
 
539
531
  &.mat-accent {
540
- color: mat.get-color-from-palette($arm-accent, 500) !important;
541
532
 
542
533
  &:hover {
543
534
  background-color: mat.get-color-from-palette($arm-accent, 50);
535
+ color: map-get($arm-accent, contrast, 50);
544
536
  }
545
537
 
546
538
  &:focus {
@@ -550,10 +542,10 @@ button.mat-mdc-button {
550
542
  }
551
543
 
552
544
  &.mat-warn {
553
- color: mat.get-color-from-palette($arm-warn, 500) !important;
554
545
 
555
546
  &:hover {
556
547
  background-color: mat.get-color-from-palette($arm-warn, 50);
548
+ color: map-get($arm-warn, contrast, 50);
557
549
  }
558
550
 
559
551
  &:focus {
@@ -563,10 +555,10 @@ button.mat-mdc-button {
563
555
  }
564
556
 
565
557
  &.mat-success {
566
- color: mat.get-color-from-palette($arm-success, 500) !important;
567
558
 
568
559
  &:hover {
569
560
  background-color: mat.get-color-from-palette($arm-success, 50);
561
+ color: map-get($arm-success, contrast, 50);
570
562
  }
571
563
 
572
564
  &:focus {
@@ -576,10 +568,10 @@ button.mat-mdc-button {
576
568
  }
577
569
 
578
570
  &.mat-error {
579
- color: mat.get-color-from-palette($arm-error, 500) !important;
580
571
 
581
572
  &:hover {
582
573
  background-color: mat.get-color-from-palette($arm-error, 50);
574
+ color: map-get($arm-error, contrast, 50);
583
575
  }
584
576
 
585
577
  &:focus {
@@ -589,10 +581,10 @@ button.mat-mdc-button {
589
581
  }
590
582
 
591
583
  &.mat-info {
592
- color: mat.get-color-from-palette($arm-info, 500) !important;
593
584
 
594
585
  &:hover {
595
586
  background-color: mat.get-color-from-palette($arm-info, 50);
587
+ color: map-get($arm-info, contrast, 50);
596
588
  }
597
589
 
598
590
  &:focus {
@@ -602,10 +594,10 @@ button.mat-mdc-button {
602
594
  }
603
595
 
604
596
  &.mat-neutral {
605
- color: #000000de !important;
606
597
 
607
598
  &:hover {
608
599
  background-color: mat.get-color-from-palette($arm-neutral, 50);
600
+ color: map-get($arm-neutral, contrast, 50);
609
601
  }
610
602
 
611
603
  &:focus {
@@ -645,6 +637,7 @@ button.mat-mdc-button {
645
637
 
646
638
  button.mat-mdc-unelevated-button {
647
639
  --mat-mdc-button-persistent-ripple-color: none !important;
640
+ --mdc-filled-button-label-text-color: none !important;
648
641
 
649
642
  &.sof-flat-button {
650
643
  padding: 0px 24px !important;
@@ -667,13 +660,14 @@ button.mat-mdc-unelevated-button {
667
660
  }
668
661
 
669
662
  &:enabled {
670
- color: #ffffff !important;
671
663
 
672
664
  &.mat-primary {
673
665
  background: mat.get-color-from-palette($arm-primary, 500);
666
+ color: map-get($arm-primary, contrast, 500);
674
667
 
675
668
  &:hover {
676
669
  background-color: mat.get-color-from-palette($arm-primary, 700);
670
+ color: map-get($arm-primary, contrast, 700);
677
671
  }
678
672
 
679
673
  &:focus {
@@ -684,9 +678,11 @@ button.mat-mdc-unelevated-button {
684
678
 
685
679
  &.mat-accent {
686
680
  background: mat.get-color-from-palette($arm-accent, 500);
681
+ color: map-get($arm-accent, contrast, 500);
687
682
 
688
683
  &:hover {
689
684
  background-color: mat.get-color-from-palette($arm-accent, 700);
685
+ color: map-get($arm-accent, contrast, 700);
690
686
  }
691
687
 
692
688
  &:focus {
@@ -697,9 +693,11 @@ button.mat-mdc-unelevated-button {
697
693
 
698
694
  &.mat-warn {
699
695
  background: mat.get-color-from-palette($arm-warn, 500);
696
+ color: map-get($arm-warn, contrast, 500);
700
697
 
701
698
  &:hover {
702
699
  background-color: mat.get-color-from-palette($arm-warn, 700);
700
+ color: map-get($arm-warn, contrast, 700);
703
701
  }
704
702
 
705
703
  &:focus {
@@ -710,9 +708,11 @@ button.mat-mdc-unelevated-button {
710
708
 
711
709
  &.mat-success {
712
710
  background: mat.get-color-from-palette($arm-success, 500);
711
+ color: map-get($arm-success, contrast, 500);
713
712
 
714
713
  &:hover {
715
714
  background-color: mat.get-color-from-palette($arm-success, 700);
715
+ color: map-get($arm-success, contrast, 700);
716
716
  }
717
717
 
718
718
  &:focus {
@@ -722,10 +722,12 @@ button.mat-mdc-unelevated-button {
722
722
  }
723
723
 
724
724
  &.mat-error {
725
- background: mat.get-color-from-palette($arm-error, 500);
725
+ background: mat.get-color-from-palette($arm-error, 900);
726
+ color: map-get($arm-error, contrast, 900);
726
727
 
727
728
  &:hover {
728
729
  background-color: mat.get-color-from-palette($arm-error, 700);
730
+ color: map-get($arm-error, contrast, 700);
729
731
  }
730
732
 
731
733
  &:focus {
@@ -736,9 +738,11 @@ button.mat-mdc-unelevated-button {
736
738
 
737
739
  &.mat-info {
738
740
  background: mat.get-color-from-palette($arm-info, 500);
741
+ color: map-get($arm-info, contrast, 500);
739
742
 
740
743
  &:hover {
741
744
  background-color: mat.get-color-from-palette($arm-info, 700);
745
+ color: map-get($arm-info, contrast, 700);
742
746
  }
743
747
 
744
748
  &:focus {
@@ -749,9 +753,11 @@ button.mat-mdc-unelevated-button {
749
753
 
750
754
  &.mat-neutral {
751
755
  background: #000000de;
756
+ color: #ffffff;
752
757
 
753
758
  &:hover {
754
759
  background-color: mat.get-color-from-palette($arm-neutral, 700);
760
+ color: map-get($arm-neutral, contrast, 700);
755
761
  }
756
762
 
757
763
  &:focus {
@@ -759,10 +765,6 @@ button.mat-mdc-unelevated-button {
759
765
  outline-offset: 2px !important;
760
766
  }
761
767
  }
762
-
763
- i {
764
- color: #ffffff !important;
765
- }
766
768
  }
767
769
 
768
770
  &:disabled {
@@ -801,13 +803,14 @@ button.mat-mdc-unelevated-button {
801
803
  padding: 0px !important;
802
804
 
803
805
  &:enabled {
804
- color: #ffffff !important;
805
806
 
806
807
  &.mat-primary {
807
808
  background: mat.get-color-from-palette($arm-primary, 500);
809
+ color: map-get($arm-primary, contrast, 500);
808
810
 
809
811
  &:hover {
810
812
  background-color: mat.get-color-from-palette($arm-primary, 700);
813
+ color: map-get($arm-primary, contrast, 700);
811
814
  }
812
815
 
813
816
  &:focus {
@@ -818,9 +821,11 @@ button.mat-mdc-unelevated-button {
818
821
 
819
822
  &.mat-accent {
820
823
  background: mat.get-color-from-palette($arm-accent, 500);
824
+ color: map-get($arm-accent, contrast, 500);
821
825
 
822
826
  &:hover {
823
827
  background-color: mat.get-color-from-palette($arm-accent, 700);
828
+ color: map-get($arm-accent, contrast, 700);
824
829
  }
825
830
 
826
831
  &:focus {
@@ -831,9 +836,11 @@ button.mat-mdc-unelevated-button {
831
836
 
832
837
  &.mat-warn {
833
838
  background: mat.get-color-from-palette($arm-warn, 500);
839
+ color: map-get($arm-warn, contrast, 500);
834
840
 
835
841
  &:hover {
836
842
  background-color: mat.get-color-from-palette($arm-warn, 700);
843
+ color: map-get($arm-warn, contrast, 700);
837
844
  }
838
845
 
839
846
  &:focus {
@@ -844,9 +851,11 @@ button.mat-mdc-unelevated-button {
844
851
 
845
852
  &.mat-success {
846
853
  background: mat.get-color-from-palette($arm-success, 500);
854
+ color: map-get($arm-success, contrast, 500);
847
855
 
848
856
  &:hover {
849
857
  background-color: mat.get-color-from-palette($arm-success, 700);
858
+ color: map-get($arm-success, contrast, 700);
850
859
  }
851
860
 
852
861
  &:focus {
@@ -856,10 +865,12 @@ button.mat-mdc-unelevated-button {
856
865
  }
857
866
 
858
867
  &.mat-error {
859
- background: mat.get-color-from-palette($arm-error, 500);
868
+ background: mat.get-color-from-palette($arm-error, 900);
869
+ color: map-get($arm-error, contrast, 900);
860
870
 
861
871
  &:hover {
862
872
  background-color: mat.get-color-from-palette($arm-error, 700);
873
+ color: map-get($arm-error, contrast, 700);
863
874
  }
864
875
 
865
876
  &:focus {
@@ -870,9 +881,11 @@ button.mat-mdc-unelevated-button {
870
881
 
871
882
  &.mat-info {
872
883
  background: mat.get-color-from-palette($arm-info, 500);
884
+ color: map-get($arm-info, contrast, 500);
873
885
 
874
886
  &:hover {
875
887
  background-color: mat.get-color-from-palette($arm-info, 700);
888
+ color: map-get($arm-info, contrast, 700);
876
889
  }
877
890
 
878
891
  &:focus {
@@ -883,9 +896,11 @@ button.mat-mdc-unelevated-button {
883
896
 
884
897
  &.mat-neutral {
885
898
  background: #000000de;
899
+ color: #ffffff;
886
900
 
887
901
  &:hover {
888
902
  background-color: mat.get-color-from-palette($arm-neutral, 700);
903
+ color: map-get($arm-neutral, contrast, 700);
889
904
  }
890
905
 
891
906
  &:focus {
@@ -893,10 +908,6 @@ button.mat-mdc-unelevated-button {
893
908
  outline-offset: 2px !important;
894
909
  }
895
910
  }
896
-
897
- i {
898
- color: #ffffff !important;
899
- }
900
911
  }
901
912
 
902
913
  &:disabled {
@@ -930,7 +941,9 @@ button.mat-mdc-unelevated-button {
930
941
 
931
942
  button.mat-mdc-outlined-button {
932
943
  --mat-mdc-button-persistent-ripple-color: none !important;
933
-
944
+ --mdc-outlined-button-label-text-color: none !important;
945
+
946
+ // not to be used 12/1/23 per design ...
934
947
  &.sof-stroked-button {
935
948
  padding: 0px 24px !important;
936
949
  height: 48px !important;
@@ -955,23 +968,14 @@ button.mat-mdc-outlined-button {
955
968
  &:enabled {
956
969
  &.mat-primary {
957
970
  background-color: mat.get-color-from-palette($arm-primary, 50) !important;
958
- color: mat.get-color-from-palette($arm-primary, 500) !important;
959
-
960
- i {
961
- color: mat.get-color-from-palette($arm-primary, 500) !important;
962
- }
971
+ color: map-get($arm-primary, contrast, 50) !important;
963
972
 
964
973
  &:hover {
965
974
  background-color: mat.get-color-from-palette($arm-primary, 100) !important;
966
- color: white !important;
967
-
968
- i {
969
- color: white !important;
970
- }
975
+ color: map-get($arm-primary, contrast, 100) !important;
971
976
  }
972
977
 
973
978
  &:focus {
974
- background-color: mat.get-color-from-palette($arm-primary, 50) !important;
975
979
  outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
976
980
  outline-offset: 2px !important;
977
981
  }
@@ -979,23 +983,14 @@ button.mat-mdc-outlined-button {
979
983
 
980
984
  &.mat-accent {
981
985
  background-color: mat.get-color-from-palette($arm-accent, 50) !important;
982
- color: mat.get-color-from-palette($arm-accent, 500) !important;
983
-
984
- i {
985
- color: mat.get-color-from-palette($arm-accent, 500) !important;
986
- }
986
+ color: map-get($arm-accent, contrast, 50) !important;
987
987
 
988
988
  &:hover {
989
989
  background-color: mat.get-color-from-palette($arm-accent, 100) !important;
990
- color: white !important;
991
-
992
- i {
993
- color: white !important;
994
- }
990
+ color: map-get($arm-accent, contrast, 100) !important;
995
991
  }
996
992
 
997
993
  &:focus {
998
- background-color: mat.get-color-from-palette($arm-accent, 50) !important;
999
994
  outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1000
995
  outline-offset: 2px !important;
1001
996
  }
@@ -1003,23 +998,14 @@ button.mat-mdc-outlined-button {
1003
998
 
1004
999
  &.mat-warn {
1005
1000
  background-color: mat.get-color-from-palette($arm-warn, 50) !important;
1006
- color: mat.get-color-from-palette($arm-warn, 500) !important;
1007
-
1008
- i {
1009
- color: mat.get-color-from-palette($arm-warn, 500) !important;
1010
- }
1001
+ color: map-get($arm-warn, contrast, 50) !important;
1011
1002
 
1012
1003
  &:hover {
1013
1004
  background-color: mat.get-color-from-palette($arm-warn, 100) !important;
1014
- color: white !important;
1015
-
1016
- i {
1017
- color: white !important;
1018
- }
1005
+ color: map-get($arm-warn, contrast, 100) !important;
1019
1006
  }
1020
1007
 
1021
1008
  &:focus {
1022
- background-color: mat.get-color-from-palette($arm-warn, 50) !important;
1023
1009
  outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1024
1010
  outline-offset: 2px !important;
1025
1011
  }
@@ -1027,23 +1013,14 @@ button.mat-mdc-outlined-button {
1027
1013
 
1028
1014
  &.mat-success {
1029
1015
  background-color: mat.get-color-from-palette($arm-success, 50) !important;
1030
- color: mat.get-color-from-palette($arm-success, 500) !important;
1031
-
1032
- i {
1033
- color: mat.get-color-from-palette($arm-success, 500) !important;
1034
- }
1016
+ color: map-get($arm-success, contrast, 50) !important;
1035
1017
 
1036
1018
  &:hover {
1037
1019
  background-color: mat.get-color-from-palette($arm-success, 100) !important;
1038
- color: white !important;
1039
-
1040
- i {
1041
- color: white !important;
1042
- }
1020
+ color: map-get($arm-success, contrast, 100) !important;
1043
1021
  }
1044
1022
 
1045
1023
  &:focus {
1046
- background-color: mat.get-color-from-palette($arm-success, 50) !important;
1047
1024
  outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1048
1025
  outline-offset: 2px !important;
1049
1026
  }
@@ -1051,23 +1028,14 @@ button.mat-mdc-outlined-button {
1051
1028
 
1052
1029
  &.mat-info {
1053
1030
  background-color: mat.get-color-from-palette($arm-info, 50) !important;
1054
- color: mat.get-color-from-palette($arm-info, 500) !important;
1055
-
1056
- i {
1057
- color: mat.get-color-from-palette($arm-info, 500) !important;
1058
- }
1031
+ color: map-get($arm-info, contrast, 50) !important;
1059
1032
 
1060
1033
  &:hover {
1061
1034
  background-color: mat.get-color-from-palette($arm-info, 100) !important;
1062
- color: white !important;
1063
-
1064
- i {
1065
- color: white !important;
1066
- }
1035
+ color: map-get($arm-info, contrast, 100) !important;
1067
1036
  }
1068
1037
 
1069
1038
  &:focus {
1070
- background-color: mat.get-color-from-palette($arm-info, 50) !important;
1071
1039
  outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1072
1040
  outline-offset: 2px !important;
1073
1041
  }
@@ -1075,23 +1043,14 @@ button.mat-mdc-outlined-button {
1075
1043
 
1076
1044
  &.mat-error {
1077
1045
  background-color: mat.get-color-from-palette($arm-error, 50) !important;
1078
- color: mat.get-color-from-palette($arm-error, 500) !important;
1079
-
1080
- i {
1081
- color: mat.get-color-from-palette($arm-error, 500) !important;
1082
- }
1046
+ color: map-get($arm-error, contrast, 50) !important;
1083
1047
 
1084
1048
  &:hover {
1085
1049
  background-color: mat.get-color-from-palette($arm-error, 100) !important;
1086
- color: white !important;
1087
-
1088
- i {
1089
- color: white !important;
1090
- }
1050
+ color: map-get($arm-error, contrast, 100) !important;
1091
1051
  }
1092
1052
 
1093
1053
  &:focus {
1094
- background-color: mat.get-color-from-palette($arm-error, 50) !important;
1095
1054
  outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1096
1055
  outline-offset: 2px !important;
1097
1056
  }
@@ -1099,18 +1058,14 @@ button.mat-mdc-outlined-button {
1099
1058
 
1100
1059
  &.mat-neutral {
1101
1060
  background-color: mat.get-color-from-palette($arm-neutral, 50) !important;
1102
- color: #000000de !important;
1103
-
1104
- i {
1105
- color: #000000de !important;
1106
- }
1061
+ color: map-get($arm-neutral, contrast, 50) !important;
1107
1062
 
1108
1063
  &:hover {
1109
1064
  background-color: mat.get-color-from-palette($arm-neutral, 100) !important;
1065
+ color: map-get($arm-neutral, contrast, 100) !important;
1110
1066
  }
1111
1067
 
1112
1068
  &:focus {
1113
- background-color: mat.get-color-from-palette($arm-neutral, 50) !important;
1114
1069
  outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1115
1070
  outline-offset: 2px !important;
1116
1071
  }
@@ -1127,7 +1082,8 @@ button.mat-mdc-outlined-button {
1127
1082
  &.sof-stroked-button-outline {
1128
1083
  padding: 0px 24px !important;
1129
1084
  height: 48px !important;
1130
- background: #ffffff !important;
1085
+ background-color: #ffffff !important;
1086
+ color: #000000de !important;
1131
1087
  border-radius: 6px !important;
1132
1088
  font-family: Poppins !important;
1133
1089
  font-style: normal !important;
@@ -1148,14 +1104,10 @@ button.mat-mdc-outlined-button {
1148
1104
  &:enabled {
1149
1105
  &.mat-primary {
1150
1106
  border: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
1151
- color: mat.get-color-from-palette($arm-primary, 500) !important;
1152
-
1153
- i {
1154
- color: mat.get-color-from-palette($arm-primary, 500) !important;
1155
- }
1156
1107
 
1157
1108
  &:hover {
1158
1109
  background-color: mat.get-color-from-palette($arm-primary, 100) !important;
1110
+ color: map-get($arm-primary, contrast, 100) !important;
1159
1111
  }
1160
1112
 
1161
1113
  &:focus {
@@ -1166,14 +1118,10 @@ button.mat-mdc-outlined-button {
1166
1118
 
1167
1119
  &.mat-accent {
1168
1120
  border: 2px solid mat.get-color-from-palette($arm-accent, 500) !important;
1169
- color: mat.get-color-from-palette($arm-accent, 500) !important;
1170
-
1171
- i {
1172
- color: mat.get-color-from-palette($arm-accent, 500) !important;
1173
- }
1174
1121
 
1175
1122
  &:hover {
1176
1123
  background-color: mat.get-color-from-palette($arm-accent, 100) !important;
1124
+ color: map-get($arm-accent, contrast, 100) !important;
1177
1125
  }
1178
1126
 
1179
1127
  &:focus {
@@ -1184,14 +1132,10 @@ button.mat-mdc-outlined-button {
1184
1132
 
1185
1133
  &.mat-warn {
1186
1134
  border: 2px solid mat.get-color-from-palette($arm-warn, 500) !important;
1187
- color: mat.get-color-from-palette($arm-warn, 500) !important;
1188
-
1189
- i {
1190
- color: mat.get-color-from-palette($arm-warn, 500) !important;
1191
- }
1192
1135
 
1193
1136
  &:hover {
1194
1137
  background-color: mat.get-color-from-palette($arm-warn, 100) !important;
1138
+ color: map-get($arm-warn, contrast, 100) !important;
1195
1139
  }
1196
1140
 
1197
1141
  &:focus {
@@ -1202,14 +1146,10 @@ button.mat-mdc-outlined-button {
1202
1146
 
1203
1147
  &.mat-success {
1204
1148
  border: 2px solid mat.get-color-from-palette($arm-success, 500) !important;
1205
- color: mat.get-color-from-palette($arm-success, 500) !important;
1206
-
1207
- i {
1208
- color: mat.get-color-from-palette($arm-success, 500) !important;
1209
- }
1210
1149
 
1211
1150
  &:hover {
1212
1151
  background-color: mat.get-color-from-palette($arm-success, 100) !important;
1152
+ color: map-get($arm-success, contrast, 100) !important;
1213
1153
  }
1214
1154
 
1215
1155
  &:focus {
@@ -1219,15 +1159,11 @@ button.mat-mdc-outlined-button {
1219
1159
  }
1220
1160
 
1221
1161
  &.mat-error {
1222
- border: 2px solid mat.get-color-from-palette($arm-error, 500) !important;
1223
- color: mat.get-color-from-palette($arm-error, 500) !important;
1224
-
1225
- i {
1226
- color: mat.get-color-from-palette($arm-error, 500) !important;
1227
- }
1162
+ border: 2px solid mat.get-color-from-palette($arm-error, 900) !important;
1228
1163
 
1229
1164
  &:hover {
1230
1165
  background-color: mat.get-color-from-palette($arm-error, 100) !important;
1166
+ color: map-get($arm-error, contrast, 100);
1231
1167
  }
1232
1168
 
1233
1169
  &:focus {
@@ -1238,14 +1174,10 @@ button.mat-mdc-outlined-button {
1238
1174
 
1239
1175
  &.mat-info {
1240
1176
  border: 2px solid mat.get-color-from-palette($arm-info, 500) !important;
1241
- color: mat.get-color-from-palette($arm-info, 500) !important;
1242
-
1243
- i {
1244
- color: mat.get-color-from-palette($arm-info, 500) !important;
1245
- }
1246
1177
 
1247
1178
  &:hover {
1248
1179
  background-color: mat.get-color-from-palette($arm-info, 100) !important;
1180
+ color: map-get($arm-info, contrast, 100) !important;
1249
1181
  }
1250
1182
 
1251
1183
  &:focus {
@@ -1256,14 +1188,10 @@ button.mat-mdc-outlined-button {
1256
1188
 
1257
1189
  &.mat-neutral {
1258
1190
  border: 2px solid #000000de !important;
1259
- color: #000000de !important;
1260
-
1261
- i {
1262
- color: #000000de !important;
1263
- }
1264
1191
 
1265
1192
  &:hover {
1266
1193
  background-color: mat.get-color-from-palette($arm-neutral, 100) !important;
1194
+ color: map-get($arm-neutral, contrast, 100) !important;
1267
1195
  }
1268
1196
 
1269
1197
  &:focus {
@@ -1308,6 +1236,7 @@ button.mat-mdc-outlined-button {
1308
1236
  }
1309
1237
  }
1310
1238
 
1239
+ // not to be used 12/1/23 per design ...
1311
1240
  &.sof-stroked-icon-button {
1312
1241
  border: none !important;
1313
1242
  border-radius: 6px !important;
@@ -1316,19 +1245,11 @@ button.mat-mdc-outlined-button {
1316
1245
  &:enabled {
1317
1246
  &.mat-primary {
1318
1247
  background-color: mat.get-color-from-palette($arm-primary, 50) !important;
1319
- color: mat.get-color-from-palette($arm-primary, 500) !important;
1320
-
1321
- i {
1322
- color: mat.get-color-from-palette($arm-primary, 500) !important;
1323
- }
1248
+ color: map-get($arm-primary, contrast, 50) !important;
1324
1249
 
1325
1250
  &:hover {
1326
1251
  background-color: mat.get-color-from-palette($arm-primary, 100) !important;
1327
- color: white !important;
1328
-
1329
- i {
1330
- color: white !important;
1331
- }
1252
+ color: map-get($arm-primary, contrast, 100) !important;
1332
1253
  }
1333
1254
 
1334
1255
  &:focus {
@@ -1339,19 +1260,11 @@ button.mat-mdc-outlined-button {
1339
1260
 
1340
1261
  &.mat-accent {
1341
1262
  background-color: mat.get-color-from-palette($arm-accent, 50) !important;
1342
- color: mat.get-color-from-palette($arm-accent, 500) !important;
1343
-
1344
- i {
1345
- color: mat.get-color-from-palette($arm-accent, 500) !important;
1346
- }
1263
+ color: map-get($arm-accent, contrast, 50) !important;
1347
1264
 
1348
1265
  &:hover {
1349
1266
  background-color: mat.get-color-from-palette($arm-accent, 100) !important;
1350
- color: white !important;
1351
-
1352
- i {
1353
- color: white !important;
1354
- }
1267
+ color: map-get($arm-accent, contrast, 100) !important;
1355
1268
  }
1356
1269
 
1357
1270
  &:focus {
@@ -1362,19 +1275,11 @@ button.mat-mdc-outlined-button {
1362
1275
 
1363
1276
  &.mat-warn {
1364
1277
  background-color: mat.get-color-from-palette($arm-warn, 50) !important;
1365
- color: mat.get-color-from-palette($arm-warn, 500) !important;
1366
-
1367
- i {
1368
- color: mat.get-color-from-palette($arm-warn, 500) !important;
1369
- }
1278
+ color: map-get($arm-warn, contrast, 50) !important;
1370
1279
 
1371
1280
  &:hover {
1372
1281
  background-color: mat.get-color-from-palette($arm-warn, 100) !important;
1373
- color: white !important;
1374
-
1375
- i {
1376
- color: white !important;
1377
- }
1282
+ color: map-get($arm-warn, contrast, 100) !important;
1378
1283
  }
1379
1284
 
1380
1285
  &:focus {
@@ -1385,19 +1290,11 @@ button.mat-mdc-outlined-button {
1385
1290
 
1386
1291
  &.mat-success {
1387
1292
  background-color: mat.get-color-from-palette($arm-success, 50) !important;
1388
- color: mat.get-color-from-palette($arm-success, 500) !important;
1389
-
1390
- i {
1391
- color: mat.get-color-from-palette($arm-success, 500) !important;
1392
- }
1293
+ color: map-get($arm-success, contrast, 50) !important;
1393
1294
 
1394
1295
  &:hover {
1395
1296
  background-color: mat.get-color-from-palette($arm-success, 100) !important;
1396
- color: white !important;
1397
-
1398
- i {
1399
- color: white !important;
1400
- }
1297
+ color: map-get($arm-success, contrast, 100) !important;
1401
1298
  }
1402
1299
 
1403
1300
  &:focus {
@@ -1408,19 +1305,11 @@ button.mat-mdc-outlined-button {
1408
1305
 
1409
1306
  &.mat-info {
1410
1307
  background-color: mat.get-color-from-palette($arm-info, 50) !important;
1411
- color: mat.get-color-from-palette($arm-info, 500) !important;
1412
-
1413
- i {
1414
- color: mat.get-color-from-palette($arm-info, 500) !important;
1415
- }
1308
+ color: map-get($arm-info, contrast, 50) !important;
1416
1309
 
1417
1310
  &:hover {
1418
1311
  background-color: mat.get-color-from-palette($arm-info, 100) !important;
1419
- color: white !important;
1420
-
1421
- i {
1422
- color: white !important;
1423
- }
1312
+ color: map-get($arm-info, contrast, 100) !important;
1424
1313
  }
1425
1314
 
1426
1315
  &:focus {
@@ -1431,19 +1320,11 @@ button.mat-mdc-outlined-button {
1431
1320
 
1432
1321
  &.mat-error {
1433
1322
  background-color: mat.get-color-from-palette($arm-error, 50) !important;
1434
- color: mat.get-color-from-palette($arm-error, 500) !important;
1435
-
1436
- i {
1437
- color: mat.get-color-from-palette($arm-error, 500) !important;
1438
- }
1323
+ color: map-get($arm-error, contrast, 50) !important;
1439
1324
 
1440
1325
  &:hover {
1441
1326
  background-color: mat.get-color-from-palette($arm-error, 100) !important;
1442
- color: white !important;
1443
-
1444
- i {
1445
- color: white !important;
1446
- }
1327
+ color: map-get($arm-error, contrast, 100) !important;
1447
1328
  }
1448
1329
 
1449
1330
  &:focus {
@@ -1454,14 +1335,11 @@ button.mat-mdc-outlined-button {
1454
1335
 
1455
1336
  &.mat-neutral {
1456
1337
  background-color: mat.get-color-from-palette($arm-neutral, 50) !important;
1457
- color: #000000de !important;
1458
-
1459
- i {
1460
- color: #000000de !important;
1461
- }
1338
+ color: map-get($arm-neutral, contrast, 50) !important;
1462
1339
 
1463
1340
  &:hover {
1464
1341
  background-color: mat.get-color-from-palette($arm-neutral, 100) !important;
1342
+ color: map-get($arm-neutral, contrast, 100) !important;
1465
1343
  }
1466
1344
 
1467
1345
  &:focus {
@@ -1479,21 +1357,18 @@ button.mat-mdc-outlined-button {
1479
1357
  }
1480
1358
 
1481
1359
  &.sof-stroked-icon-button-outline {
1482
- background: #ffffff !important;
1360
+ background-color: #ffffff !important;
1361
+ color: #000000de !important;
1483
1362
  border-radius: 6px !important;
1484
1363
  padding: 0px !important;
1485
1364
 
1486
1365
  &:enabled {
1487
1366
  &.mat-primary {
1488
1367
  border: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
1489
- color: mat.get-color-from-palette($arm-primary, 500) !important;
1490
-
1491
- i {
1492
- color: mat.get-color-from-palette($arm-primary, 500) !important;
1493
- }
1494
1368
 
1495
1369
  &:hover {
1496
1370
  background-color: mat.get-color-from-palette($arm-primary, 100) !important;
1371
+ color: map-get($arm-primary, contrast, 100) !important;
1497
1372
  }
1498
1373
 
1499
1374
  &:focus {
@@ -1504,14 +1379,10 @@ button.mat-mdc-outlined-button {
1504
1379
 
1505
1380
  &.mat-accent {
1506
1381
  border: 2px solid mat.get-color-from-palette($arm-accent, 500) !important;
1507
- color: mat.get-color-from-palette($arm-accent, 500) !important;
1508
-
1509
- i {
1510
- color: mat.get-color-from-palette($arm-accent, 500) !important;
1511
- }
1512
1382
 
1513
1383
  &:hover {
1514
1384
  background-color: mat.get-color-from-palette($arm-accent, 100) !important;
1385
+ color: map-get($arm-accent, contrast, 100) !important;
1515
1386
  }
1516
1387
 
1517
1388
  &:focus {
@@ -1522,14 +1393,10 @@ button.mat-mdc-outlined-button {
1522
1393
 
1523
1394
  &.mat-warn {
1524
1395
  border: 2px solid mat.get-color-from-palette($arm-warn, 500) !important;
1525
- color: mat.get-color-from-palette($arm-warn, 500) !important;
1526
-
1527
- i {
1528
- color: mat.get-color-from-palette($arm-warn, 500) !important;
1529
- }
1530
1396
 
1531
1397
  &:hover {
1532
1398
  background-color: mat.get-color-from-palette($arm-warn, 100) !important;
1399
+ color: map-get($arm-warn, contrast, 100) !important;
1533
1400
  }
1534
1401
 
1535
1402
  &:focus {
@@ -1540,14 +1407,10 @@ button.mat-mdc-outlined-button {
1540
1407
 
1541
1408
  &.mat-success {
1542
1409
  border: 2px solid mat.get-color-from-palette($arm-success, 500) !important;
1543
- color: mat.get-color-from-palette($arm-success, 500) !important;
1544
-
1545
- i {
1546
- color: mat.get-color-from-palette($arm-success, 500) !important;
1547
- }
1548
1410
 
1549
1411
  &:hover {
1550
1412
  background-color: mat.get-color-from-palette($arm-success, 100) !important;
1413
+ color: map-get($arm-success, contrast, 100) !important;
1551
1414
  }
1552
1415
 
1553
1416
  &:focus {
@@ -1557,15 +1420,11 @@ button.mat-mdc-outlined-button {
1557
1420
  }
1558
1421
 
1559
1422
  &.mat-error {
1560
- border: 2px solid mat.get-color-from-palette($arm-error, 500) !important;
1561
- color: mat.get-color-from-palette($arm-error, 500) !important;
1562
-
1563
- i {
1564
- color: mat.get-color-from-palette($arm-error, 500) !important;
1565
- }
1423
+ border: 2px solid mat.get-color-from-palette($arm-error, 900) !important;
1566
1424
 
1567
1425
  &:hover {
1568
1426
  background-color: mat.get-color-from-palette($arm-error, 100) !important;
1427
+ color: map-get($arm-error, contrast, 100);
1569
1428
  }
1570
1429
 
1571
1430
  &:focus {
@@ -1576,14 +1435,10 @@ button.mat-mdc-outlined-button {
1576
1435
 
1577
1436
  &.mat-info {
1578
1437
  border: 2px solid mat.get-color-from-palette($arm-info, 500) !important;
1579
- color: mat.get-color-from-palette($arm-info, 500) !important;
1580
-
1581
- i {
1582
- color: mat.get-color-from-palette($arm-info, 500) !important;
1583
- }
1584
1438
 
1585
1439
  &:hover {
1586
1440
  background-color: mat.get-color-from-palette($arm-info, 100) !important;
1441
+ color: map-get($arm-info, contrast, 100) !important;
1587
1442
  }
1588
1443
 
1589
1444
  &:focus {
@@ -1594,14 +1449,10 @@ button.mat-mdc-outlined-button {
1594
1449
 
1595
1450
  &.mat-neutral {
1596
1451
  border: 2px solid #000000de !important;
1597
- color: #000000de !important;
1598
-
1599
- i {
1600
- color: #000000de !important;
1601
- }
1602
1452
 
1603
1453
  &:hover {
1604
1454
  background-color: mat.get-color-from-palette($arm-neutral, 100) !important;
1455
+ color: map-get($arm-neutral, contrast, 100) !important;
1605
1456
  }
1606
1457
 
1607
1458
  &:focus {
@@ -1724,7 +1575,7 @@ mat-card {
1724
1575
  font-family: "Poppins" !important;
1725
1576
 
1726
1577
  &.mat-form-field-invalid {
1727
- .mat-mdc-form-field-flex > div.mdc-notched-outline > * {
1578
+ .mat-mdc-form-field-flex>div.mdc-notched-outline>* {
1728
1579
  border-color: mat.get-color-from-palette($arm-error, 900) !important;
1729
1580
  }
1730
1581
 
@@ -1750,7 +1601,7 @@ mat-card {
1750
1601
  background-color: #f7f7f7 !important;
1751
1602
  }
1752
1603
 
1753
- .mat-mdc-form-field-flex > div.mdc-notched-outline {
1604
+ .mat-mdc-form-field-flex>div.mdc-notched-outline {
1754
1605
  color: mat.get-color-from-palette($arm-primary, 500) !important;
1755
1606
  }
1756
1607
 
@@ -1838,6 +1689,7 @@ mat-optgroup mat-option {
1838
1689
  // MatRadio Overrides [START]
1839
1690
  // Color Styles [START]
1840
1691
  mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
1692
+
1841
1693
  &.mat-primary,
1842
1694
  &[color="primary"] {
1843
1695
  --mdc-radio-selected-focus-icon-color: #{mat.get-color-from-palette($arm-primary, 500)};
@@ -1927,7 +1779,7 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
1927
1779
  }
1928
1780
 
1929
1781
  .mat-radio-ripple,
1930
- .mdc-radio:hover .mdc-radio__native-control:not([disabled]) ~ .mdc-radio-ripple {
1782
+ .mdc-radio:hover .mdc-radio__native-control:not([disabled])~.mdc-radio-ripple {
1931
1783
  width: 40px;
1932
1784
  height: 40px;
1933
1785
  transform: translate(1px, 1px) !important;
@@ -1945,6 +1797,7 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
1945
1797
  // MatSlider Overrides [START]
1946
1798
 
1947
1799
  ::ng-deep mat-slider.sof-slider {
1800
+
1948
1801
  // Color Styles [START]
1949
1802
  &.mat-primary {
1950
1803
  --mdc-slider-handle-color: #{mat.get-color-from-palette($arm-primary, 500)};
@@ -2058,12 +1911,11 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
2058
1911
  --mdc-checkbox-selected-checkmark-color: #fff;
2059
1912
  }
2060
1913
 
2061
- .mdc-checkbox__native-control:disabled ~ .mdc-checkbox__background .mdc-checkbox__checkmark {
1914
+ .mdc-checkbox__native-control:disabled~.mdc-checkbox__background .mdc-checkbox__checkmark {
2062
1915
  --mdc-checkbox-disabled-selected-checkmark-color: rgba(0, 0, 0, 0.38);
2063
1916
  }
2064
1917
 
2065
- .mdc-checkbox__native-control[disabled]:not(:indeterminate):not([data-indeterminate="true"])
2066
- ~ .mdc-checkbox__background {
1918
+ .mdc-checkbox__native-control[disabled]:not(:indeterminate):not([data-indeterminate="true"])~.mdc-checkbox__background {
2067
1919
  background-color: #f7f7f7 !important;
2068
1920
  border: 2px solid rgba(0, 0, 0, 0.38);
2069
1921
  }
@@ -2079,7 +1931,7 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
2079
1931
  --mdc-checkbox-selected-icon-color: #{mat.get-color-from-palette($arm-warn, 500)};
2080
1932
  --mdc-checkbox-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-warn, 500)};
2081
1933
 
2082
- .mdc-checkbox--selected ~ .mdc-checkbox__ripple {
1934
+ .mdc-checkbox--selected~.mdc-checkbox__ripple {
2083
1935
  background: mat.get-color-from-palette($arm-warn, 500);
2084
1936
  }
2085
1937
  }
@@ -2090,7 +1942,7 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
2090
1942
  --mdc-checkbox-selected-icon-color: #{mat.get-color-from-palette($arm-success, 500)};
2091
1943
  --mdc-checkbox-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-success, 500)};
2092
1944
 
2093
- .mdc-checkbox--selected ~ .mdc-checkbox__ripple {
1945
+ .mdc-checkbox--selected~.mdc-checkbox__ripple {
2094
1946
  background: mat.get-color-from-palette($arm-success, 500);
2095
1947
  }
2096
1948
  }
@@ -2101,7 +1953,7 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
2101
1953
  --mdc-checkbox-selected-icon-color: #{mat.get-color-from-palette($arm-info, 500)};
2102
1954
  --mdc-checkbox-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-info, 500)};
2103
1955
 
2104
- .mdc-checkbox--selected ~ .mdc-checkbox__ripple {
1956
+ .mdc-checkbox--selected~.mdc-checkbox__ripple {
2105
1957
  background: mat.get-color-from-palette($arm-info, 500);
2106
1958
  }
2107
1959
  }
@@ -2112,7 +1964,7 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
2112
1964
  --mdc-checkbox-selected-icon-color: #{mat.get-color-from-palette($arm-error, 500)};
2113
1965
  --mdc-checkbox-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-error, 500)};
2114
1966
 
2115
- .mdc-checkbox--selected ~ .mdc-checkbox__ripple {
1967
+ .mdc-checkbox--selected~.mdc-checkbox__ripple {
2116
1968
  background: mat.get-color-from-palette($arm-error, 500);
2117
1969
  }
2118
1970
  }
@@ -2123,7 +1975,7 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
2123
1975
  --mdc-checkbox-selected-icon-color: #{mat.get-color-from-palette($arm-neutral, 500)};
2124
1976
  --mdc-checkbox-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-neutral, 500)};
2125
1977
 
2126
- .mdc-checkbox--selected ~ .mdc-checkbox__ripple {
1978
+ .mdc-checkbox--selected~.mdc-checkbox__ripple {
2127
1979
  background: mat.get-color-from-palette($arm-neutral, 500);
2128
1980
  }
2129
1981
  }
@@ -2149,7 +2001,7 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
2149
2001
 
2150
2002
  .mdc-checkbox__ripple,
2151
2003
  .mat-mdc-checkbox-ripple,
2152
- .mdc-checkbox:hover .mdc-checkbox__native-control:not([disabled]) ~ .mdc-checkbox__ripple {
2004
+ .mdc-checkbox:hover .mdc-checkbox__native-control:not([disabled])~.mdc-checkbox__ripple {
2153
2005
  width: 40px;
2154
2006
  height: 40px;
2155
2007
  transform: translate(1px, 1px) !important;
@@ -2747,7 +2599,7 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
2747
2599
  width: 100%;
2748
2600
 
2749
2601
  .mat-mdc-form-field-infix,
2750
- .mat-mdc-form-field-infix > input {
2602
+ .mat-mdc-form-field-infix>input {
2751
2603
  width: 100% !important;
2752
2604
  }
2753
2605
  }
@@ -3002,8 +2854,7 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
3002
2854
 
3003
2855
  /** Calendar Settings */
3004
2856
  ::ng-deep {
3005
- .mat-calendar-body-disabled
3006
- > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
2857
+ .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
3007
2858
  color: rgba(0, 0, 0, 0.38) !important;
3008
2859
  }
3009
2860
 
@@ -3016,14 +2867,12 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
3016
2867
  letter-spacing: 0px !important;
3017
2868
  }
3018
2869
 
3019
- .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover
3020
- > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
2870
+ .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
3021
2871
  background-color: mat.get-color-from-palette($arm-primary, 500) !important;
3022
2872
  color: white;
3023
2873
  }
3024
2874
 
3025
- body .cdk-program-focused .mat-calendar-body-active
3026
- > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
2875
+ body .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
3027
2876
  color: white;
3028
2877
  }
3029
2878
 
@@ -3065,4 +2914,4 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
3065
2914
  width: -webkit-fill-available;
3066
2915
  right: 20px;
3067
2916
  }
3068
- }
2917
+ }