@softheon/armature 15.13.0 → 15.14.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/assets/styles/sof-styles.scss +125 -116
  2. package/esm2020/lib/base-components/sof-modal/sof-modal.component.mjs +3 -3
  3. package/esm2020/lib/header/components/header/header.component.mjs +3 -3
  4. package/esm2020/lib/navigation/components/navigation/navigation.component.mjs +3 -3
  5. package/fesm2015/softheon-armature.mjs +6 -6
  6. package/fesm2015/softheon-armature.mjs.map +1 -1
  7. package/fesm2020/softheon-armature.mjs +6 -6
  8. package/fesm2020/softheon-armature.mjs.map +1 -1
  9. package/package.json +1 -1
package/assets/styles/sof-styles.scss CHANGED
@@ -373,6 +373,8 @@ mat-form-field {
373
373
  }
374
374
 
375
375
  button.mat-mdc-button {
376
+ --mat-mdc-button-persistent-ripple-color: none !important;
377
+
376
378
  &.sof-button {
377
379
  padding: 0px 24px !important;
378
380
  height: 48px !important;
@@ -402,7 +404,8 @@ button.mat-mdc-button {
402
404
  }
403
405
 
404
406
  &:focus {
405
- background-color: mat.get-color-from-palette($arm-primary, 100);
407
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
408
+ outline-offset: 2px !important;
406
409
  }
407
410
  }
408
411
 
@@ -414,7 +417,8 @@ button.mat-mdc-button {
414
417
  }
415
418
 
416
419
  &:focus {
417
- background-color: mat.get-color-from-palette($arm-accent, 100);
420
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
421
+ outline-offset: 2px !important;
418
422
  }
419
423
  }
420
424
 
@@ -426,7 +430,8 @@ button.mat-mdc-button {
426
430
  }
427
431
 
428
432
  &:focus {
429
- background-color: mat.get-color-from-palette($arm-warn, 100);
433
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
434
+ outline-offset: 2px !important;
430
435
  }
431
436
  }
432
437
 
@@ -438,7 +443,8 @@ button.mat-mdc-button {
438
443
  }
439
444
 
440
445
  &:focus {
441
- background-color: mat.get-color-from-palette($arm-success, 100);
446
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
447
+ outline-offset: 2px !important;
442
448
  }
443
449
  }
444
450
 
@@ -450,7 +456,8 @@ button.mat-mdc-button {
450
456
  }
451
457
 
452
458
  &:focus {
453
- background-color: mat.get-color-from-palette($arm-error, 100);
459
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
460
+ outline-offset: 2px !important;
454
461
  }
455
462
  }
456
463
 
@@ -462,7 +469,8 @@ button.mat-mdc-button {
462
469
  }
463
470
 
464
471
  &:focus {
465
- background-color: mat.get-color-from-palette($arm-info, 100);
472
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
473
+ outline-offset: 2px !important;
466
474
  }
467
475
  }
468
476
 
@@ -474,7 +482,8 @@ button.mat-mdc-button {
474
482
  }
475
483
 
476
484
  &:focus {
477
- background-color: mat.get-color-from-palette($arm-neutral, 100);
485
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
486
+ outline-offset: 2px !important;
478
487
  }
479
488
  }
480
489
  }
@@ -522,7 +531,8 @@ button.mat-mdc-button {
522
531
  }
523
532
 
524
533
  &:focus {
525
- background-color: mat.get-color-from-palette($arm-primary, 100);
534
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
535
+ outline-offset: 2px !important;
526
536
  }
527
537
  }
528
538
 
@@ -534,7 +544,8 @@ button.mat-mdc-button {
534
544
  }
535
545
 
536
546
  &:focus {
537
- background-color: mat.get-color-from-palette($arm-accent, 100);
547
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
548
+ outline-offset: 2px !important;
538
549
  }
539
550
  }
540
551
 
@@ -546,7 +557,8 @@ button.mat-mdc-button {
546
557
  }
547
558
 
548
559
  &:focus {
549
- background-color: mat.get-color-from-palette($arm-warn, 100);
560
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
561
+ outline-offset: 2px !important;
550
562
  }
551
563
  }
552
564
 
@@ -558,7 +570,8 @@ button.mat-mdc-button {
558
570
  }
559
571
 
560
572
  &:focus {
561
- background-color: mat.get-color-from-palette($arm-success, 100);
573
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
574
+ outline-offset: 2px !important;
562
575
  }
563
576
  }
564
577
 
