@posiwise/core-styles 0.0.41 → 1.0.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 (33) hide show
  1. package/css/google-fonts.css +1 -4
  2. package/css/hopscotch.css +1 -1
  3. package/package.json +4 -4
  4. package/scss/_dashboard.scss +1 -1
  5. package/scss/_dynamic-styles.scss +7 -873
  6. package/scss/common/landing-page-a/landing-page-style-1.scss +7 -7
  7. package/scss/common/landing-page-b/banner.scss +8 -8
  8. package/scss/common/landing-page-b/contact-us.scss +4 -4
  9. package/scss/common/landing-page-b/explainer.scss +6 -6
  10. package/scss/common/landing-page-b/explainer2.scss +1 -1
  11. package/scss/common/landing-page-b/landing-page-style-2.scss +3 -4
  12. package/scss/custom-bootstrap/_badge.scss +25 -35
  13. package/scss/custom-bootstrap/_type.scss +1 -7
  14. package/scss/dashboard/_bootstrap-social.scss +25 -25
  15. package/scss/dashboard/_coming-soon.scss +1 -1
  16. package/scss/dashboard/_components.scss +1 -1
  17. package/scss/dashboard/_email.scss +7 -7
  18. package/scss/dashboard/_helper.scss +7 -17
  19. package/scss/dashboard/_icons.scss +0 -7
  20. package/scss/dashboard/_misc.scss +1 -1
  21. package/scss/dashboard/_palette.scss +125 -284
  22. package/scss/dashboard/_profile.scss +1 -1
  23. package/scss/dashboard/_tabs.scss +0 -18
  24. package/scss/dashboard/mixins/_utilities.scss +1 -1
  25. package/scss/dashboard/mixins/_vendor-prefixes.scss +2 -2
  26. package/scss/plugins/perfect-scrollbar/_variables.scss +1 -1
  27. package/scss/public-pages/_layout.scss +1 -8
  28. package/scss/shared/_prime-ng.scss +180 -213
  29. package/scss/variables/_app-colors-variables.scss +1 -7
  30. package/scss/variables/_branding-variables.scss +7 -9
  31. package/scss/variables/_generic-variables.scss +5 -5
  32. package/scss/variables/_primeng-variables.scss +38 -38
  33. package/app.scss +0 -45
package/scss/shared/_prime-ng.scss CHANGED
@@ -43,28 +43,24 @@ body {
43
43
  opacity: 0.5;
44
44
  }
45
45
 
