@posiwise/core-styles 1.0.0 → 1.0.2

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 (33) hide show
  1. package/app.scss +45 -0
  2. package/css/google-fonts.css +4 -1
  3. package/css/hopscotch.css +1 -1
  4. package/package.json +3 -3
  5. package/scss/_dashboard.scss +1 -1
  6. package/scss/_dynamic-styles.scss +873 -7
  7. package/scss/common/landing-page-a/landing-page-style-1.scss +7 -7
  8. package/scss/common/landing-page-b/banner.scss +8 -8
  9. package/scss/common/landing-page-b/contact-us.scss +4 -4
  10. package/scss/common/landing-page-b/explainer.scss +6 -6
  11. package/scss/common/landing-page-b/explainer2.scss +1 -1
  12. package/scss/common/landing-page-b/landing-page-style-2.scss +4 -3
  13. package/scss/custom-bootstrap/_badge.scss +35 -25
  14. package/scss/custom-bootstrap/_type.scss +7 -1
  15. package/scss/dashboard/_bootstrap-social.scss +25 -25
  16. package/scss/dashboard/_coming-soon.scss +1 -1
  17. package/scss/dashboard/_components.scss +1 -1
  18. package/scss/dashboard/_email.scss +7 -7
  19. package/scss/dashboard/_helper.scss +17 -7
  20. package/scss/dashboard/_icons.scss +7 -0
  21. package/scss/dashboard/_misc.scss +1 -1
  22. package/scss/dashboard/_palette.scss +284 -125
  23. package/scss/dashboard/_profile.scss +1 -1
  24. package/scss/dashboard/_tabs.scss +18 -0
  25. package/scss/dashboard/mixins/_utilities.scss +1 -1
  26. package/scss/dashboard/mixins/_vendor-prefixes.scss +2 -2
  27. package/scss/plugins/perfect-scrollbar/_variables.scss +1 -1
  28. package/scss/public-pages/_layout.scss +8 -1
  29. package/scss/shared/_prime-ng.scss +278 -180
  30. package/scss/variables/_app-colors-variables.scss +7 -1
  31. package/scss/variables/_branding-variables.scss +9 -7
  32. package/scss/variables/_generic-variables.scss +5 -5
  33. package/scss/variables/_primeng-variables.scss +38 -38
package/scss/shared/_prime-ng.scss CHANGED
@@ -43,24 +43,28 @@ body {
43
43
  opacity: 0.5;
44
44
  }
45
45
 