@@ -570,7 +583,8 @@ button.mat-mdc-button {
570
583
  }
571
584
 
572
585
  &:focus {
573
- background-color: mat.get-color-from-palette($arm-error, 100);
586
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
587
+ outline-offset: 2px !important;
574
588
  }
575
589
  }
576
590
 
@@ -582,7 +596,8 @@ button.mat-mdc-button {
582
596
  }
583
597
 
584
598
  &:focus {
585
- background-color: mat.get-color-from-palette($arm-info, 100);
599
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
600
+ outline-offset: 2px !important;
586
601
  }
587
602
  }
588
603
 
@@ -594,7 +609,8 @@ button.mat-mdc-button {
594
609
  }
595
610
 
596
611
  &:focus {
597
- background-color: mat.get-color-from-palette($arm-neutral, 100);
612
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
613
+ outline-offset: 2px !important;
598
614
  }
599
615
  }
600
616
  }
@@ -628,6 +644,8 @@ button.mat-mdc-button {
628
644
  }
629
645
 
630
646
  button.mat-mdc-unelevated-button {
647
+ --mat-mdc-button-persistent-ripple-color: none !important;
648
+
631
649
  &.sof-flat-button {
632
650
  padding: 0px 24px !important;
633
651
  height: 48px !important;
@@ -659,7 +677,8 @@ button.mat-mdc-unelevated-button {
659
677
  }
660
678
 
661
679
  &:focus {
662
- background-color: mat.get-color-from-palette($arm-primary, 900);
680
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
681
+ outline-offset: 2px !important;
663
682
  }
664
683
  }
665
684
 
@@ -671,7 +690,8 @@ button.mat-mdc-unelevated-button {
671
690
  }
672
691
 
673
692
  &:focus {
674
- background-color: mat.get-color-from-palette($arm-accent, 900);
693
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
694
+ outline-offset: 2px !important;
675
695
  }
676
696
  }
677
697
 
@@ -683,7 +703,8 @@ button.mat-mdc-unelevated-button {
683
703
  }
684
704
 
685
705
  &:focus {
686
- background-color: mat.get-color-from-palette($arm-warn, 900);
706
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
707
+ outline-offset: 2px !important;
687
708
  }
688
709
  }
689
710
 
@@ -695,7 +716,8 @@ button.mat-mdc-unelevated-button {
695
716
  }
696
717
 
697
718
  &:focus {
698
- background-color: mat.get-color-from-palette($arm-success, 900);
719
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
720
+ outline-offset: 2px !important;
699
721
  }
700
722
  }
701
723
 
@@ -707,7 +729,8 @@ button.mat-mdc-unelevated-button {
707
729
  }
708
730
 
709
731
  &:focus {
710
- background-color: mat.get-color-from-palette($arm-error, 900);
732
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
733
+ outline-offset: 2px !important;
711
734
  }
712
735
  }
713
736
 
@@ -719,7 +742,8 @@ button.mat-mdc-unelevated-button {
719
742
  }
720
743
 
721
744
  &:focus {
722
- background-color: mat.get-color-from-palette($arm-info, 900);
745
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
746
+ outline-offset: 2px !important;
723
747
  }
724
748
  }
725
749
 
@@ -731,7 +755,8 @@ button.mat-mdc-unelevated-button {
731
755
  }
732
756
 
733
757
  &:focus {
734
- background-color: mat.get-color-from-palette($arm-neutral, 900);
758
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
759
+ outline-offset: 2px !important;
735
760
  }
736
761
  }
737
762
 
@@ -786,7 +811,8 @@ button.mat-mdc-unelevated-button {
786
811
  }
787
812
 
788
813
  &:focus {
789
- background-color: mat.get-color-from-palette($arm-primary, 900);
814
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
815
+ outline-offset: 2px !important;
790
816
  }
791
817
  }
792
818
 
@@ -798,7 +824,8 @@ button.mat-mdc-unelevated-button {
798
824
  }
799
825
 
800
826
  &:focus {
801
- background-color: mat.get-color-from-palette($arm-accent, 900);
827
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
828
+ outline-offset: 2px !important;
802
829
  }
803
830
  }
804
831
 
@@ -810,7 +837,8 @@ button.mat-mdc-unelevated-button {
810
837
  }
811
838
 
812
839
  &:focus {
813
- background-color: mat.get-color-from-palette($arm-warn, 900);
840
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
841
+ outline-offset: 2px !important;
814
842
  }
815
843
  }
816
844
 
@@ -822,7 +850,8 @@ button.mat-mdc-unelevated-button {
822
850
  }