46
- /* PrimeNG 19: Support both old (ui-*) and new (p-*) class names for migration */
47
- .ui-inputtext,
48
- .p-inputtext {
46
+ .ui-inputtext {
49
47
  appearance: none;
50
48
  background: rgb(255 255 255);
51
- border: 1px solid $ui-input-text;
49
+ border: 1px solid $uiinputText;
52
50
  color: $font-color-main;
53
51
  font-size: 13px;
54
52
  padding: 0.429em;
55
- transition:
56
- border-color 0.3s,
57
- box-shadow 0.3s;
53
+ transition: border-color 0.3s, box-shadow 0.3s;
58
54
 
59
55
  &:enabled {
60
56
  &:hover {
61
- &:not(.ui-state-error):not(.p-invalid) {
57
+ &:not(.ui-state-error) {
62
58
  border-color: $toggleButton;
63
59
  }
64
60
  }
65
61
 
66
62
  &:focus {
67
- &:not(.ui-state-error):not(.p-invalid) {
63
+ &:not(.ui-state-error) {
68
64
  border-color: $toggleButton;
69
65
  box-shadow: 0 0 6px 0 rgb(0 0 0 / 16%);
70
66
  outline: 0 none;
@@ -86,13 +82,11 @@ body {
86
82
 
87
83
  .ui-chkbox-box {
88
84
  background-color: rgb(255 255 255);
89
- border: 1px solid $ui-input-text;
85
+ border: 1px solid $uiinputText;
90
86
  border-radius: 0;
91
87
  height: 20px;
92
88
  text-align: center;
93
- transition:
94
- background-color 0.3s,
95
- border-color 0.3s;
89
+ transition: background-color 0.3s, border-color 0.3s;
96
90
  width: 20px;
97
91
 
98
92
  &:not(.ui-state-disabled) {
@@ -148,14 +142,12 @@ body {
148
142
 
149
143
  .ui-radiobutton-box {
150
144
  background-color: rgb(255 255 255);
151
- border: 1px solid $ui-input-text;
145
+ border: 1px solid $uiinputText;
152
146
  border-radius: 50%;
153
147
  height: 20px;
154
148
  position: relative;
155
149
  text-align: center;
156
- transition:
157
- background-color 0.3s,
158
- border-color 0.3s;
150
+ transition: background-color 0.3s, border-color 0.3s;
159
151
  width: 20px;
160
152
 
161
153
  &:not(.ui-state-disabled) {
@@ -226,12 +218,12 @@ body {
226
218
 
227
219
  .p-inputswitch-slider {
228
220
  background-color: rgb(255 255 255);
229
- border: 1px solid $ui-input-text;
221
+ border: 1px solid $uiinputText;
230
222
  border-radius: 8px;
231
223
  transition: border-color 0.3s;
232
224
 
233
225
  &::before {
234
- background-color: $input-switch-slider;
226
+ background-color: $inputswitchSlider;
235
227
  border-radius: 50%;
236
228
  bottom: -0.308em;
237
229
  height: 1.538em;
@@ -253,8 +245,8 @@ body {
253
245
 
254
246
  .p-inputswitch.p-inputswitch-checked {
255
247
  .p-inputswitch-slider {
256
- background-color: $input-switch-sldr;
257
- border-color: $input-switch-sldr;
248
+ background-color: $inputSwitchSldr;
249
+ border-color: $inputSwitchSldr;
258
250
 
259
251
  &::before {
260
252
  background-color: $enabledFocus;
@@ -265,8 +257,8 @@ body {
265
257
  &:not(.p-state-disabled) {
266
258
  &:hover {
267
259
  .p-inputswitch-slider {
268
- background-color: $input-switch-sldr;
269
- border-color: $input-switch-sldr;
260
+ background-color: $inputSwitchSldr;
261
+ border-color: $inputSwitchSldr;
270
262
  }
271
263
  }
272
264
  }
@@ -280,8 +272,8 @@ body {
280
272
 
281
273
  .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus {
282
274
  .p-inputswitch-slider {
283
- background: $input-switch-sldr;
284
- border-color: $input-switch-sldr;
275
+ background: $inputSwitchSldr;
276
+ border-color: $inputSwitchSldr;
285
277
  }
286
278
  }
287
279
 
@@ -332,8 +324,8 @@ body {
332
324
  }
333
325
 
334
326
  .p-autocomplete-token {
335
- background-color: $auto-complete-bk;
336
- background-image: linear-gradient($auto-complete-bk, $tabColor);
327
+ background-color: $autoCompletebk;
328
+ background-image: linear-gradient($autoCompletebk, $tabColor);
337
329
  border-color: rgb(0 0 0 / 8%);
338
330
  color: $autoColor;
339
331
  font-size: 13px;
@@ -342,7 +334,7 @@ body {
342
334
  }
343
335
 
344
336
  .p-autocomplete-token-icon {
345
- background: $autoCompleteIcon;
337
+ background: $autoCompleteicon;
346
338
  border-radius: 50%;
347
339
  color: rgb(255 255 255);
348
340
  margin-right: 4px;
@@ -376,7 +368,7 @@ body {
376
368
  }
377
369
 
378
370
  .p-autocomplete-group {
379
- background-color: $auto-complete-grp;
371
+ background-color: $autoCompletegrp;
380
372
  color: $font-color-main;
381
373
  padding: 0.429em 0.857em;
382
374
  }
@@ -501,7 +493,6 @@ body {
501
493
 
502
494
  .is-invalid {
503
495
  .ui-dropdown,
504
- .p-dropdown,
505
496
  .ql-snow {
506
497
  border-color: rgb(255 88 107);
507
498
  }
@@ -512,16 +503,12 @@ body {
512
503
  width: 100%;
513
504
  }
514
505
 
515
- /* PrimeNG 19: Support both old (ui-*) and new (p-*) class names */
516
- .ui-dropdown,
517
- .p-dropdown {
506
+ .ui-dropdown {
518
507
  background: rgb(255 255 255);
519
- border: 1px solid $ui-input-text;
520
- transition:
521
- border-color 0.3s,
522
- box-shadow 0.3s;
508
+ border: 1px solid $uiinputText;
509
+ transition: border-color 0.3s, box-shadow 0.3s;
523
510
 
524
- &:not(.ui-state-disabled):not(.p-disabled) {
511
+ &:not(.ui-state-disabled) {
525
512
  &:hover {
526
513
  border-color: $toggleButton;
527
514
  }
@@ -533,13 +520,11 @@ body {
533
520
  }
534
521
  }
535
522
 
536
- .ui-dropdown-label,
537
- .p-dropdown-label {
523
+ .ui-dropdown-label {
538
524
  padding-right: 2em;
539
525
  }
540
526
 
541
- .ui-dropdown-trigger,
542
- .p-dropdown-trigger {
527
+ .ui-dropdown-trigger {
543
528
  background-color: rgb(255 255 255);
544
529
  color: $font-color-main;
545
530
  line-height: 2em;
@@ -548,8 +533,7 @@ body {
548
533
  width: 2em;
549
534
  }
550
535
 
551
- &:not(.ui-state-disabled):not(.p-disabled).ui-state-focus,
552
- &:not(.p-disabled).p-focus {
536
+ &:not(.ui-state-disabled).ui-state-focus {
553
537
  border-color: $toggleButton;
554
538
  box-shadow: 0 0 6px 0 rgb(0 0 0 / 16%);
555
539
  outline: 0 none;
@@ -635,10 +619,8 @@ body {
635
619
 
636
620
  .ui-multiselect {
637
621
  background: rgb(255 255 255);
638
- border: 1px solid $ui-input-text;
639
- transition:
640
- border-color 0.3s,
641
- box-shadow 0.3s;
622
+ border: 1px solid $uiinputText;
623
+ transition: border-color 0.3s, box-shadow 0.3s;
642
624
 
643
625
  &:not(.ui-state-disabled) {
644
626
  &:hover {
@@ -771,7 +753,7 @@ body {
771
753
 
772
754
  .ui-listbox {
773
755
  background: rgb(255 255 255);
774
- border: 1px solid $ui-input-text;
756
+ border: 1px solid $uiinputText;
775
757
  min-width: 12em;
776
758
  padding: 0;
777
759
 
@@ -849,7 +831,7 @@ body {
849
831
  &:not(.ui-state-disabled) {
850
832
  &:not(.ui-state-active) {
851
833
  &:hover {
852
- border: 1px solid $ui-input-text;
834
+ border: 1px solid $uiinputText;
853
835
  }
854
836
  }
855
837
  }
@@ -878,79 +860,79 @@ body {
878
860
  .ql-snow.ql-toolbar {
879
861
  button {
880
862
  &:hover {
881
- color: $carousel-page-link;
863
+ color: $carouselPagelink;
882
864
 
883
865
  .ql-stroke {
884
- stroke: $carousel-page-link;
866
+ stroke: $carouselPagelink;
885
867
  }
886
868
 
887
869
  .ql-stroke-miter {
888
- stroke: $carousel-page-link;
870
+ stroke: $carouselPagelink;
889
871
  }
890
872
  }
891
873
  }
892
874
 
893
875
  button.ql-active {
894
- color: $carousel-page-link;
876
+ color: $carouselPagelink;
895
877
 
896
878
  .ql-stroke {
897
- stroke: $carousel-page-link;
879
+ stroke: $carouselPagelink;
898
880
  }
899
881
 
900
882
  .ql-stroke-miter {
901
- stroke: $carousel-page-link;
883
+ stroke: $carouselPagelink;
902
884
  }
903
885
  }
904
886
 
905
887
  .ql-picker-label {
906
888
  &:hover {
907
- color: $carousel-page-link;
889
+ color: $carouselPagelink;
908
890
 
909
891
  .ql-stroke {
910
- stroke: $carousel-page-link;
892
+ stroke: $carouselPagelink;
911
893
  }
912
894
 
913
895
  .ql-stroke-miter {
914
- stroke: $carousel-page-link;
896
+ stroke: $carouselPagelink;
915
897
  }
916
898
  }
917
899
  }
918
900
 
919
901
  .ql-picker-label.ql-active {
920
- color: $carousel-page-link;
902
+ color: $carouselPagelink;
921
903
 
922
904
  .ql-stroke {
923
- stroke: $carousel-page-link;
905
+ stroke: $carouselPagelink;
924
906
  }
925
907
 
926
908
  .ql-stroke-miter {
927
- stroke: $carousel-page-link;
909
+ stroke: $carouselPagelink;
928
910
  }
929
911
  }
930
912
 
931
913
  .ql-picker-item {
932
914
  &:hover {
933
- color: $carousel-page-link;
915
+ color: $carouselPagelink;
934
916
 
935
917
  .ql-stroke {
936
- stroke: $carousel-page-link;
918
+ stroke: $carouselPagelink;
937
919
  }
938
920
 
939
921
  .ql-stroke-miter {
940
- stroke: $carousel-page-link;
922
+ stroke: $carouselPagelink;
941
923
  }
942
924
  }
943
925
  }
944
926
 
945
927
  .ql-picker-item.ql-selected {
946
- color: $carousel-page-link;
928
+ color: $carouselPagelink;
947
929
 
948
930
  .ql-stroke {
949
- stroke: $carousel-page-link;
931
+ stroke: $carouselPagelink;
950
932
  }
951
933
 
952
934
  .ql-stroke-miter {
953
- stroke: $carousel-page-link;
935
+ stroke: $carouselPagelink;
954
936
  }
955
937
  }
956
938
  }
@@ -959,79 +941,79 @@ body {
959
941
  .ql-toolbar {
960
942
  button {
961
943
  &:hover {
962
- color: $carousel-page-link;
944
+ color: $carouselPagelink;
963
945
 
964
946
  .ql-stroke {
965
- stroke: $carousel-page-link;
947
+ stroke: $carouselPagelink;
966
948
  }
967
949
 
968
950
  .ql-stroke-miter {
969
- stroke: $carousel-page-link;
951
+ stroke: $carouselPagelink;
970
952
  }
971
953
  }
972
954
  }
973
955
 
974
956
  button.ql-active {
975
- color: $carousel-page-link;
957
+ color: $carouselPagelink;
976
958
 
977
959
  .ql-stroke {
978
- stroke: $carousel-page-link;
960
+ stroke: $carouselPagelink;
979
961
  }
980
962
 
981
963
  .ql-stroke-miter {
982
- stroke: $carousel-page-link;
964
+ stroke: $carouselPagelink;
983
965
  }
984
966
  }
985
967
 
986
968
  .ql-picker-label {
987
969
  &:hover {
988
- color: $carousel-page-link;
970
+ color: $carouselPagelink;
989
971
 
990
972
  .ql-stroke {
991
- stroke: $carousel-page-link;
973
+ stroke: $carouselPagelink;
992
974
  }
993
975
 
994
976
  .ql-stroke-miter {
995
- stroke: $carousel-page-link;
977
+ stroke: $carouselPagelink;
996
978
  }
997
979
  }
998
980
  }
999
981
 
1000
982
  .ql-picker-label.ql-active {
1001
- color: $carousel-page-link;
983
+ color: $carouselPagelink;
1002
984
 
1003
985
  .ql-stroke {
1004
- stroke: $carousel-page-link;
986
+ stroke: $carouselPagelink;
1005
987
  }
1006
988
 
1007
989
  .ql-stroke-miter {
1008
- stroke: $carousel-page-link;
990
+ stroke: $carouselPagelink;
1009
991
  }
1010
992
  }
1011
993
 
1012
994
  .ql-picker-item {
1013
995
  &:hover {
1014
- color: $carousel-page-link;
996
+ color: $carouselPagelink;
1015
997
 
1016
998
  .ql-stroke {
1017
- stroke: $carousel-page-link;
999
+ stroke: $carouselPagelink;
1018
1000
  }
1019
1001
 
1020
1002
  .ql-stroke-miter {
1021
- stroke: $carousel-page-link;
1003
+ stroke: $carouselPagelink;
1022
1004
  }
1023
1005
  }
1024
1006
  }
1025
1007
 
1026
1008
  .ql-picker-item.ql-selected {
1027
- color: $carousel-page-link;
1009
+ color: $carouselPagelink;
1028
1010
 
1029
1011
  .ql-stroke {
1030
- stroke: $carousel-page-link;
1012
+ stroke: $carouselPagelink;
1031
1013
  }
1032
1014
 
1033
1015
  .ql-stroke-miter {
1034
- stroke: $carousel-page-link;
1016
+ stroke: $carouselPagelink;
1035
1017
  }
1036
1018
  }
1037
1019
  }
@@ -1092,7 +1074,7 @@ body {
1092
1074
  }
1093
1075
 
1094
1076
  .ui-slider {
1095
- background-color: $ui-input-text;
1077
+ background-color: $uiinputText;
1096
1078
  border: 0 0;
1097
1079
 
1098
1080
  .ui-slider-handle {
@@ -1241,7 +1223,7 @@ body {
1241
1223
 
1242
1224
  .ui-timepicker {
1243
1225
  border: 0 0;
1244
- border-top: 1px solid $auto-complete-grp;
1226
+ border-top: 1px solid $autoCompletegrp;
1245
1227
  padding: 0.857em;
1246
1228
 
1247
1229
  a {
@@ -1402,8 +1384,8 @@ body {
1402
1384
 
1403
1385
  .ui-inputgroup {
1404
1386
  .ui-inputgroup-addon {
1405
- background-color: $input-ground-addon;
1406
- border-color: $ui-input-text;
1387
+ background-color: $inputGroundaddon;
1388
+ border-color: $uiinputText;
1407
1389
  color: $font-color-main;
1408
1390
  min-width: 2em;
1409
1391
  padding: 0.429em;
@@ -1481,24 +1463,19 @@ body {
1481
1463
  color: $placeHolder;
1482
1464
  } */
1483
1465
 
1484
- /* PrimeNG 19: Support both old and new class names */
1485
- .ui-inputtext.ng-dirty.ng-invalid,
1486
- .p-inputtext.ng-dirty.ng-invalid {
1466
+ .ui-inputtext.ng-dirty.ng-invalid {
1487
1467
  border-color: $invalidInput;
1488
1468
  }
1489
1469
 
1490
1470
  p-dropdown.ng-dirty.ng-invalid {
1491
- > .ui-dropdown,
1492
- > .p-dropdown {
1471
+ > .ui-dropdown {
1493
1472
  border-color: $invalidInput;
1494
1473
  }
1495
1474
  }
1496
1475
 
1497
1476
  p-autocomplete.ng-dirty.ng-invalid {
1498
- > .ui-autocomplete,
1499
- > .p-autocomplete {
1500
- > .ui-inputtext,
1501
- > .p-inputtext {
1477
+ > .ui-autocomplete {
1478
+ > .ui-inputtext {
1502
1479
  border-color: $invalidInput;
1503
1480
  }
1504
1481
  }
@@ -1549,8 +1526,7 @@ body {
1549
1526
  }
1550
1527
 
1551
1528
  p-multiselect.ng-dirty.ng-invalid {
1552
- > .ui-multiselect,
1553
- > .p-multiselect {
1529
+ > .ui-multiselect {
1554
1530
  border-color: $invalidInput;
1555
1531
  }
1556
1532
  }
@@ -1654,7 +1630,7 @@ body {
1654
1630
  color: $font-color-main;
1655
1631
 
1656
1632
  .ui-button-icon-left {
1657
- color: $toast-msg-success;
1633
+ color: $toastmsgSuccess;
1658
1634
  }
1659
1635
  }
1660
1636
  }
@@ -1666,7 +1642,7 @@ body {
1666
1642
  outline: 0 none;
1667
1643
 
1668
1644
  .ui-button-icon-left {
1669
- color: $toast-msg-success;
1645
+ color: $toastmsgSuccess;
1670
1646
  }
1671
1647
  }
1672
1648
  }
@@ -1720,7 +1696,7 @@ body {
1720
1696
  color: $font-color-main;
1721
1697
 
1722
1698
  .p-button-icon-left {
1723
- color: $toast-msg-success;
1699
+ color: $toastmsgSuccess;
1724
1700
  }
1725
1701
  }
1726
1702
  }
@@ -1731,7 +1707,7 @@ body {
1731
1707
  outline: 0 none;
1732
1708
 
1733
1709
  .p-button-icon-left {
1734
- color: $toast-msg-success;
1710
+ color: $toastmsgSuccess;
1735
1711
  }
1736
1712
  }
1737
1713
  }
@@ -1806,7 +1782,7 @@ body {
1806
1782
  &:hover {
1807
1783
  background-color: $tabView;
1808
1784
  border-color: $tabView;
1809
- color: $toast-msg-success;
1785
+ color: $toastmsgSuccess;
1810
1786
  }
1811
1787
 
1812
1788
  &:focus {
@@ -1831,7 +1807,7 @@ body {
1831
1807
  &:hover {
1832
1808
  background-color: $tabView;
1833
1809
  border-color: $tabView;
1834
- color: $toast-msg-success;
1810
+ color: $toastmsgSuccess;
1835
1811
  }
1836
1812
 
1837
1813
  &:focus {
@@ -1854,13 +1830,13 @@ body {
1854
1830
 
1855
1831
  &:enabled {
1856
1832
  &:hover {
1857
- background-color: $button-info-hover;
1858
- border-color: $button-info-hover;
1833
+ background-color: $buttonInfohover;
1834
+ border-color: $buttonInfohover;
1859
1835
  color: rgb(255 255 255);
1860
1836
  }
1861
1837
 
1862
1838
  &:focus {
1863
- background-color: $button-info-focus;
1839
+ background-color: $buttonInfofocus;
1864
1840
  }
1865
1841
 
1866
1842
  &:active {
@@ -1879,13 +1855,13 @@ body {
1879
1855
 
1880
1856
  &:enabled {
1881
1857
  &:hover {
1882
- background-color: $button-info-hover;
1883
- border-color: $button-info-hover;
1858
+ background-color: $buttonInfohover;
1859
+ border-color: $buttonInfohover;
1884
1860
  color: rgb(255 255 255);
1885
1861
  }
1886
1862
 
1887
1863
  &:focus {
1888
- background-color: $button-info-focus;
1864
+ background-color: $buttonInfofocus;
1889
1865
  }
1890
1866
 
1891
1867
  &:active {
@@ -1910,12 +1886,12 @@ body {
1910
1886
  }
1911
1887
 
1912
1888
  &:focus {
1913
- background-color: $prime-state-button-focus;
1889
+ background-color: $primeStateButtonfocus;
1914
1890
  }
1915
1891
 
1916
1892
  &:active {
1917
- background-color: $prime-state-button-active;
1918
- border-color: $prime-state-button-active;
1893
+ background-color: $primeStateButtonactive;
1894
+ border-color: $primeStateButtonactive;
1919
1895
  color: rgb(255 255 255);
1920
1896
  }
1921
1897
  }
@@ -1935,12 +1911,12 @@ body {
1935
1911
  }
1936
1912
 
1937
1913
  &:focus {
1938
- background-color: $prime-state-button-focus;
1914
+ background-color: $primeStateButtonfocus;
1939
1915
  }
1940
1916
 
1941
1917
  &:active {
1942
- background-color: $prime-state-button-active;
1943
- border-color: $prime-state-button-active;
1918
+ background-color: $primeStateButtonactive;
1919
+ border-color: $primeStateButtonactive;
1944
1920
  color: rgb(255 255 255);
1945
1921
  }
1946
1922
  }
@@ -1954,18 +1930,18 @@ body {
1954
1930
 
1955
1931
  &:enabled {
1956
1932
  &:hover {
1957
- background-color: $prime-state-button-warning;
1958
- border-color: $prime-state-button-warning;
1933
+ background-color: $primeStateButtonwarning;
1934
+ border-color: $primeStateButtonwarning;
1959
1935
  color: $font-color-main;
1960
1936
  }
1961
1937
 
1962
1938
  &:focus {
1963
- background-color: $prime-button-warning-focus;
1939
+ background-color: $primeButtonwarningFocus;
1964
1940
  }
1965
1941
 
1966
1942
  &:active {
1967
- background-color: $prime-button-warning-active;
1968
- border-color: $prime-button-warning-active;
1943
+ background-color: $primeButtonwarningactive;
1944
+ border-color: $primeButtonwarningactive;
1969
1945
  color: $font-color-main;
1970
1946
  }
1971
1947
  }
@@ -1979,18 +1955,18 @@ body {
1979
1955
 
1980
1956
  &:enabled {
1981
1957
  &:hover {
1982
- background-color: $prime-state-button-warning;
1983
- border-color: $prime-state-button-warning;
1958
+ background-color: $primeStateButtonwarning;
1959
+ border-color: $primeStateButtonwarning;
1984
1960
  color: $font-color-main;
1985
1961
  }
1986
1962
 
1987
1963
  &:focus {
1988
- background-color: $prime-button-warning-focus;
1964
+ background-color: $primeButtonwarningFocus;
1989
1965
  }
1990
1966
 
1991
1967
  &:active {
1992
- background-color: $prime-button-warning-active;
1993
- border-color: $prime-button-warning-active;
1968
+ background-color: $primeButtonwarningactive;
1969
+ border-color: $primeButtonwarningactive;
1994
1970
  color: $font-color-main;
1995
1971
  }
1996
1972
  }
@@ -1998,14 +1974,14 @@ body {
1998
1974
  }
1999
1975
 
2000
1976
  .ui-button.ui-state-default.ui-button-danger {
2001
- background-color: $prime-button-danger-active;
2002
- border: 1px solid $prime-button-danger-active;
1977
+ background-color: $primeButtonDangeractive;
1978
+ border: 1px solid $primeButtonDangeractive;
2003
1979
  color: rgb(255 255 255);
2004
1980
 
2005
1981
  &:enabled {
2006
1982
  &:hover {
2007
- background-color: $prime-button-set-hover;
2008
- border-color: $prime-button-set-hover;
1983
+ background-color: $primeButtonSethover;
1984
+ border-color: $primeButtonSethover;
2009
1985
  color: rgb(255 255 255);
2010
1986
  }
2011
1987
 
@@ -2014,8 +1990,8 @@ body {
2014
1990
  }
2015
1991
 
2016
1992
  &:active {
2017
- background-color: $prime-button-set-active;
2018
- border-color: $prime-button-set-active;
1993
+ background-color: $primeButtonSetactive;
1994
+ border-color: $primeButtonSetactive;
2019
1995
  color: rgb(255 255 255);
2020
1996
  }
2021
1997
  }
@@ -2023,14 +1999,14 @@ body {
2023
1999
 
2024
2000
  .ui-buttonset.ui-button-danger {
2025
2001
  > .ui-button.ui-state-default {
2026
- background-color: $prime-button-danger-active;
2027
- border: 1px solid $prime-button-danger-active;
2002
+ background-color: $primeButtonDangeractive;
2003
+ border: 1px solid $primeButtonDangeractive;
2028
2004
  color: rgb(255 255 255);
2029
2005
 
2030
2006
  &:enabled {
2031
2007
  &:hover {
2032
- background-color: $prime-button-set-hover;
2033
- border-color: $prime-button-set-hover;
2008
+ background-color: $primeButtonSethover;
2009
+ border-color: $primeButtonSethover;
2034
2010
  color: rgb(255 255 255);
2035
2011
  }
2036
2012
 
@@ -2039,8 +2015,8 @@ body {
2039
2015
  }
2040
2016
 
2041
2017
  &:active {
2042
- background-color: $prime-button-set-active;
2043
- border-color: $prime-button-set-active;
2018
+ background-color: $primeButtonSetactive;
2019
+ border-color: $primeButtonSetactive;
2044
2020
  color: rgb(255 255 255);
2045
2021
  }
2046
2022
  }
@@ -2086,7 +2062,7 @@ body {
2086
2062
  transition: color 0.3s;
2087
2063
 
2088
2064
  &:hover {
2089
- color: $carousel-page-link;
2065
+ color: $carouselPagelink;
2090
2066
  }
2091
2067
  }
2092
2068
  }
@@ -2220,15 +2196,6 @@ body {
2220
2196
  }
2221
2197
  }
2222
2198
 
2223
- /* PrimeNG 19 Accordion - Set text and icon color to tabs_bg */
2224
- .p-accordionheader {
2225
- color: var(--tabs_bg) !important;
2226
-
2227
- .p-accordionheader-toggle-icon {
2228
- color: var(--tabs_bg) !important;
2229
- }
2230
- }
2231
-
2232
2199
  .ui-tabview.ui-tabview-top {
2233
2200
  border: 0 0;
2234
2201
 
@@ -2274,11 +2241,11 @@ body {
2274
2241
  color: $font-color-main;
2275
2242
 
2276
2243
  .ui-tabview-left-icon {
2277
- color: $carousel-page-link;
2244
+ color: $carouselPagelink;
2278
2245
  }
2279
2246
 
2280
2247
  .ui-tabview-right-icon {
2281
- color: $carousel-page-link;
2248
+ color: $carouselPagelink;
2282
2249
  }
2283
2250
  }
2284
2251
 
@@ -2381,11 +2348,11 @@ body {
2381
2348
  color: $font-color-main;
2382
2349
 
2383
2350
  .ui-tabview-left-icon {
2384
- color: $carousel-page-link;
2351
+ color: $carouselPagelink;
2385
2352
  }
2386
2353
 
2387
2354
  .ui-tabview-right-icon {
2388
- color: $carousel-page-link;
2355
+ color: $carouselPagelink;
2389
2356
  }
2390
2357
  }
2391
2358
 
@@ -2488,11 +2455,11 @@ body {
2488
2455
  color: $font-color-main;
2489
2456
 
2490
2457
  .ui-tabview-left-icon {
2491
- color: $carousel-page-link;
2458
+ color: $carouselPagelink;
2492
2459
  }
2493
2460
 
2494
2461
  .ui-tabview-right-icon {
2495
- color: $carousel-page-link;
2462
+ color: $carouselPagelink;
2496
2463
  }
2497
2464
  }
2498
2465
 
@@ -2595,11 +2562,11 @@ body {
2595
2562
  color: $font-color-main;
2596
2563
 
2597
2564
  .ui-tabview-left-icon {
2598
- color: $carousel-page-link;
2565
+ color: $carouselPagelink;
2599
2566
  }
2600
2567
 
2601
2568
  .ui-tabview-right-icon {
2602
- color: $carousel-page-link;
2569
+ color: $carouselPagelink;
2603
2570
  }
2604
2571
  }
2605
2572
 
@@ -2688,7 +2655,7 @@ body {
2688
2655
 
2689
2656
  .p-paginator-first {
2690
2657
  border: 0 0;
2691
- color: $galleria-nav-text;
2658
+ color: $galleriaNavText;
2692
2659
  height: 2.308em;
2693
2660
  line-height: 2.308em;
2694
2661
  margin: 0;
@@ -2713,7 +2680,7 @@ body {
2713
2680
 
2714
2681
  .p-paginator-prev {
2715
2682
  border: 0 0;
2716
- color: $galleria-nav-text;
2683
+ color: $galleriaNavText;
2717
2684
  height: 2.308em;
2718
2685
  line-height: 2.308em;
2719
2686
  margin: 0;
@@ -2737,7 +2704,7 @@ body {
2737
2704
 
2738
2705
  .p-paginator-next {
2739
2706
  border: 0 0;
2740
- color: $galleria-nav-text;
2707
+ color: $galleriaNavText;
2741
2708
  height: 2.308em;
2742
2709
  line-height: 2.308em;
2743
2710
  margin: 0;
@@ -2762,7 +2729,7 @@ body {
2762
2729
 
2763
2730
  .p-paginator-last {
2764
2731
  border: 0 0;
2765
- color: $galleria-nav-text;
2732
+ color: $galleriaNavText;
2766
2733
  height: 2.308em;
2767
2734
  line-height: 2.308em;
2768
2735
  margin: 0;
@@ -2792,7 +2759,7 @@ body {
2792
2759
 
2793
2760
  .p-paginator-page {
2794
2761
  border: 0 0;
2795
- color: $galleria-nav-text;
2762
+ color: $galleriaNavText;
2796
2763
  height: 2.308em;
2797
2764
  line-height: 2.308em;
2798
2765
  margin: 0;
@@ -2943,7 +2910,7 @@ body {
2943
2910
  &:not(.p-highlight) {
2944
2911
  &:not(.ui-contextmenu-selected) {
2945
2912
  &:hover {
2946
- background-color: $satet-hover;
2913
+ background-color: $satetHover;
2947
2914
  color: $font-color-main;
2948
2915
  cursor: pointer;
2949
2916
  }
@@ -3288,7 +3255,7 @@ body {
3288
3255
  padding: 0;
3289
3256
 
3290
3257
  .ui-tree-toggler {
3291
- color: $galleria-nav-text;
3258
+ color: $galleriaNavText;
3292
3259
  display: inline-block;
3293
3260
  float: none;
3294
3261
  font-size: 15px;
@@ -3297,7 +3264,7 @@ body {
3297
3264
  }
3298
3265
 
3299
3266
  .ui-treenode-icon {
3300
- color: $galleria-nav-text;
3267
+ color: $galleriaNavText;
3301
3268
  display: inline-block;
3302
3269
  font-size: 15px;
3303
3270
  margin: 0 0.143em 0 0;
@@ -3438,7 +3405,7 @@ body {
3438
3405
 
3439
3406
  .ui-node-toggler {
3440
3407
  bottom: -0.7em;
3441
- color: $galleria-nav-text;
3408
+ color: $galleriaNavText;
3442
3409
  margin-left: -0.46em;
3443
3410
  }
3444
3411
  }
@@ -3489,7 +3456,7 @@ body {
3489
3456
 
3490
3457
  &:not(.ui-state-disabled) {
3491
3458
  &:hover {
3492
- color: $carousel-page-link;
3459
+ color: $carouselPagelink;
3493
3460
  }
3494
3461
  }
3495
3462
  }
@@ -3503,7 +3470,7 @@ body {
3503
3470
  transition: color 0.3s;
3504
3471
 
3505
3472
  &:hover {
3506
- color: $carousel-page-link;
3473
+ color: $carouselPagelink;
3507
3474
  }
3508
3475
  }
3509
3476
 
@@ -3563,7 +3530,7 @@ body {
3563
3530
  padding: 0.3em 1em;
3564
3531
 
3565
3532
  .ui-treetable-toggler {
3566
- color: $galleria-nav-text;
3533
+ color: $galleriaNavText;
3567
3534
  font-size: 15px;
3568
3535
  line-height: 1.5;
3569
3536
  vertical-align: middle;
@@ -3628,7 +3595,7 @@ body {
3628
3595
 
3629
3596
  &:not(.ui-state-highlight) {
3630
3597
  &:hover {
3631
- background-color: $satet-hover;
3598
+ background-color: $satetHover;
3632
3599
  color: $font-color-main;
3633
3600
 
3634
3601
  a {
@@ -3666,7 +3633,7 @@ body {
3666
3633
  &:not(.ui-state-highlight) {
3667
3634
  &:not(.ui-contextmenu-selected) {
3668
3635
  &:hover {
3669
- background-color: $satet-hover;
3636
+ background-color: $satetHover;
3670
3637
  color: $font-color-main;
3671
3638
  cursor: pointer;
3672
3639
  }
@@ -3706,22 +3673,22 @@ body {
3706
3673
  }
3707
3674
 
3708
3675
  .ui-messages.ui-messages-success {
3709
- background-color: $toast-msg-success-bg;
3676
+ background-color: $toastmsgScessbg;
3710
3677
  border: 0 0;
3711
- color: $toast-msg-success;
3678
+ color: $toastmsgSuccess;
3712
3679
 
3713
3680
  .ui-messages-icon {
3714
- color: $toast-msg-success;
3681
+ color: $toastmsgSuccess;
3715
3682
  }
3716
3683
 
3717
3684
  .ui-messages-close {
3718
- color: $toast-msg-success;
3685
+ color: $toastmsgSuccess;
3719
3686
  }
3720
3687
  }
3721
3688
 
3722
3689
  .ui-messages.ui-messages-warn {
3723
- background-color: $toast-msg-warning;
3724
- border: 1px solid $toast-msg-Warn-bdr;
3690
+ background-color: $toastmsgWarning;
3691
+ border: 1px solid $toastmsgWarnbdr;
3725
3692
  color: $toastIconClose;
3726
3693
 
3727
3694
  .ui-messages-icon {
@@ -3734,8 +3701,8 @@ body {
3734
3701
  }
3735
3702
 
3736
3703
  .ui-messages.ui-messages-error {
3737
- background-color: $growl-error-msg;
3738
- border: 1px solid $growl-error-msg-bdr;
3704
+ background-color: $growlerrorMsg;
3705
+ border: 1px solid $growlerrorMsgbdr;
3739
3706
  color: $growlColor;
3740
3707
 
3741
3708
  .ui-messages-icon {
@@ -3754,21 +3721,21 @@ body {
3754
3721
  }
3755
3722
 
3756
3723
  .ui-message.ui-message-warn {
3757
- background-color: $toast-msg-warning;
3758
- border: 1px solid $toast-msg-Warn-bdr;
3724
+ background-color: $toastmsgWarning;
3725
+ border: 1px solid $toastmsgWarnbdr;
3759
3726
  color: $toastIconClose;
3760
3727
  }
3761
3728
 
3762
3729
  .ui-message.ui-message-error {
3763
- background-color: $growl-error-msg;
3764
- border: 1px solid $growl-error-msg-bdr;
3730
+ background-color: $growlerrorMsg;
3731
+ border: 1px solid $growlerrorMsgbdr;
3765
3732
  color: $growlColor;
3766
3733
  }
3767
3734
 
3768
3735
  .ui-message.ui-message-success {
3769
- background-color: $toast-msg-success-bg;
3736
+ background-color: $toastmsgScessbg;
3770
3737
  border: 0 0;
3771
- color: $toast-msg-success;
3738
+ color: $toastmsgSuccess;
3772
3739
  }
3773
3740
 
3774
3741
  .ui-message {
@@ -3812,18 +3779,18 @@ body {
3812
3779
  }
3813
3780
 
3814
3781
  .ui-growl-item-container.ui-growl-message-success {
3815
- background-color: $toast-msg-success-bg;
3782
+ background-color: $toastmsgScessbg;
3816
3783
  border: 0 0;
3817
- color: $toast-msg-success;
3784
+ color: $toastmsgSuccess;
3818
3785
 
3819
3786
  .ui-growl-image {
3820
- color: $toast-msg-success;
3787
+ color: $toastmsgSuccess;
3821
3788
  }
3822
3789
  }
3823
3790
 
3824
3791
  .ui-growl-item-container.ui-growl-message-warn {
3825
- background-color: $toast-msg-warning;
3826
- border: 1px solid $toast-msg-Warn-bdr;
3792
+ background-color: $toastmsgWarning;
3793
+ border: 1px solid $toastmsgWarnbdr;
3827
3794
  color: $toastIconClose;
3828
3795
 
3829
3796
  .ui-growl-image {
@@ -3832,8 +3799,8 @@ body {
3832
3799
  }
3833
3800
 
3834
3801
  .ui-growl-item-container.ui-growl-message-error {
3835
- background-color: $growl-error-msg;
3836
- border: 1px solid $growl-error-msg-bdr;
3802
+ background-color: $growlerrorMsg;
3803
+ border: 1px solid $growlerrorMsgbdr;
3837
3804
  color: $growlColor;
3838
3805
 
3839
3806
  .ui-growl-image {
@@ -3862,22 +3829,22 @@ body {
3862
3829
  }
3863
3830
 
3864
3831
  .ui-toast-message.ui-toast-message-success {
3865
- background-color: $toast-msg-success-bg;
3832
+ background-color: $toastmsgScessbg;
3866
3833
  border: 0 0;
3867
- color: $toast-msg-success;
3834
+ color: $toastmsgSuccess;
3868
3835
 
3869
3836
  .ui-toast-close-icon {
3870
- color: $toast-msg-success;
3837
+ color: $toastmsgSuccess;
3871
3838
  }
3872
3839
 
3873
3840
  .ui-toast-icon {
3874
- color: $toast-icon-success;
3841
+ color: $toastIconSuccess;
3875
3842
  }
3876
3843
  }
3877
3844
 
3878
3845
  .ui-toast-message.ui-toast-message-warn {
3879
- background-color: $toast-msg-warning;
3880
- border: 1px solid $toast-msg-Warn-bdr;
3846
+ background-color: $toastmsgWarning;
3847
+ border: 1px solid $toastmsgWarnbdr;
3881
3848
  color: $toastIconClose;
3882
3849
 
3883
3850
  .ui-toast-close-icon {
@@ -3890,8 +3857,8 @@ body {
3890
3857
  }
3891
3858
 
3892
3859
  .ui-toast-message.ui-toast-message-error {
3893
- background-color: $growl-error-msg;
3894
- border: 1px solid $growl-error-msg-bdr;
3860
+ background-color: $growlerrorMsg;
3861
+ border: 1px solid $growlerrorMsgbdr;
3895
3862
  color: $growlColor;
3896
3863
 
3897
3864
  .ui-toast-close-icon {
@@ -3962,7 +3929,7 @@ body {
3962
3929
  transition: color 0.3s;
3963
3930
 
3964
3931
  &:hover {
3965
- color: $carousel-page-link;
3932
+ color: $carouselPagelink;
3966
3933
  }
3967
3934
  }
3968
3935
  }
@@ -4071,7 +4038,7 @@ body {
4071
4038
  transition: color 0.3s;
4072
4039
 
4073
4040
  &:hover {
4074
- color: $carousel-page-link;
4041
+ color: $carouselPagelink;
4075
4042
  }
4076
4043
  }
4077
4044
  }
@@ -4134,7 +4101,7 @@ body {
4134
4101
 
4135
4102
  &:first-child {
4136
4103
  a {
4137
- color: $galleria-nav-text;
4104
+ color: $galleriaNavText;
4138
4105
  font-size: 17px;
4139
4106
  margin: 0;
4140
4107
  }
@@ -4142,7 +4109,7 @@ body {
4142
4109
  }
4143
4110
 
4144
4111
  li.ui-breadcrumb-chevron {
4145
- color: $galleria-nav-text;
4112
+ color: $galleriaNavText;
4146
4113
  margin: 0 0.429em;
4147
4114
  }
4148
4115
  }
@@ -4179,7 +4146,7 @@ body {
4179
4146
  }
4180
4147
 
4181
4148
  .ui-steps-title {
4182
- color: $galleria-nav-text;
4149
+ color: $galleriaNavText;
4183
4150
  display: block;
4184
4151
  margin-top: 6px;
4185
4152
  }
@@ -4657,7 +4624,7 @@ body {
4657
4624
  }
4658
4625
 
4659
4626
  .ui-menuitem-icon {
4660
- color: $carousel-page-link;
4627
+ color: $carouselPagelink;
4661
4628
  }
4662
4629
  }
4663
4630
  }
@@ -4823,7 +4790,7 @@ body {
4823
4790
 
4824
4791
  .ui-galleria {
4825
4792
  .ui-galleria-nav-prev {
4826
- color: $galleria-nav-text;
4793
+ color: $galleriaNavText;
4827
4794
  font-size: 15px;
4828
4795
  position: absolute;
4829
4796
  transition: all 0.3s;
@@ -4834,7 +4801,7 @@ body {
4834
4801
  }
4835
4802
 
4836
4803
  .ui-galleria-nav-next {
4837
- color: $galleria-nav-text;
4804
+ color: $galleriaNavText;
4838
4805
  font-size: 15px;
4839
4806
  position: absolute;
4840
4807
  transition: all 0.3s;
@@ -4944,7 +4911,7 @@ body {
4944
4911
  }
4945
4912
 
4946
4913
  .m-subheader .m-subheader__title.m-subheader__title--separator {
4947
- border-right: 1px solid $prime-separator;
4914
+ border-right: 1px solid $primeSeprator;
4948
4915
  }
4949
4916
 
4950
4917
  .m-subheader .m-subheader__title {
@@ -5023,7 +4990,7 @@ body {
5023
4990
  padding-bottom: 30px;
5024
4991
 
5025
4992
  .primeng-datatable-container table thead tr th {
5026
- background-color: $tabs-sub-bg !important;
4993
+ background-color: $form-control-color !important;
5027
4994
  padding: 3px 10px;
5028
4995
  }
5029
4996
  }
@@ -5036,7 +5003,7 @@ body {
5036
5003
 
5037
5004
  .skills-modal {
5038
5005
  .ui-autocomplete-multiple {
5039
- border: 1px solid $ui-input-text;
5006
+ border: 1px solid $uiinputText;
5040
5007
  }
5041
5008
  }
5042
5009