46
- .ui-inputtext {
46
+ /* PrimeNG 19: Support both old (ui-*) and new (p-*) class names for migration */
47
+ .ui-inputtext,
48
+ .p-inputtext {
47
49
  appearance: none;
48
50
  background: rgb(255 255 255);
49
- border: 1px solid $uiinputText;
51
+ border: 1px solid $ui-input-text;
50
52
  color: $font-color-main;
51
53
  font-size: 13px;
52
54
  padding: 0.429em;
53
- transition: border-color 0.3s, box-shadow 0.3s;
55
+ transition:
56
+ border-color 0.3s,
57
+ box-shadow 0.3s;
54
58
 
55
59
  &:enabled {
56
60
  &:hover {
57
- &:not(.ui-state-error) {
61
+ &:not(.ui-state-error):not(.p-invalid) {
58
62
  border-color: $toggleButton;
59
63
  }
60
64
  }
61
65
 
62
66
  &:focus {
63
- &:not(.ui-state-error) {
67
+ &:not(.ui-state-error):not(.p-invalid) {
64
68
  border-color: $toggleButton;
65
69
  box-shadow: 0 0 6px 0 rgb(0 0 0 / 16%);
66
70
  outline: 0 none;
@@ -82,11 +86,13 @@ body {
82
86
 
83
87
  .ui-chkbox-box {
84
88
  background-color: rgb(255 255 255);
85
- border: 1px solid $uiinputText;
89
+ border: 1px solid $ui-input-text;
86
90
  border-radius: 0;
87
91
  height: 20px;
88
92
  text-align: center;
89
- transition: background-color 0.3s, border-color 0.3s;
93
+ transition:
94
+ background-color 0.3s,
95
+ border-color 0.3s;
90
96
  width: 20px;
91
97
 
92
98
  &:not(.ui-state-disabled) {
@@ -142,12 +148,14 @@ body {
142
148
 
143
149
  .ui-radiobutton-box {
144
150
  background-color: rgb(255 255 255);
145
- border: 1px solid $uiinputText;
151
+ border: 1px solid $ui-input-text;
146
152
  border-radius: 50%;
147
153
  height: 20px;
148
154
  position: relative;
149
155
  text-align: center;
150
- transition: background-color 0.3s, border-color 0.3s;
156
+ transition:
157
+ background-color 0.3s,
158
+ border-color 0.3s;
151
159
  width: 20px;
152
160
 
153
161
  &:not(.ui-state-disabled) {
@@ -218,12 +226,12 @@ body {
218
226
 
219
227
  .p-inputswitch-slider {
220
228
  background-color: rgb(255 255 255);
221
- border: 1px solid $uiinputText;
229
+ border: 1px solid $ui-input-text;
222
230
  border-radius: 8px;
223
231
  transition: border-color 0.3s;
224
232
 
225
233
  &::before {
226
- background-color: $inputswitchSlider;
234
+ background-color: $input-switch-slider;
227
235
  border-radius: 50%;
228
236
  bottom: -0.308em;
229
237
  height: 1.538em;
@@ -245,8 +253,8 @@ body {
245
253
 
246
254
  .p-inputswitch.p-inputswitch-checked {
247
255
  .p-inputswitch-slider {
248
- background-color: $inputSwitchSldr;
249
- border-color: $inputSwitchSldr;
256
+ background-color: $input-switch-sldr;
257
+ border-color: $input-switch-sldr;
250
258
 
251
259
  &::before {
252
260
  background-color: $enabledFocus;
@@ -257,8 +265,8 @@ body {
257
265
  &:not(.p-state-disabled) {
258
266
  &:hover {
259
267
  .p-inputswitch-slider {
260
- background-color: $inputSwitchSldr;
261
- border-color: $inputSwitchSldr;
268
+ background-color: $input-switch-sldr;
269
+ border-color: $input-switch-sldr;
262
270
  }
263
271
  }
264
272
  }
@@ -272,8 +280,8 @@ body {
272
280
 
273
281
  .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus {
274
282
  .p-inputswitch-slider {
275
- background: $inputSwitchSldr;
276
- border-color: $inputSwitchSldr;
283
+ background: $input-switch-sldr;
284
+ border-color: $input-switch-sldr;
277
285
  }
278
286
  }
279
287
 
@@ -324,8 +332,8 @@ body {
324
332
  }
325
333
 
326
334
  .p-autocomplete-token {
327
- background-color: $autoCompletebk;
328
- background-image: linear-gradient($autoCompletebk, $tabColor);
335
+ background-color: $auto-complete-bk;
336
+ background-image: linear-gradient($auto-complete-bk, $tabColor);
329
337
  border-color: rgb(0 0 0 / 8%);
330
338
  color: $autoColor;
331
339
  font-size: 13px;
@@ -334,7 +342,7 @@ body {
334
342
  }
335
343
 
336
344
  .p-autocomplete-token-icon {
337
- background: $autoCompleteicon;
345
+ background: $autoCompleteIcon;
338
346
  border-radius: 50%;
339
347
  color: rgb(255 255 255);
340
348
  margin-right: 4px;
@@ -368,7 +376,7 @@ body {
368
376
  }
369
377
 
370
378
  .p-autocomplete-group {
371
- background-color: $autoCompletegrp;
379
+ background-color: $auto-complete-grp;
372
380
  color: $font-color-main;
373
381
  padding: 0.429em 0.857em;
374
382
  }
@@ -493,6 +501,7 @@ body {
493
501
 
494
502
  .is-invalid {
495
503
  .ui-dropdown,
504
+ .p-dropdown,
496
505
  .ql-snow {
497
506
  border-color: rgb(255 88 107);
498
507
  }
@@ -503,12 +512,16 @@ body {
503
512
  width: 100%;
504
513
  }
505
514
 
506
- .ui-dropdown {
515
+ /* PrimeNG 19: Support both old (ui-*) and new (p-*) class names */
516
+ .ui-dropdown,
517
+ .p-dropdown {
507
518
  background: rgb(255 255 255);
508
- border: 1px solid $uiinputText;
509
- transition: border-color 0.3s, box-shadow 0.3s;
519
+ border: 1px solid $ui-input-text;
520
+ transition:
521
+ border-color 0.3s,
522
+ box-shadow 0.3s;
510
523
 
511
- &:not(.ui-state-disabled) {
524
+ &:not(.ui-state-disabled):not(.p-disabled) {
512
525
  &:hover {
513
526
  border-color: $toggleButton;
514
527
  }
@@ -520,11 +533,13 @@ body {
520
533
  }
521
534
  }
522
535
 
523
- .ui-dropdown-label {
536
+ .ui-dropdown-label,
537
+ .p-dropdown-label {
524
538
  padding-right: 2em;
525
539
  }
526
540
 
527
- .ui-dropdown-trigger {
541
+ .ui-dropdown-trigger,
542
+ .p-dropdown-trigger {
528
543
  background-color: rgb(255 255 255);
529
544
  color: $font-color-main;
530
545
  line-height: 2em;
@@ -533,7 +548,8 @@ body {
533
548
  width: 2em;
534
549
  }
535
550
 
536
- &:not(.ui-state-disabled).ui-state-focus {
551
+ &:not(.ui-state-disabled):not(.p-disabled).ui-state-focus,
552
+ &:not(.p-disabled).p-focus {
537
553
  border-color: $toggleButton;
538
554
  box-shadow: 0 0 6px 0 rgb(0 0 0 / 16%);
539
555
  outline: 0 none;
@@ -619,8 +635,10 @@ body {
619
635
 
620
636
  .ui-multiselect {
621
637
  background: rgb(255 255 255);
622
- border: 1px solid $uiinputText;
623
- transition: border-color 0.3s, box-shadow 0.3s;
638
+ border: 1px solid $ui-input-text;
639
+ transition:
640
+ border-color 0.3s,
641
+ box-shadow 0.3s;
624
642
 
625
643
  &:not(.ui-state-disabled) {
626
644
  &:hover {
@@ -753,7 +771,7 @@ body {
753
771
 
754
772
  .ui-listbox {
755
773
  background: rgb(255 255 255);
756
- border: 1px solid $uiinputText;
774
+ border: 1px solid $ui-input-text;
757
775
  min-width: 12em;
758
776
  padding: 0;
759
777
 
@@ -831,7 +849,7 @@ body {
831
849
  &:not(.ui-state-disabled) {
832
850
  &:not(.ui-state-active) {
833
851
  &:hover {
834
- border: 1px solid $uiinputText;
852
+ border: 1px solid $ui-input-text;
835
853
  }
836
854
  }
837
855
  }
@@ -860,79 +878,79 @@ body {
860
878
  .ql-snow.ql-toolbar {
861
879
  button {
862
880
  &:hover {
863
- color: $carouselPagelink;
881
+ color: $carousel-page-link;
864
882
 
865
883
  .ql-stroke {
866
- stroke: $carouselPagelink;
884
+ stroke: $carousel-page-link;
867
885
  }
868
886
 
869
887
  .ql-stroke-miter {
870
- stroke: $carouselPagelink;
888
+ stroke: $carousel-page-link;
871
889
  }
872
890
  }
873
891
  }
874
892
 
875
893
  button.ql-active {
876
- color: $carouselPagelink;
894
+ color: $carousel-page-link;
877
895
 
878
896
  .ql-stroke {
879
- stroke: $carouselPagelink;
897
+ stroke: $carousel-page-link;
880
898
  }
881
899
 
882
900
  .ql-stroke-miter {
883
- stroke: $carouselPagelink;
901
+ stroke: $carousel-page-link;
884
902
  }
885
903
  }
886
904
 
887
905
  .ql-picker-label {
888
906
  &:hover {
889
- color: $carouselPagelink;
907
+ color: $carousel-page-link;
890
908
 
891
909
  .ql-stroke {
892
- stroke: $carouselPagelink;
910
+ stroke: $carousel-page-link;
893
911
  }
894
912
 
895
913
  .ql-stroke-miter {
896
- stroke: $carouselPagelink;
914
+ stroke: $carousel-page-link;
897
915
  }
898
916
  }
899
917
  }
900
918
 
901
919
  .ql-picker-label.ql-active {
902
- color: $carouselPagelink;
920
+ color: $carousel-page-link;
903
921
 
904
922
  .ql-stroke {
905
- stroke: $carouselPagelink;
923
+ stroke: $carousel-page-link;
906
924
  }
907
925
 
908
926
  .ql-stroke-miter {
909
- stroke: $carouselPagelink;
927
+ stroke: $carousel-page-link;
910
928
  }
911
929
  }
912
930
 
913
931
  .ql-picker-item {
914
932
  &:hover {
915
- color: $carouselPagelink;
933
+ color: $carousel-page-link;
916
934
 
917
935
  .ql-stroke {
918
- stroke: $carouselPagelink;
936
+ stroke: $carousel-page-link;
919
937
  }
920
938
 
921
939
  .ql-stroke-miter {
922
- stroke: $carouselPagelink;
940
+ stroke: $carousel-page-link;
923
941
  }
924
942
  }
925
943
  }
926
944
 
927
945
  .ql-picker-item.ql-selected {
928
- color: $carouselPagelink;
946
+ color: $carousel-page-link;
929
947
 
930
948
  .ql-stroke {
931
- stroke: $carouselPagelink;
949
+ stroke: $carousel-page-link;
932
950
  }
933
951
 
934
952
  .ql-stroke-miter {
935
- stroke: $carouselPagelink;
953
+ stroke: $carousel-page-link;
936
954
  }
937
955
  }
938
956
  }
@@ -941,79 +959,79 @@ body {
941
959
  .ql-toolbar {
942
960
  button {
943
961
  &:hover {
944
- color: $carouselPagelink;
962
+ color: $carousel-page-link;
945
963
 
946
964
  .ql-stroke {
947
- stroke: $carouselPagelink;
965
+ stroke: $carousel-page-link;
948
966
  }
949
967
 
950
968
  .ql-stroke-miter {
951
- stroke: $carouselPagelink;
969
+ stroke: $carousel-page-link;
952
970
  }
953
971
  }
954
972
  }
955
973
 
956
974
  button.ql-active {
957
- color: $carouselPagelink;
975
+ color: $carousel-page-link;
958
976
 
959
977
  .ql-stroke {
960
- stroke: $carouselPagelink;
978
+ stroke: $carousel-page-link;
961
979
  }
962
980
 
963
981
  .ql-stroke-miter {
964
- stroke: $carouselPagelink;
982
+ stroke: $carousel-page-link;
965
983
  }
966
984
  }
967
985
 
968
986
  .ql-picker-label {
969
987
  &:hover {
970
- color: $carouselPagelink;
988
+ color: $carousel-page-link;
971
989
 
972
990
  .ql-stroke {
973
- stroke: $carouselPagelink;
991
+ stroke: $carousel-page-link;
974
992
  }
975
993
 
976
994
  .ql-stroke-miter {
977
- stroke: $carouselPagelink;
995
+ stroke: $carousel-page-link;
978
996
  }
979
997
  }
980
998
  }
981
999
 
982
1000
  .ql-picker-label.ql-active {
983
- color: $carouselPagelink;
1001
+ color: $carousel-page-link;
984
1002
 
985
1003
  .ql-stroke {
986
- stroke: $carouselPagelink;
1004
+ stroke: $carousel-page-link;
987
1005
  }
988
1006
 
989
1007
  .ql-stroke-miter {
990
- stroke: $carouselPagelink;
1008
+ stroke: $carousel-page-link;
991
1009
  }
992
1010
  }
993
1011
 
994
1012
  .ql-picker-item {
995
1013
  &:hover {
996
- color: $carouselPagelink;
1014
+ color: $carousel-page-link;
997
1015
 
998
1016
  .ql-stroke {
999
- stroke: $carouselPagelink;
1017
+ stroke: $carousel-page-link;
1000
1018
  }
1001
1019
 
1002
1020
  .ql-stroke-miter {
1003
- stroke: $carouselPagelink;
1021
+ stroke: $carousel-page-link;
1004
1022
  }
1005
1023
  }
1006
1024
  }
1007
1025
 
1008
1026
  .ql-picker-item.ql-selected {
1009
- color: $carouselPagelink;
1027
+ color: $carousel-page-link;
1010
1028
 
1011
1029
  .ql-stroke {
1012
- stroke: $carouselPagelink;
1030
+ stroke: $carousel-page-link;
1013
1031
  }
1014
1032
 
1015
1033
  .ql-stroke-miter {
1016
- stroke: $carouselPagelink;
1034
+ stroke: $carousel-page-link;
1017
1035
  }
1018
1036
  }
1019
1037
  }
@@ -1074,7 +1092,7 @@ body {
1074
1092
  }
1075
1093
 
1076
1094
  .ui-slider {
1077
- background-color: $uiinputText;
1095
+ background-color: $ui-input-text;
1078
1096
  border: 0 0;
1079
1097
 
1080
1098
  .ui-slider-handle {
@@ -1223,7 +1241,7 @@ body {
1223
1241
 
1224
1242
  .ui-timepicker {
1225
1243
  border: 0 0;
1226
- border-top: 1px solid $autoCompletegrp;
1244
+ border-top: 1px solid $auto-complete-grp;
1227
1245
  padding: 0.857em;
1228
1246
 
1229
1247
  a {
@@ -1384,8 +1402,8 @@ body {
1384
1402
 
1385
1403
  .ui-inputgroup {
1386
1404
  .ui-inputgroup-addon {
1387
- background-color: $inputGroundaddon;
1388
- border-color: $uiinputText;
1405
+ background-color: $input-ground-addon;
1406
+ border-color: $ui-input-text;
1389
1407
  color: $font-color-main;
1390
1408
  min-width: 2em;
1391
1409
  padding: 0.429em;
@@ -1463,19 +1481,24 @@ body {
1463
1481
  color: $placeHolder;
1464
1482
  } */
1465
1483
 
1466
- .ui-inputtext.ng-dirty.ng-invalid {
1484
+ /* PrimeNG 19: Support both old and new class names */
1485
+ .ui-inputtext.ng-dirty.ng-invalid,
1486
+ .p-inputtext.ng-dirty.ng-invalid {
1467
1487
  border-color: $invalidInput;
1468
1488
  }
1469
1489
 
1470
1490
  p-dropdown.ng-dirty.ng-invalid {
1471
- > .ui-dropdown {
1491
+ > .ui-dropdown,
1492
+ > .p-dropdown {
1472
1493
  border-color: $invalidInput;
1473
1494
  }
1474
1495
  }
1475
1496
 
1476
1497
  p-autocomplete.ng-dirty.ng-invalid {
1477
- > .ui-autocomplete {
1478
- > .ui-inputtext {
1498
+ > .ui-autocomplete,
1499
+ > .p-autocomplete {
1500
+ > .ui-inputtext,
1501
+ > .p-inputtext {
1479
1502
  border-color: $invalidInput;
1480
1503
  }
1481
1504
  }
@@ -1526,7 +1549,8 @@ body {
1526
1549
  }
1527
1550
 
1528
1551
  p-multiselect.ng-dirty.ng-invalid {
1529
- > .ui-multiselect {
1552
+ > .ui-multiselect,
1553
+ > .p-multiselect {
1530
1554
  border-color: $invalidInput;
1531
1555
  }
1532
1556
  }
@@ -1630,7 +1654,7 @@ body {
1630
1654
  color: $font-color-main;
1631
1655
 
1632
1656
  .ui-button-icon-left {
1633
- color: $toastmsgSuccess;
1657
+ color: $toast-msg-success;
1634
1658
  }
1635
1659
  }
1636
1660
  }
@@ -1642,7 +1666,7 @@ body {
1642
1666
  outline: 0 none;
1643
1667
 
1644
1668
  .ui-button-icon-left {
1645
- color: $toastmsgSuccess;
1669
+ color: $toast-msg-success;
1646
1670
  }
1647
1671
  }
1648
1672
  }
@@ -1696,7 +1720,7 @@ body {
1696
1720
  color: $font-color-main;
1697
1721
 
1698
1722
  .p-button-icon-left {
1699
- color: $toastmsgSuccess;
1723
+ color: $toast-msg-success;
1700
1724
  }
1701
1725
  }
1702
1726
  }
@@ -1707,7 +1731,7 @@ body {
1707
1731
  outline: 0 none;
1708
1732
 
1709
1733
  .p-button-icon-left {
1710
- color: $toastmsgSuccess;
1734
+ color: $toast-msg-success;
1711
1735
  }
1712
1736
  }
1713
1737
  }
@@ -1782,7 +1806,7 @@ body {
1782
1806
  &:hover {
1783
1807
  background-color: $tabView;
1784
1808
  border-color: $tabView;
1785
- color: $toastmsgSuccess;
1809
+ color: $toast-msg-success;
1786
1810
  }
1787
1811
 
1788
1812
  &:focus {
@@ -1807,7 +1831,7 @@ body {
1807
1831
  &:hover {
1808
1832
  background-color: $tabView;
1809
1833
  border-color: $tabView;
1810
- color: $toastmsgSuccess;
1834
+ color: $toast-msg-success;
1811
1835
  }
1812
1836
 
1813
1837
  &:focus {
@@ -1830,13 +1854,13 @@ body {
1830
1854
 
1831
1855
  &:enabled {
1832
1856
  &:hover {
1833
- background-color: $buttonInfohover;
1834
- border-color: $buttonInfohover;
1857
+ background-color: $button-info-hover;
1858
+ border-color: $button-info-hover;
1835
1859
  color: rgb(255 255 255);
1836
1860
  }
1837
1861
 
1838
1862
  &:focus {
1839
- background-color: $buttonInfofocus;
1863
+ background-color: $button-info-focus;
1840
1864
  }
1841
1865
 
1842
1866
  &:active {
@@ -1855,13 +1879,13 @@ body {
1855
1879
 
1856
1880
  &:enabled {
1857
1881
  &:hover {
1858
- background-color: $buttonInfohover;
1859
- border-color: $buttonInfohover;
1882
+ background-color: $button-info-hover;
1883
+ border-color: $button-info-hover;
1860
1884
  color: rgb(255 255 255);
1861
1885
  }
1862
1886
 
1863
1887
  &:focus {
1864
- background-color: $buttonInfofocus;
1888
+ background-color: $button-info-focus;
1865
1889
  }
1866
1890
 
1867
1891
  &:active {
@@ -1886,12 +1910,12 @@ body {
1886
1910
  }
1887
1911
 
1888
1912
  &:focus {
1889
- background-color: $primeStateButtonfocus;
1913
+ background-color: $prime-state-button-focus;
1890
1914
  }
1891
1915
 
1892
1916
  &:active {
1893
- background-color: $primeStateButtonactive;
1894
- border-color: $primeStateButtonactive;
1917
+ background-color: $prime-state-button-active;
1918
+ border-color: $prime-state-button-active;
1895
1919
  color: rgb(255 255 255);
1896
1920
  }
1897
1921
  }
@@ -1911,12 +1935,12 @@ body {
1911
1935
  }
1912
1936
 
1913
1937
  &:focus {
1914
- background-color: $primeStateButtonfocus;
1938
+ background-color: $prime-state-button-focus;
1915
1939
  }
1916
1940
 
1917
1941
  &:active {
1918
- background-color: $primeStateButtonactive;
1919
- border-color: $primeStateButtonactive;
1942
+ background-color: $prime-state-button-active;
1943
+ border-color: $prime-state-button-active;
1920
1944
  color: rgb(255 255 255);
1921
1945
  }
1922
1946
  }
@@ -1930,18 +1954,18 @@ body {
1930
1954
 
1931
1955
  &:enabled {
1932
1956
  &:hover {
1933
- background-color: $primeStateButtonwarning;
1934
- border-color: $primeStateButtonwarning;
1957
+ background-color: $prime-state-button-warning;
1958
+ border-color: $prime-state-button-warning;
1935
1959
  color: $font-color-main;
1936
1960
  }
1937
1961
 
1938
1962
  &:focus {
1939
- background-color: $primeButtonwarningFocus;
1963
+ background-color: $prime-button-warning-focus;
1940
1964
  }
1941
1965
 
1942
1966
  &:active {
1943
- background-color: $primeButtonwarningactive;
1944
- border-color: $primeButtonwarningactive;
1967
+ background-color: $prime-button-warning-active;
1968
+ border-color: $prime-button-warning-active;
1945
1969
  color: $font-color-main;
1946
1970
  }
1947
1971
  }
@@ -1955,18 +1979,18 @@ body {
1955
1979
 
1956
1980
  &:enabled {
1957
1981
  &:hover {
1958
- background-color: $primeStateButtonwarning;
1959
- border-color: $primeStateButtonwarning;
1982
+ background-color: $prime-state-button-warning;
1983
+ border-color: $prime-state-button-warning;
1960
1984
  color: $font-color-main;
1961
1985
  }
1962
1986
 
1963
1987
  &:focus {
1964
- background-color: $primeButtonwarningFocus;
1988
+ background-color: $prime-button-warning-focus;
1965
1989
  }
1966
1990
 
1967
1991
  &:active {
1968
- background-color: $primeButtonwarningactive;
1969
- border-color: $primeButtonwarningactive;
1992
+ background-color: $prime-button-warning-active;
1993
+ border-color: $prime-button-warning-active;
1970
1994
  color: $font-color-main;
1971
1995
  }
1972
1996
  }
@@ -1974,14 +1998,14 @@ body {
1974
1998
  }
1975
1999
 
1976
2000
  .ui-button.ui-state-default.ui-button-danger {
1977
- background-color: $primeButtonDangeractive;
1978
- border: 1px solid $primeButtonDangeractive;
2001
+ background-color: $prime-button-danger-active;
2002
+ border: 1px solid $prime-button-danger-active;
1979
2003
  color: rgb(255 255 255);
1980
2004
 
1981
2005
  &:enabled {
1982
2006
  &:hover {
1983
- background-color: $primeButtonSethover;
1984
- border-color: $primeButtonSethover;
2007
+ background-color: $prime-button-set-hover;
2008
+ border-color: $prime-button-set-hover;
1985
2009
  color: rgb(255 255 255);
1986
2010
  }
1987
2011
 
@@ -1990,8 +2014,8 @@ body {
1990
2014
  }
1991
2015
 
1992
2016
  &:active {
1993
- background-color: $primeButtonSetactive;
1994
- border-color: $primeButtonSetactive;
2017
+ background-color: $prime-button-set-active;
2018
+ border-color: $prime-button-set-active;
1995
2019
  color: rgb(255 255 255);
1996
2020
  }
1997
2021
  }
@@ -1999,14 +2023,14 @@ body {
1999
2023
 
2000
2024
  .ui-buttonset.ui-button-danger {
2001
2025
  > .ui-button.ui-state-default {
2002
- background-color: $primeButtonDangeractive;
2003
- border: 1px solid $primeButtonDangeractive;
2026
+ background-color: $prime-button-danger-active;
2027
+ border: 1px solid $prime-button-danger-active;
2004
2028
  color: rgb(255 255 255);
2005
2029
 
2006
2030
  &:enabled {
2007
2031
  &:hover {
2008
- background-color: $primeButtonSethover;
2009
- border-color: $primeButtonSethover;
2032
+ background-color: $prime-button-set-hover;
2033
+ border-color: $prime-button-set-hover;
2010
2034
  color: rgb(255 255 255);
2011
2035
  }
2012
2036
 
@@ -2015,8 +2039,8 @@ body {
2015
2039
  }
2016
2040
 
2017
2041
  &:active {
2018
- background-color: $primeButtonSetactive;
2019
- border-color: $primeButtonSetactive;
2042
+ background-color: $prime-button-set-active;
2043
+ border-color: $prime-button-set-active;
2020
2044
  color: rgb(255 255 255);
2021
2045
  }
2022
2046
  }
@@ -2062,7 +2086,7 @@ body {
2062
2086
  transition: color 0.3s;
2063
2087
 
2064
2088
  &:hover {
2065
- color: $carouselPagelink;
2089
+ color: $carousel-page-link;
2066
2090
  }
2067
2091
  }
2068
2092
  }
@@ -2132,6 +2156,7 @@ body {
2132
2156
  }
2133
2157
  }
2134
2158
 
2159
+ /* Legacy PrimeNG accordion (ui-* classes) - kept for reference only */
2135
2160
  .ui-accordion {
2136
2161
  .ui-accordion-header {
2137
2162
  margin-bottom: 2px;
@@ -2196,6 +2221,71 @@ body {
2196
2221
  }
2197
2222
  }
2198
2223
 
2224
+ /* PrimeNG 19 Accordion - same visual as legacy (gray default, primary active, white content) */
2225
+ .p-accordion {
2226
+ .p-accordionpanel {
2227
+ margin-bottom: 2px;
2228
+
2229
+ > .p-accordionheader {
2230
+ background-color: rgb(239 239 239);
2231
+ border: 1px solid $ng-gray;
2232
+ color: $font-color-main;
2233
+ padding: 0.857em 1em;
2234
+
2235
+ .p-accordionheader-toggle-icon {
2236
+ color: $titleBarIcon;
2237
+ }
2238
+ }
2239
+
2240
+ &:not(.p-accordionpanel-active):not(.p-disabled) {
2241
+ > .p-accordionheader:hover {
2242
+ border: 1px solid $tabView;
2243
+ color: $font-color-main;
2244
+
2245
+ .p-accordionheader-toggle-icon {
2246
+ color: $font-color-main;
2247
+ }
2248
+ }
2249
+ }
2250
+
2251
+ &:not(.p-disabled).p-accordionpanel-active {
2252
+ > .p-accordionheader {
2253
+ background-color: rgb(239 239 239);
2254
+ color: rgb(255 255 255);
2255
+
2256
+ .p-accordionheader-toggle-icon {
2257
+ color: rgb(255 255 255);
2258
+ }
2259
+ }
2260
+
2261
+ > .p-accordionheader:hover {
2262
+ background-color: rgb(239 239 239);
2263
+ color: rgb(255 255 255);
2264
+
2265
+ .p-accordionheader-toggle-icon {
2266
+ color: rgb(255 255 255);
2267
+ }
2268
+ }
2269
+ }
2270
+ }
2271
+
2272
+ .p-accordioncontent-content {
2273
+ background-color: rgb(255 255 255);
2274
+ border: 1px solid $ng-gray;
2275
+ color: $font-color-main;
2276
+ padding: 1.171em 1em;
2277
+ }
2278
+ }
2279
+
2280
+ /* PrimeNG 19 Accordion - keep header and icon color as tabs_bg (do not change) */
2281
+ .p-accordionheader {
2282
+ color: var(--tabs_bg) !important;
2283
+
2284
+ .p-accordionheader-toggle-icon {
2285
+ color: var(--tabs_bg) !important;
2286
+ }
2287
+ }
2288
+
2199
2289
  .ui-tabview.ui-tabview-top {
2200
2290
  border: 0 0;
2201
2291
 
@@ -2241,11 +2331,11 @@ body {
2241
2331
  color: $font-color-main;
2242
2332
 
2243
2333
  .ui-tabview-left-icon {
2244
- color: $carouselPagelink;
2334
+ color: $carousel-page-link;
2245
2335
  }
2246
2336
 
2247
2337
  .ui-tabview-right-icon {
2248
- color: $carouselPagelink;
2338
+ color: $carousel-page-link;
2249
2339
  }
2250
2340
  }
2251
2341
 
@@ -2348,11 +2438,11 @@ body {
2348
2438
  color: $font-color-main;
2349
2439
 
2350
2440
  .ui-tabview-left-icon {
2351
- color: $carouselPagelink;
2441
+ color: $carousel-page-link;
2352
2442
  }
2353
2443
 
2354
2444
  .ui-tabview-right-icon {
2355
- color: $carouselPagelink;
2445
+ color: $carousel-page-link;
2356
2446
  }
2357
2447
  }
2358
2448
 
@@ -2455,11 +2545,11 @@ body {
2455
2545
  color: $font-color-main;
2456
2546
 
2457
2547
  .ui-tabview-left-icon {
2458
- color: $carouselPagelink;
2548
+ color: $carousel-page-link;
2459
2549
  }
2460
2550
 
2461
2551
  .ui-tabview-right-icon {
2462
- color: $carouselPagelink;
2552
+ color: $carousel-page-link;
2463
2553
  }
2464
2554
  }
2465
2555
 
@@ -2562,11 +2652,11 @@ body {
2562
2652
  color: $font-color-main;
2563
2653
 
2564
2654
  .ui-tabview-left-icon {
2565
- color: $carouselPagelink;
2655
+ color: $carousel-page-link;
2566
2656
  }
2567
2657
 
2568
2658
  .ui-tabview-right-icon {
2569
- color: $carouselPagelink;
2659
+ color: $carousel-page-link;
2570
2660
  }
2571
2661
  }
2572
2662
 
@@ -2655,7 +2745,7 @@ body {
2655
2745
 
2656
2746
  .p-paginator-first {
2657
2747
  border: 0 0;
2658
- color: $galleriaNavText;
2748
+ color: $galleria-nav-text;
2659
2749
  height: 2.308em;
2660
2750
  line-height: 2.308em;
2661
2751
  margin: 0;
@@ -2680,7 +2770,7 @@ body {
2680
2770
 
2681
2771
  .p-paginator-prev {
2682
2772
  border: 0 0;
2683
- color: $galleriaNavText;
2773
+ color: $galleria-nav-text;
2684
2774
  height: 2.308em;
2685
2775
  line-height: 2.308em;
2686
2776
  margin: 0;
@@ -2704,7 +2794,7 @@ body {
2704
2794
 
2705
2795
  .p-paginator-next {
2706
2796
  border: 0 0;
2707
- color: $galleriaNavText;
2797
+ color: $galleria-nav-text;
2708
2798
  height: 2.308em;
2709
2799
  line-height: 2.308em;
2710
2800
  margin: 0;
@@ -2729,7 +2819,7 @@ body {
2729
2819
 
2730
2820
  .p-paginator-last {
2731
2821
  border: 0 0;
2732
- color: $galleriaNavText;
2822
+ color: $galleria-nav-text;
2733
2823
  height: 2.308em;
2734
2824
  line-height: 2.308em;
2735
2825
  margin: 0;
@@ -2759,7 +2849,7 @@ body {
2759
2849
 
2760
2850
  .p-paginator-page {
2761
2851
  border: 0 0;
2762
- color: $galleriaNavText;
2852
+ color: $galleria-nav-text;
2763
2853
  height: 2.308em;
2764
2854
  line-height: 2.308em;
2765
2855
  margin: 0;
@@ -2910,7 +3000,7 @@ body {
2910
3000
  &:not(.p-highlight) {
2911
3001
  &:not(.ui-contextmenu-selected) {
2912
3002
  &:hover {
2913
- background-color: $satetHover;
3003
+ background-color: $satet-hover;
2914
3004
  color: $font-color-main;
2915
3005
  cursor: pointer;
2916
3006
  }
@@ -3255,7 +3345,7 @@ body {
3255
3345
  padding: 0;
3256
3346
 
3257
3347
  .ui-tree-toggler {
3258
- color: $galleriaNavText;
3348
+ color: $galleria-nav-text;
3259
3349
  display: inline-block;
3260
3350
  float: none;
3261
3351
  font-size: 15px;
@@ -3264,7 +3354,7 @@ body {
3264
3354
  }
3265
3355
 
3266
3356
  .ui-treenode-icon {
3267
- color: $galleriaNavText;
3357
+ color: $galleria-nav-text;
3268
3358
  display: inline-block;
3269
3359
  font-size: 15px;
3270
3360
  margin: 0 0.143em 0 0;
@@ -3405,7 +3495,7 @@ body {
3405
3495
 
3406
3496
  .ui-node-toggler {
3407
3497
  bottom: -0.7em;
3408
- color: $galleriaNavText;
3498
+ color: $galleria-nav-text;
3409
3499
  margin-left: -0.46em;
3410
3500
  }
3411
3501
  }
@@ -3456,7 +3546,7 @@ body {
3456
3546
 
3457
3547
  &:not(.ui-state-disabled) {
3458
3548
  &:hover {
3459
- color: $carouselPagelink;
3549
+ color: $carousel-page-link;
3460
3550
  }
3461
3551
  }
3462
3552
  }
@@ -3470,7 +3560,7 @@ body {
3470
3560
  transition: color 0.3s;
3471
3561
 
3472
3562
  &:hover {
3473
- color: $carouselPagelink;
3563
+ color: $carousel-page-link;
3474
3564
  }
3475
3565
  }
3476
3566
 
@@ -3530,7 +3620,7 @@ body {
3530
3620
  padding: 0.3em 1em;
3531
3621
 
3532
3622
  .ui-treetable-toggler {
3533
- color: $galleriaNavText;
3623
+ color: $galleria-nav-text;
3534
3624
  font-size: 15px;
3535
3625
  line-height: 1.5;
3536
3626
  vertical-align: middle;
@@ -3595,7 +3685,7 @@ body {
3595
3685
 
3596
3686
  &:not(.ui-state-highlight) {
3597
3687
  &:hover {
3598
- background-color: $satetHover;
3688
+ background-color: $satet-hover;
3599
3689
  color: $font-color-main;
3600
3690
 
3601
3691
  a {
@@ -3633,7 +3723,7 @@ body {
3633
3723
  &:not(.ui-state-highlight) {
3634
3724
  &:not(.ui-contextmenu-selected) {
3635
3725
  &:hover {
3636
- background-color: $satetHover;
3726
+ background-color: $satet-hover;
3637
3727
  color: $font-color-main;
3638
3728
  cursor: pointer;
3639
3729
  }
@@ -3673,22 +3763,22 @@ body {
3673
3763
  }
3674
3764
 
3675
3765
  .ui-messages.ui-messages-success {
3676
- background-color: $toastmsgScessbg;
3766
+ background-color: $toast-msg-success-bg;
3677
3767
  border: 0 0;
3678
- color: $toastmsgSuccess;
3768
+ color: $toast-msg-success;
3679
3769
 
3680
3770
  .ui-messages-icon {
3681
- color: $toastmsgSuccess;
3771
+ color: $toast-msg-success;
3682
3772
  }
3683
3773
 
3684
3774
  .ui-messages-close {
3685
- color: $toastmsgSuccess;
3775
+ color: $toast-msg-success;
3686
3776
  }
3687
3777
  }
3688
3778
 
3689
3779
  .ui-messages.ui-messages-warn {
3690
- background-color: $toastmsgWarning;
3691
- border: 1px solid $toastmsgWarnbdr;
3780
+ background-color: $toast-msg-warning;
3781
+ border: 1px solid $toast-msg-Warn-bdr;
3692
3782
  color: $toastIconClose;
3693
3783
 
3694
3784
  .ui-messages-icon {
@@ -3701,8 +3791,8 @@ body {
3701
3791
  }
3702
3792
 
3703
3793
  .ui-messages.ui-messages-error {
3704
- background-color: $growlerrorMsg;
3705
- border: 1px solid $growlerrorMsgbdr;
3794
+ background-color: $growl-error-msg;
3795
+ border: 1px solid $growl-error-msg-bdr;
3706
3796
  color: $growlColor;
3707
3797
 
3708
3798
  .ui-messages-icon {
@@ -3721,21 +3811,21 @@ body {
3721
3811
  }
3722
3812
 
3723
3813
  .ui-message.ui-message-warn {
3724
- background-color: $toastmsgWarning;
3725
- border: 1px solid $toastmsgWarnbdr;
3814
+ background-color: $toast-msg-warning;
3815
+ border: 1px solid $toast-msg-Warn-bdr;
3726
3816
  color: $toastIconClose;
3727
3817
  }
3728
3818
 
3729
3819
  .ui-message.ui-message-error {
3730
- background-color: $growlerrorMsg;
3731
- border: 1px solid $growlerrorMsgbdr;
3820
+ background-color: $growl-error-msg;
3821
+ border: 1px solid $growl-error-msg-bdr;
3732
3822
  color: $growlColor;
3733
3823
  }
3734
3824
 
3735
3825
  .ui-message.ui-message-success {
3736
- background-color: $toastmsgScessbg;
3826
+ background-color: $toast-msg-success-bg;
3737
3827
  border: 0 0;
3738
- color: $toastmsgSuccess;
3828
+ color: $toast-msg-success;
3739
3829
  }
3740
3830
 
3741
3831
  .ui-message {
@@ -3779,18 +3869,18 @@ body {
3779
3869
  }
3780
3870
 
3781
3871
  .ui-growl-item-container.ui-growl-message-success {
3782
- background-color: $toastmsgScessbg;
3872
+ background-color: $toast-msg-success-bg;
3783
3873
  border: 0 0;
3784
- color: $toastmsgSuccess;
3874
+ color: $toast-msg-success;
3785
3875
 
3786
3876
  .ui-growl-image {
3787
- color: $toastmsgSuccess;
3877
+ color: $toast-msg-success;
3788
3878
  }
3789
3879
  }
3790
3880
 
3791
3881
  .ui-growl-item-container.ui-growl-message-warn {
3792
- background-color: $toastmsgWarning;
3793
- border: 1px solid $toastmsgWarnbdr;
3882
+ background-color: $toast-msg-warning;
3883
+ border: 1px solid $toast-msg-Warn-bdr;
3794
3884
  color: $toastIconClose;
3795
3885
 
3796
3886
  .ui-growl-image {
@@ -3799,8 +3889,8 @@ body {
3799
3889
  }
3800
3890
 
3801
3891
  .ui-growl-item-container.ui-growl-message-error {
3802
- background-color: $growlerrorMsg;
3803
- border: 1px solid $growlerrorMsgbdr;
3892
+ background-color: $growl-error-msg;
3893
+ border: 1px solid $growl-error-msg-bdr;
3804
3894
  color: $growlColor;
3805
3895
 
3806
3896
  .ui-growl-image {
@@ -3829,22 +3919,22 @@ body {
3829
3919
  }
3830
3920
 
3831
3921
  .ui-toast-message.ui-toast-message-success {
3832
- background-color: $toastmsgScessbg;
3922
+ background-color: $toast-msg-success-bg;
3833
3923
  border: 0 0;
3834
- color: $toastmsgSuccess;
3924
+ color: $toast-msg-success;
3835
3925
 
3836
3926
  .ui-toast-close-icon {
3837
- color: $toastmsgSuccess;
3927
+ color: $toast-msg-success;
3838
3928
  }
3839
3929
 
3840
3930
  .ui-toast-icon {
3841
- color: $toastIconSuccess;
3931
+ color: $toast-icon-success;
3842
3932
  }
3843
3933
  }
3844
3934
 
3845
3935
  .ui-toast-message.ui-toast-message-warn {
3846
- background-color: $toastmsgWarning;
3847
- border: 1px solid $toastmsgWarnbdr;
3936
+ background-color: $toast-msg-warning;
3937
+ border: 1px solid $toast-msg-Warn-bdr;
3848
3938
  color: $toastIconClose;
3849
3939
 
3850
3940
  .ui-toast-close-icon {
@@ -3857,8 +3947,8 @@ body {
3857
3947
  }
3858
3948
 
3859
3949
  .ui-toast-message.ui-toast-message-error {
3860
- background-color: $growlerrorMsg;
3861
- border: 1px solid $growlerrorMsgbdr;
3950
+ background-color: $growl-error-msg;
3951
+ border: 1px solid $growl-error-msg-bdr;
3862
3952
  color: $growlColor;
3863
3953
 
3864
3954
  .ui-toast-close-icon {
@@ -3929,7 +4019,7 @@ body {
3929
4019
  transition: color 0.3s;
3930
4020
 
3931
4021
  &:hover {
3932
- color: $carouselPagelink;
4022
+ color: $carousel-page-link;
3933
4023
  }
3934
4024
  }
3935
4025
  }
@@ -4038,7 +4128,7 @@ body {
4038
4128
  transition: color 0.3s;
4039
4129
 
4040
4130
  &:hover {
4041
- color: $carouselPagelink;
4131
+ color: $carousel-page-link;
4042
4132
  }
4043
4133
  }
4044
4134
  }
@@ -4101,7 +4191,7 @@ body {
4101
4191
 
4102
4192
  &:first-child {
4103
4193
  a {
4104
- color: $galleriaNavText;
4194
+ color: $galleria-nav-text;
4105
4195
  font-size: 17px;
4106
4196
  margin: 0;
4107
4197
  }
@@ -4109,7 +4199,7 @@ body {
4109
4199
  }
4110
4200
 
4111
4201
  li.ui-breadcrumb-chevron {
4112
- color: $galleriaNavText;
4202
+ color: $galleria-nav-text;
4113
4203
  margin: 0 0.429em;
4114
4204
  }
4115
4205
  }
@@ -4146,7 +4236,7 @@ body {
4146
4236
  }
4147
4237
 
4148
4238
  .ui-steps-title {
4149
- color: $galleriaNavText;
4239
+ color: $galleria-nav-text;
4150
4240
  display: block;
4151
4241
  margin-top: 6px;
4152
4242
  }
@@ -4624,7 +4714,7 @@ body {
4624
4714
  }
4625
4715
 
4626
4716
  .ui-menuitem-icon {
4627
- color: $carouselPagelink;
4717
+ color: $carousel-page-link;
4628
4718
  }
4629
4719
  }
4630
4720
  }
@@ -4790,7 +4880,7 @@ body {
4790
4880
 
4791
4881
  .ui-galleria {
4792
4882
  .ui-galleria-nav-prev {
4793
- color: $galleriaNavText;
4883
+ color: $galleria-nav-text;
4794
4884
  font-size: 15px;
4795
4885
  position: absolute;
4796
4886
  transition: all 0.3s;
@@ -4801,7 +4891,7 @@ body {
4801
4891
  }
4802
4892
 
4803
4893
  .ui-galleria-nav-next {
4804
- color: $galleriaNavText;
4894
+ color: $galleria-nav-text;
4805
4895
  font-size: 15px;
4806
4896
  position: absolute;
4807
4897
  transition: all 0.3s;
@@ -4911,7 +5001,7 @@ body {
4911
5001
  }
4912
5002
 
4913
5003
  .m-subheader .m-subheader__title.m-subheader__title--separator {
4914
- border-right: 1px solid $primeSeprator;
5004
+ border-right: 1px solid $prime-separator;
4915
5005
  }
4916
5006
 
4917
5007
  .m-subheader .m-subheader__title {
@@ -4936,10 +5026,18 @@ body {
4936
5026
  margin: 15px 0;
4937
5027
  padding: 5px;
4938
5028
 
5029
+ // Used across CRM/Admin tables for MRR + totals cells
5030
+ .expected-mrr,
5031
+ .mrr-header {
5032
+ white-space: nowrap;
5033
+ word-break: keep-all;
5034
+ }
5035
+
4939
5036
  .total-records-count {
4940
5037
  bottom: -8px;
4941
5038
  float: left;
4942
5039
  position: relative;
5040
+ white-space: nowrap;
4943
5041
  }
4944
5042
 
4945
5043
  .search-filter {
@@ -4990,7 +5088,7 @@ body {
4990
5088
  padding-bottom: 30px;
4991
5089
 
4992
5090
  .primeng-datatable-container table thead tr th {
4993
- background-color: $form-control-color !important;
5091
+ background-color: $tabs-sub-bg !important;
4994
5092
  padding: 3px 10px;
4995
5093
  }
4996
5094
  }
@@ -5003,7 +5101,7 @@ body {
5003
5101
 
5004
5102
  .skills-modal {
5005
5103
  .ui-autocomplete-multiple {
5006
- border: 1px solid $uiinputText;
5104
+ border: 1px solid $ui-input-text;
5007
5105
  }
5008
5106
  }
5009
5107