823
851
 
824
852
  &:focus {
825
- background-color: mat.get-color-from-palette($arm-success, 900);
853
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
854
+ outline-offset: 2px !important;
826
855
  }
827
856
  }
828
857
 
@@ -834,7 +863,8 @@ button.mat-mdc-unelevated-button {
834
863
  }
835
864
 
836
865
  &:focus {
837
- background-color: mat.get-color-from-palette($arm-error, 900);
866
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
867
+ outline-offset: 2px !important;
838
868
  }
839
869
  }
840
870
 
@@ -846,7 +876,8 @@ button.mat-mdc-unelevated-button {
846
876
  }
847
877
 
848
878
  &:focus {
849
- background-color: mat.get-color-from-palette($arm-info, 900);
879
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
880
+ outline-offset: 2px !important;
850
881
  }
851
882
  }
852
883
 
@@ -858,7 +889,8 @@ button.mat-mdc-unelevated-button {
858
889
  }
859
890
 
860
891
  &:focus {
861
- background-color: mat.get-color-from-palette($arm-neutral, 900);
892
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
893
+ outline-offset: 2px !important;
862
894
  }
863
895
  }
864
896
 
@@ -897,6 +929,8 @@ button.mat-mdc-unelevated-button {
897
929
  }
898
930
 
899
931
  button.mat-mdc-outlined-button {
932
+ --mat-mdc-button-persistent-ripple-color: none !important;
933
+
900
934
  &.sof-stroked-button {
901
935
  padding: 0px 24px !important;
902
936
  height: 48px !important;
@@ -937,12 +971,9 @@ button.mat-mdc-outlined-button {
937
971
  }
938
972
 
939
973
  &:focus {
940
- background-color: mat.get-color-from-palette($arm-primary, 200) !important;
941
- color: white !important;
942
-
943
- i {
944
- color: white !important;
945
- }
974
+ background-color: mat.get-color-from-palette($arm-primary, 50) !important;
975
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
976
+ outline-offset: 2px !important;
946
977
  }
947
978
  }
948
979
 
@@ -964,12 +995,9 @@ button.mat-mdc-outlined-button {
964
995
  }
965
996
 
966
997
  &:focus {
967
- background-color: mat.get-color-from-palette($arm-accent, 200) !important;
968
- color: white !important;
969
-
970
- i {
971
- color: white !important;
972
- }
998
+ background-color: mat.get-color-from-palette($arm-accent, 50) !important;
999
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1000
+ outline-offset: 2px !important;
973
1001
  }
974
1002
  }
975
1003
 
@@ -991,12 +1019,9 @@ button.mat-mdc-outlined-button {
991
1019
  }
992
1020
 
993
1021
  &:focus {
994
- background-color: mat.get-color-from-palette($arm-warn, 200) !important;
995
- color: white !important;
996
-
997
- i {
998
- color: white !important;
999
- }
1022
+ background-color: mat.get-color-from-palette($arm-warn, 50) !important;
1023
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1024
+ outline-offset: 2px !important;
1000
1025
  }
1001
1026
  }
1002
1027
 
@@ -1018,12 +1043,9 @@ button.mat-mdc-outlined-button {
1018
1043
  }
1019
1044
 
1020
1045
  &:focus {
1021
- background-color: mat.get-color-from-palette($arm-success, 200) !important;
1022
- color: white !important;
1023
-
1024
- i {
1025
- color: white !important;
1026
- }
1046
+ background-color: mat.get-color-from-palette($arm-success, 50) !important;
1047
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1048
+ outline-offset: 2px !important;
1027
1049
  }
1028
1050
  }
1029
1051
 
@@ -1045,12 +1067,9 @@ button.mat-mdc-outlined-button {
1045
1067
  }
1046
1068
 
1047
1069
  &:focus {
1048
- background-color: mat.get-color-from-palette($arm-info, 200) !important;
1049
- color: white !important;
1050
-
1051
- i {
1052
- color: white !important;
1053
- }
1070
+ background-color: mat.get-color-from-palette($arm-info, 50) !important;
1071
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1072
+ outline-offset: 2px !important;
1054
1073
  }
1055
1074
  }
1056
1075
 
@@ -1072,12 +1091,9 @@ button.mat-mdc-outlined-button {
1072
1091
  }
1073
1092
 
