@posiwise/core-styles 0.0.40 → 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 -870
  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 -204
  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
  }
@@ -2265,11 +2241,11 @@ body {
2265
2241
  color: $font-color-main;
2266
2242
 
2267
2243
  .ui-tabview-left-icon {
2268
- color: $carousel-page-link;
2244
+ color: $carouselPagelink;
2269
2245
  }
2270
2246
 
2271
2247
  .ui-tabview-right-icon {
2272
- color: $carousel-page-link;
2248
+ color: $carouselPagelink;
2273
2249
  }
2274
2250
  }
2275
2251
 
@@ -2372,11 +2348,11 @@ body {
2372
2348
  color: $font-color-main;
2373
2349
 
2374
2350
  .ui-tabview-left-icon {
2375
- color: $carousel-page-link;
2351
+ color: $carouselPagelink;
2376
2352
  }
2377
2353
 
2378
2354
  .ui-tabview-right-icon {
2379
- color: $carousel-page-link;
2355
+ color: $carouselPagelink;
2380
2356
  }
2381
2357
  }
2382
2358
 
@@ -2479,11 +2455,11 @@ body {
2479
2455
  color: $font-color-main;
2480
2456
 
2481
2457
  .ui-tabview-left-icon {
2482
- color: $carousel-page-link;
2458
+ color: $carouselPagelink;
2483
2459
  }
2484
2460
 
2485
2461
  .ui-tabview-right-icon {
2486
- color: $carousel-page-link;
2462
+ color: $carouselPagelink;
2487
2463
  }
2488
2464
  }
2489
2465
 
@@ -2586,11 +2562,11 @@ body {
2586
2562
  color: $font-color-main;
2587
2563
 
2588
2564
  .ui-tabview-left-icon {
2589
- color: $carousel-page-link;
2565
+ color: $carouselPagelink;
2590
2566
  }
2591
2567
 
2592
2568
  .ui-tabview-right-icon {
2593
- color: $carousel-page-link;
2569
+ color: $carouselPagelink;
2594
2570
  }
2595
2571
  }
2596
2572
 