1074
1093
  &:focus {
1075
- background-color: mat.get-color-from-palette($arm-error, 200) !important;
1076
- color: white !important;
1077
-
1078
- i {
1079
- color: white !important;
1080
- }
1094
+ background-color: mat.get-color-from-palette($arm-error, 50) !important;
1095
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1096
+ outline-offset: 2px !important;
1081
1097
  }
1082
1098
  }
1083
1099
 
@@ -1094,7 +1110,9 @@ button.mat-mdc-outlined-button {
1094
1110
  }
1095
1111
 
1096
1112
  &:focus {
1097
- background-color: mat.get-color-from-palette($arm-neutral, 200) !important;
1113
+ background-color: mat.get-color-from-palette($arm-neutral, 50) !important;
1114
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1115
+ outline-offset: 2px !important;
1098
1116
  }
1099
1117
  }
1100
1118
  }
@@ -1141,7 +1159,8 @@ button.mat-mdc-outlined-button {
1141
1159
  }
1142
1160
 
1143
1161
  &:focus {
1144
- background-color: mat.get-color-from-palette($arm-primary, 200) !important;
1162
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1163
+ outline-offset: 2px !important;
1145
1164
  }
1146
1165
  }
1147
1166
 
@@ -1158,7 +1177,8 @@ button.mat-mdc-outlined-button {
1158
1177
  }
1159
1178
 
1160
1179
  &:focus {
1161
- background-color: mat.get-color-from-palette($arm-accent, 200) !important;
1180
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1181
+ outline-offset: 2px !important;
1162
1182
  }
1163
1183
  }
1164
1184
 
@@ -1175,7 +1195,8 @@ button.mat-mdc-outlined-button {
1175
1195
  }
1176
1196
 
1177
1197
  &:focus {
1178
- background-color: mat.get-color-from-palette($arm-warn, 200) !important;
1198
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1199
+ outline-offset: 2px !important;
1179
1200
  }
1180
1201
  }
1181
1202
 
@@ -1192,7 +1213,8 @@ button.mat-mdc-outlined-button {
1192
1213
  }
1193
1214
 
1194
1215
  &:focus {
1195
- background-color: mat.get-color-from-palette($arm-success, 200) !important;
1216
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1217
+ outline-offset: 2px !important;
1196
1218
  }
1197
1219
  }
1198
1220
 
@@ -1209,7 +1231,8 @@ button.mat-mdc-outlined-button {
1209
1231
  }
1210
1232
 
1211
1233
  &:focus {
1212
- background-color: mat.get-color-from-palette($arm-error, 200) !important;
1234
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1235
+ outline-offset: 2px !important;
1213
1236
  }
1214
1237
  }
1215
1238
 
@@ -1226,7 +1249,8 @@ button.mat-mdc-outlined-button {
1226
1249
  }
1227
1250
 
1228
1251
  &:focus {
1229
- background-color: mat.get-color-from-palette($arm-info, 200) !important;
1252
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1253
+ outline-offset: 2px !important;
1230
1254
  }
1231
1255
  }
1232
1256
 
@@ -1243,7 +1267,8 @@ button.mat-mdc-outlined-button {
1243
1267
  }
1244
1268
 
1245
1269
  &:focus {
1246
- background-color: mat.get-color-from-palette($arm-neutral, 200) !important;
1270
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1271
+ outline-offset: 2px !important;
1247
1272
  }
1248
1273
  }
1249
1274
  }
@@ -1307,12 +1332,8 @@ button.mat-mdc-outlined-button {
1307
1332
  }
1308
1333
 
1309
1334
  &:focus {
1310
- background-color: mat.get-color-from-palette($arm-primary, 200) !important;
1311
- color: white !important;
1312
-
1313
- i {
1314
- color: white !important;
1315
- }
1335
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1336
+ outline-offset: 2px !important;
1316
1337
  }
1317
1338
  }
1318
1339
 
@@ -1334,12 +1355,8 @@ button.mat-mdc-outlined-button {
1334
1355
  }
1335
1356
 
1336
1357
  &:focus {
1337
- background-color: mat.get-color-from-palette($arm-accent, 200) !important;
1338
- color: white !important;
1339
-
1340
- i {
1341
- color: white !important;
1342
- }
1358
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1359
+ outline-offset: 2px !important;
1343
1360
  }
1344
1361
  }
1345
1362
 
@@ -1361,12 +1378,8 @@ button.mat-mdc-outlined-button {
1361
1378
  }
1362
1379
 
1363
1380
  &:focus {
1364
- background-color: mat.get-color-from-palette($arm-warn, 200) !important;
1365
- color: white !important;
1366
-
1367
- i {
1368
- color: white !important;
1369
- }
1381
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1382
+ outline-offset: 2px !important;
1370
1383
  }