@@ -2679,7 +2655,7 @@ body {
2679
2655
 
2680
2656
  .p-paginator-first {
2681
2657
  border: 0 0;
2682
- color: $galleria-nav-text;
2658
+ color: $galleriaNavText;
2683
2659
  height: 2.308em;
2684
2660
  line-height: 2.308em;
2685
2661
  margin: 0;
@@ -2704,7 +2680,7 @@ body {
2704
2680
 
2705
2681
  .p-paginator-prev {
2706
2682
  border: 0 0;
2707
- color: $galleria-nav-text;
2683
+ color: $galleriaNavText;
2708
2684
  height: 2.308em;
2709
2685
  line-height: 2.308em;
2710
2686
  margin: 0;
@@ -2728,7 +2704,7 @@ body {
2728
2704
 
2729
2705
  .p-paginator-next {
2730
2706
  border: 0 0;
2731
- color: $galleria-nav-text;
2707
+ color: $galleriaNavText;
2732
2708
  height: 2.308em;
2733
2709
  line-height: 2.308em;
2734
2710
  margin: 0;
@@ -2753,7 +2729,7 @@ body {
2753
2729
 
2754
2730
  .p-paginator-last {
2755
2731
  border: 0 0;
2756
- color: $galleria-nav-text;
2732
+ color: $galleriaNavText;
2757
2733
  height: 2.308em;
2758
2734
  line-height: 2.308em;
2759
2735
  margin: 0;
@@ -2783,7 +2759,7 @@ body {
2783
2759
 
2784
2760
  .p-paginator-page {
2785
2761
  border: 0 0;
2786
- color: $galleria-nav-text;
2762
+ color: $galleriaNavText;
2787
2763
  height: 2.308em;
2788
2764
  line-height: 2.308em;
2789
2765
  margin: 0;
@@ -2934,7 +2910,7 @@ body {
2934
2910
  &:not(.p-highlight) {
2935
2911
  &:not(.ui-contextmenu-selected) {
2936
2912
  &:hover {
2937
- background-color: $satet-hover;
2913
+ background-color: $satetHover;
2938
2914
  color: $font-color-main;
2939
2915
  cursor: pointer;
2940
2916
  }
@@ -3279,7 +3255,7 @@ body {
3279
3255
  padding: 0;
3280
3256
 
3281
3257
  .ui-tree-toggler {
3282
- color: $galleria-nav-text;
3258
+ color: $galleriaNavText;
3283
3259
  display: inline-block;
3284
3260
  float: none;
3285
3261
  font-size: 15px;
@@ -3288,7 +3264,7 @@ body {
3288
3264
  }
3289
3265
 
3290
3266
  .ui-treenode-icon {
3291
- color: $galleria-nav-text;
3267
+ color: $galleriaNavText;
3292
3268
  display: inline-block;
3293
3269
  font-size: 15px;
3294
3270
  margin: 0 0.143em 0 0;
@@ -3429,7 +3405,7 @@ body {
3429
3405
 
3430
3406
  .ui-node-toggler {
3431
3407
  bottom: -0.7em;
3432
- color: $galleria-nav-text;
3408
+ color: $galleriaNavText;
3433
3409
  margin-left: -0.46em;
3434
3410
  }
3435
3411
  }
@@ -3480,7 +3456,7 @@ body {
3480
3456
 
3481
3457
  &:not(.ui-state-disabled) {
3482
3458
  &:hover {
3483
- color: $carousel-page-link;
3459
+ color: $carouselPagelink;
3484
3460
  }
3485
3461
  }
3486
3462
  }
@@ -3494,7 +3470,7 @@ body {
3494
3470
  transition: color 0.3s;
3495
3471
 
3496
3472
  &:hover {
3497
- color: $carousel-page-link;
3473
+ color: $carouselPagelink;
3498
3474
  }
3499
3475
  }
3500
3476
 
@@ -3554,7 +3530,7 @@ body {
3554
3530
  padding: 0.3em 1em;
3555
3531
 
3556
3532
  .ui-treetable-toggler {
3557
- color: $galleria-nav-text;
3533
+ color: $galleriaNavText;
3558
3534
  font-size: 15px;
3559
3535
  line-height: 1.5;
3560
3536
  vertical-align: middle;
@@ -3619,7 +3595,7 @@ body {
3619
3595
 
3620
3596
  &:not(.ui-state-highlight) {
3621
3597
  &:hover {
3622
- background-color: $satet-hover;
3598
+ background-color: $satetHover;
3623
3599
  color: $font-color-main;
3624
3600
 
3625
3601
  a {
@@ -3657,7 +3633,7 @@ body {
3657
3633
  &:not(.ui-state-highlight) {
3658
3634
  &:not(.ui-contextmenu-selected) {
3659
3635
  &:hover {
3660
- background-color: $satet-hover;
3636
+ background-color: $satetHover;
3661
3637
  color: $font-color-main;
3662
3638
  cursor: pointer;
3663
3639
  }
@@ -3697,22 +3673,22 @@ body {
3697
3673
  }
3698
3674
 
3699
3675
  .ui-messages.ui-messages-success {
3700
- background-color: $toast-msg-success-bg;
3676
+ background-color: $toastmsgScessbg;
3701
3677
  border: 0 0;
3702
- color: $toast-msg-success;
3678
+ color: $toastmsgSuccess;
3703
3679
 
3704
3680
  .ui-messages-icon {
3705
- color: $toast-msg-success;
3681
+ color: $toastmsgSuccess;
3706
3682
  }
3707
3683
 
3708
3684
  .ui-messages-close {
3709
- color: $toast-msg-success;
3685
+ color: $toastmsgSuccess;
3710
3686
  }
3711
3687
  }
3712
3688
 
3713
3689
  .ui-messages.ui-messages-warn {
3714
- background-color: $toast-msg-warning;
3715
- border: 1px solid $toast-msg-Warn-bdr;
3690
+ background-color: $toastmsgWarning;
3691
+ border: 1px solid $toastmsgWarnbdr;
3716
3692
  color: $toastIconClose;
3717
3693
 
3718
3694
  .ui-messages-icon {
@@ -3725,8 +3701,8 @@ body {
3725
3701
  }
3726
3702
 
3727
3703
  .ui-messages.ui-messages-error {
3728
- background-color: $growl-error-msg;
3729
- border: 1px solid $growl-error-msg-bdr;
3704
+ background-color: $growlerrorMsg;
3705
+ border: 1px solid $growlerrorMsgbdr;
3730
3706
  color: $growlColor;
3731
3707
 
3732
3708
  .ui-messages-icon {
@@ -3745,21 +3721,21 @@ body {
3745
3721
  }
3746
3722
 
3747
3723
  .ui-message.ui-message-warn {
3748
- background-color: $toast-msg-warning;
3749
- border: 1px solid $toast-msg-Warn-bdr;
3724
+ background-color: $toastmsgWarning;
3725
+ border: 1px solid $toastmsgWarnbdr;
3750
3726
  color: $toastIconClose;
3751
3727
  }
3752
3728
 
3753
3729
  .ui-message.ui-message-error {
3754
- background-color: $growl-error-msg;
3755
- border: 1px solid $growl-error-msg-bdr;
3730
+ background-color: $growlerrorMsg;
3731
+ border: 1px solid $growlerrorMsgbdr;
3756
3732
  color: $growlColor;
3757
3733
  }
3758
3734
 
3759
3735
  .ui-message.ui-message-success {
3760
- background-color: $toast-msg-success-bg;
3736
+ background-color: $toastmsgScessbg;
3761
3737
  border: 0 0;
3762
- color: $toast-msg-success;
3738
+ color: $toastmsgSuccess;
3763
3739
  }
3764
3740
 
3765
3741
  .ui-message {
@@ -3803,18 +3779,18 @@ body {
3803
3779
  }
3804
3780
 
3805
3781
  .ui-growl-item-container.ui-growl-message-success {
3806
- background-color: $toast-msg-success-bg;
3782
+ background-color: $toastmsgScessbg;
3807
3783
  border: 0 0;
3808
- color: $toast-msg-success;
3784
+ color: $toastmsgSuccess;
3809
3785
 
3810
3786
  .ui-growl-image {
3811
- color: $toast-msg-success;
3787
+ color: $toastmsgSuccess;
3812
3788
  }
3813
3789
  }
3814
3790
 
3815
3791
  .ui-growl-item-container.ui-growl-message-warn {
3816
- background-color: $toast-msg-warning;
3817
- border: 1px solid $toast-msg-Warn-bdr;
3792
+ background-color: $toastmsgWarning;
3793
+ border: 1px solid $toastmsgWarnbdr;
3818
3794
  color: $toastIconClose;
3819
3795
 
3820
3796
  .ui-growl-image {
@@ -3823,8 +3799,8 @@ body {
3823
3799
  }
3824
3800
 
3825
3801
  .ui-growl-item-container.ui-growl-message-error {
3826
- background-color: $growl-error-msg;
3827
- border: 1px solid $growl-error-msg-bdr;
3802
+ background-color: $growlerrorMsg;
3803
+ border: 1px solid $growlerrorMsgbdr;
3828
3804
  color: $growlColor;
3829
3805
 
3830
3806
  .ui-growl-image {
@@ -3853,22 +3829,22 @@ body {
3853
3829
  }
3854
3830
 
3855
3831
  .ui-toast-message.ui-toast-message-success {
3856
- background-color: $toast-msg-success-bg;
3832
+ background-color: $toastmsgScessbg;
3857
3833
  border: 0 0;
3858
- color: $toast-msg-success;
3834
+ color: $toastmsgSuccess;
3859
3835
 
3860
3836
  .ui-toast-close-icon {
3861
- color: $toast-msg-success;
3837
+ color: $toastmsgSuccess;
3862
3838
  }
3863
3839
 
3864
3840
  .ui-toast-icon {
3865
- color: $toast-icon-success;
3841
+ color: $toastIconSuccess;
3866
3842
  }
3867
3843
  }
3868
3844
 
3869
3845
  .ui-toast-message.ui-toast-message-warn {
3870
- background-color: $toast-msg-warning;
3871
- border: 1px solid $toast-msg-Warn-bdr;
3846
+ background-color: $toastmsgWarning;
3847
+ border: 1px solid $toastmsgWarnbdr;
3872
3848
  color: $toastIconClose;
3873
3849
 
3874
3850
  .ui-toast-close-icon {
@@ -3881,8 +3857,8 @@ body {
3881
3857
  }
3882
3858
 
3883
3859
  .ui-toast-message.ui-toast-message-error {
3884
- background-color: $growl-error-msg;
3885
- border: 1px solid $growl-error-msg-bdr;
3860
+ background-color: $growlerrorMsg;
3861
+ border: 1px solid $growlerrorMsgbdr;
3886
3862
  color: $growlColor;
3887
3863
 
3888
3864
  .ui-toast-close-icon {
@@ -3953,7 +3929,7 @@ body {
3953
3929
  transition: color 0.3s;
3954
3930
 
3955
3931
  &:hover {
3956
- color: $carousel-page-link;
3932
+ color: $carouselPagelink;
3957
3933
  }
3958
3934
  }
3959
3935
  }
@@ -4062,7 +4038,7 @@ body {
4062
4038
  transition: color 0.3s;
4063
4039
 
4064
4040
  &:hover {
4065
- color: $carousel-page-link;
4041
+ color: $carouselPagelink;
4066
4042
  }
4067
4043
  }
4068
4044
  }
@@ -4125,7 +4101,7 @@ body {
4125
4101
 
4126
4102
  &:first-child {
4127
4103
  a {
4128
- color: $galleria-nav-text;
4104
+ color: $galleriaNavText;
4129
4105
  font-size: 17px;
4130
4106
  margin: 0;
4131
4107
  }
@@ -4133,7 +4109,7 @@ body {
4133
4109
  }
4134
4110
 
4135
4111
  li.ui-breadcrumb-chevron {
4136
- color: $galleria-nav-text;
4112
+ color: $galleriaNavText;
4137
4113
  margin: 0 0.429em;
4138
4114
  }
4139
4115
  }
@@ -4170,7 +4146,7 @@ body {
4170
4146
  }
4171
4147
 
4172
4148
  .ui-steps-title {
4173
- color: $galleria-nav-text;
4149
+ color: $galleriaNavText;
4174
4150
  display: block;
4175
4151
  margin-top: 6px;
4176
4152
  }
@@ -4648,7 +4624,7 @@ body {
4648
4624
  }
4649
4625
 
4650
4626
  .ui-menuitem-icon {
4651
- color: $carousel-page-link;
4627
+ color: $carouselPagelink;
4652
4628
  }
4653
4629
  }
4654
4630
  }
@@ -4814,7 +4790,7 @@ body {
4814
4790
 
4815
4791
  .ui-galleria {
4816
4792
  .ui-galleria-nav-prev {
4817
- color: $galleria-nav-text;
4793
+ color: $galleriaNavText;
4818
4794
  font-size: 15px;
4819
4795
  position: absolute;
4820
4796
  transition: all 0.3s;
@@ -4825,7 +4801,7 @@ body {
4825
4801
  }
4826
4802
 
4827
4803
  .ui-galleria-nav-next {
4828
- color: $galleria-nav-text;
4804
+ color: $galleriaNavText;
4829
4805
  font-size: 15px;
4830
4806
  position: absolute;
4831
4807
  transition: all 0.3s;
@@ -4935,7 +4911,7 @@ body {
4935
4911
  }
4936
4912
 
4937
4913
  .m-subheader .m-subheader__title.m-subheader__title--separator {
4938
- border-right: 1px solid $prime-separator;
4914
+ border-right: 1px solid $primeSeprator;
4939
4915
  }
4940
4916
 
4941
4917
  .m-subheader .m-subheader__title {
@@ -5014,7 +4990,7 @@ body {
5014
4990
  padding-bottom: 30px;
5015
4991
 
5016
4992
  .primeng-datatable-container table thead tr th {
5017
- background-color: $tabs-sub-bg !important;
4993
+ background-color: $form-control-color !important;
5018
4994
  padding: 3px 10px;
5019
4995
  }
5020
4996
  }
@@ -5027,7 +5003,7 @@ body {
5027
5003
 
5028
5004
  .skills-modal {
5029
5005
  .ui-autocomplete-multiple {
5030
- border: 1px solid $ui-input-text;
5006
+ border: 1px solid $uiinputText;
5031
5007
  }
5032
5008
  }
5033
5009