1371
1384
  }
1372
1385
 
@@ -1388,12 +1401,8 @@ button.mat-mdc-outlined-button {
1388
1401
  }
1389
1402
 
1390
1403
  &:focus {
1391
- background-color: mat.get-color-from-palette($arm-success, 200) !important;
1392
- color: white !important;
1393
-
1394
- i {
1395
- color: white !important;
1396
- }
1404
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1405
+ outline-offset: 2px !important;
1397
1406
  }
1398
1407
  }
1399
1408
 
@@ -1415,12 +1424,8 @@ button.mat-mdc-outlined-button {
1415
1424
  }
1416
1425
 
1417
1426
  &:focus {
1418
- background-color: mat.get-color-from-palette($arm-info, 200) !important;
1419
- color: white !important;
1420
-
1421
- i {
1422
- color: white !important;
1423
- }
1427
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1428
+ outline-offset: 2px !important;
1424
1429
  }
1425
1430
  }
1426
1431
 
@@ -1442,12 +1447,8 @@ button.mat-mdc-outlined-button {
1442
1447
  }
1443
1448
 
1444
1449
  &:focus {
1445
- background-color: mat.get-color-from-palette($arm-error, 200) !important;
1446
- color: white !important;
1447
-
1448
- i {
1449
- color: white !important;
1450
- }
1450
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1451
+ outline-offset: 2px !important;
1451
1452
  }
1452
1453
  }
1453
1454
 
@@ -1464,7 +1465,8 @@ button.mat-mdc-outlined-button {
1464
1465
  }
1465
1466
 
1466
1467
  &:focus {
1467
- background-color: mat.get-color-from-palette($arm-neutral, 200) !important;
1468
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1469
+ outline-offset: 2px !important;
1468
1470
  }
1469
1471
  }
1470
1472
  }
@@ -1495,7 +1497,8 @@ button.mat-mdc-outlined-button {
1495
1497
  }
1496
1498
 
1497
1499
  &:focus {
1498
- background-color: mat.get-color-from-palette($arm-primary, 200) !important;
1500
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1501
+ outline-offset: 2px !important;
1499
1502
  }
1500
1503
  }
1501
1504
 
@@ -1512,7 +1515,8 @@ button.mat-mdc-outlined-button {
1512
1515
  }
1513
1516
 
1514
1517
  &:focus {
1515
- background-color: mat.get-color-from-palette($arm-accent, 200) !important;
1518
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1519
+ outline-offset: 2px !important;
1516
1520
  }
1517
1521
  }
1518
1522
 
@@ -1529,7 +1533,8 @@ button.mat-mdc-outlined-button {
1529
1533
  }
1530
1534
 
1531
1535
  &:focus {
1532
- background-color: mat.get-color-from-palette($arm-warn, 200) !important;
1536
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1537
+ outline-offset: 2px !important;
1533
1538
  }
1534
1539
  }
1535
1540
 
@@ -1546,7 +1551,8 @@ button.mat-mdc-outlined-button {
1546
1551
  }
1547
1552
 
1548
1553
  &:focus {
1549
- background-color: mat.get-color-from-palette($arm-success, 200) !important;
1554
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1555
+ outline-offset: 2px !important;
1550
1556
  }
1551
1557
  }
1552
1558
 
@@ -1563,7 +1569,8 @@ button.mat-mdc-outlined-button {
1563
1569
  }
1564
1570
 
1565
1571
  &:focus {
1566
- background-color: mat.get-color-from-palette($arm-error, 200) !important;
1572
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1573
+ outline-offset: 2px !important;
1567
1574
  }
1568
1575
  }
1569
1576
 
@@ -1580,7 +1587,8 @@ button.mat-mdc-outlined-button {
1580
1587
  }
1581
1588
 
1582
1589
  &:focus {
1583
- background-color: mat.get-color-from-palette($arm-info, 200) !important;
1590
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1591
+ outline-offset: 2px !important;
1584
1592
  }
1585
1593
  }
1586
1594
 
@@ -1597,7 +1605,8 @@ button.mat-mdc-outlined-button {
1597
1605
  }
1598
1606
 
1599
1607
  &:focus {
1600
- background-color: mat.get-color-from-palette($arm-neutral, 200) !important;
1608
+ outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1609
+ outline-offset: 2px !important;
1601
1610
  }
1602
1611
  }
1603
1612
  }