@posiwise/core-styles 0.0.5 → 0.0.7

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 (22) hide show
  1. package/app.scss +1 -1
  2. package/package.json +1 -1
  3. package/scss/_dashboard.scss +1 -1
  4. package/scss/_dynamic-styles.scss +36 -2
  5. package/scss/common/landing-page-a/landing-page-style-1.scss +2 -2
  6. package/scss/common/landing-page-b/banner.scss +5 -5
  7. package/scss/common/landing-page-b/contact-us.scss +1 -1
  8. package/scss/common/landing-page-b/explainer.scss +2 -2
  9. package/scss/common/landing-page-b/landing-page-style-2.scss +1 -1
  10. package/scss/custom-bootstrap/_badge.scss +1 -1
  11. package/scss/dashboard/_bootstrap-social.scss +25 -25
  12. package/scss/dashboard/_helper.scss +17 -7
  13. package/scss/dashboard/_misc.scss +1 -1
  14. package/scss/dashboard/_profile.scss +1 -1
  15. package/scss/dashboard/mixins/_utilities.scss +1 -1
  16. package/scss/dashboard/mixins/_vendor-prefixes.scss +2 -2
  17. package/scss/plugins/perfect-scrollbar/_variables.scss +1 -1
  18. package/scss/shared/_prime-ng.scss +176 -166
  19. package/scss/variables/_app-colors-variables.scss +1 -1
  20. package/scss/variables/_branding-variables.scss +7 -7
  21. package/scss/variables/_generic-variables.scss +5 -5
  22. package/scss/variables/_primeng-variables.scss +38 -38
package/scss/shared/_prime-ng.scss CHANGED
@@ -46,11 +46,13 @@ body {
46
46
  .ui-inputtext {
47
47
  appearance: none;
48
48
  background: rgb(255 255 255);
49
- border: 1px solid $uiinputText;
49
+ border: 1px solid $ui-input-text;
50
50
  color: $font-color-main;
51
51
  font-size: 13px;
52
52
  padding: 0.429em;
53
- transition: border-color 0.3s, box-shadow 0.3s;
53
+ transition:
54
+ border-color 0.3s,
55
+ box-shadow 0.3s;
54
56
 
55
57
  &:enabled {
56
58
  &:hover {
@@ -82,11 +84,13 @@ body {
82
84
 
83
85
  .ui-chkbox-box {
84
86
  background-color: rgb(255 255 255);
85
- border: 1px solid $uiinputText;
87
+ border: 1px solid $ui-input-text;
86
88
  border-radius: 0;
87
89
  height: 20px;
88
90
  text-align: center;
89
- transition: background-color 0.3s, border-color 0.3s;
91
+ transition:
92
+ background-color 0.3s,
93
+ border-color 0.3s;
90
94
  width: 20px;
91
95
 
92
96
  &:not(.ui-state-disabled) {
@@ -142,12 +146,14 @@ body {
142
146
 
143
147
  .ui-radiobutton-box {
144
148
  background-color: rgb(255 255 255);
145
- border: 1px solid $uiinputText;
149
+ border: 1px solid $ui-input-text;
146
150
  border-radius: 50%;
147
151
  height: 20px;
148
152
  position: relative;
149
153
  text-align: center;
150
- transition: background-color 0.3s, border-color 0.3s;
154
+ transition:
155
+ background-color 0.3s,
156
+ border-color 0.3s;
151
157
  width: 20px;
152
158
 
153
159
  &:not(.ui-state-disabled) {
@@ -218,12 +224,12 @@ body {
218
224
 
219
225
  .p-inputswitch-slider {
220
226
  background-color: rgb(255 255 255);
221
- border: 1px solid $uiinputText;
227
+ border: 1px solid $ui-input-text;
222
228
  border-radius: 8px;
223
229
  transition: border-color 0.3s;
224
230
 
225
231
  &::before {
226
- background-color: $inputswitchSlider;
232
+ background-color: $input-switch-slider;
227
233
  border-radius: 50%;
228
234
  bottom: -0.308em;
229
235
  height: 1.538em;
@@ -245,8 +251,8 @@ body {
245
251
 
246
252
  .p-inputswitch.p-inputswitch-checked {
247
253
  .p-inputswitch-slider {
248
- background-color: $inputSwitchSldr;
249
- border-color: $inputSwitchSldr;
254
+ background-color: $input-switch-sldr;
255
+ border-color: $input-switch-sldr;
250
256
 
251
257
  &::before {
252
258
  background-color: $enabledFocus;
@@ -257,8 +263,8 @@ body {
257
263
  &:not(.p-state-disabled) {
258
264
  &:hover {
259
265
  .p-inputswitch-slider {
260
- background-color: $inputSwitchSldr;
261
- border-color: $inputSwitchSldr;
266
+ background-color: $input-switch-sldr;
267
+ border-color: $input-switch-sldr;
262
268
  }
263
269
  }
264
270
  }
@@ -272,8 +278,8 @@ body {
272
278
 
273
279
  .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus {
274
280
  .p-inputswitch-slider {
275
- background: $inputSwitchSldr;
276
- border-color: $inputSwitchSldr;
281
+ background: $input-switch-sldr;
282
+ border-color: $input-switch-sldr;
277
283
  }
278
284
  }
279
285
 
@@ -324,8 +330,8 @@ body {
324
330
  }
325
331
 
326
332
  .p-autocomplete-token {
327
- background-color: $autoCompletebk;
328
- background-image: linear-gradient($autoCompletebk, $tabColor);
333
+ background-color: $auto-complete-bk;
334
+ background-image: linear-gradient($auto-complete-bk, $tabColor);
329
335
  border-color: rgb(0 0 0 / 8%);
330
336
  color: $autoColor;
331
337
  font-size: 13px;
@@ -334,7 +340,7 @@ body {
334
340
  }
335
341
 
336
342
  .p-autocomplete-token-icon {
337
- background: $autoCompleteicon;
343
+ background: $autoCompleteIcon;
338
344
  border-radius: 50%;
339
345
  color: rgb(255 255 255);
340
346
  margin-right: 4px;
@@ -368,7 +374,7 @@ body {
368
374
  }
369
375
 
370
376
  .p-autocomplete-group {
371
- background-color: $autoCompletegrp;
377
+ background-color: $auto-complete-grp;
372
378
  color: $font-color-main;
373
379
  padding: 0.429em 0.857em;
374
380
  }
@@ -505,8 +511,10 @@ body {
505
511
 
506
512
  .ui-dropdown {
507
513
  background: rgb(255 255 255);
508
- border: 1px solid $uiinputText;
509
- transition: border-color 0.3s, box-shadow 0.3s;
514
+ border: 1px solid $ui-input-text;
515
+ transition:
516
+ border-color 0.3s,
517
+ box-shadow 0.3s;
510
518
 
511
519
  &:not(.ui-state-disabled) {
512
520
  &:hover {
@@ -619,8 +627,10 @@ body {
619
627
 
620
628
  .ui-multiselect {
621
629
  background: rgb(255 255 255);
622
- border: 1px solid $uiinputText;
623
- transition: border-color 0.3s, box-shadow 0.3s;
630
+ border: 1px solid $ui-input-text;
631
+ transition:
632
+ border-color 0.3s,
633
+ box-shadow 0.3s;
624
634
 
625
635
  &:not(.ui-state-disabled) {
626
636
  &:hover {
@@ -753,7 +763,7 @@ body {
753
763
 
754
764
  .ui-listbox {
755
765
  background: rgb(255 255 255);
756
- border: 1px solid $uiinputText;
766
+ border: 1px solid $ui-input-text;
757
767
  min-width: 12em;
758
768
  padding: 0;
759
769
 
@@ -831,7 +841,7 @@ body {
831
841
  &:not(.ui-state-disabled) {
832
842
  &:not(.ui-state-active) {
833
843
  &:hover {
834
- border: 1px solid $uiinputText;
844
+ border: 1px solid $ui-input-text;
835
845
  }
836
846
  }
837
847
  }
@@ -860,79 +870,79 @@ body {
860
870
  .ql-snow.ql-toolbar {
861
871
  button {
862
872
  &:hover {
863
- color: $carouselPagelink;
873
+ color: $carousel-page-link;
864
874
 
865
875
  .ql-stroke {
866
- stroke: $carouselPagelink;
876
+ stroke: $carousel-page-link;
867
877
  }
868
878
 
869
879
  .ql-stroke-miter {
870
- stroke: $carouselPagelink;
880
+ stroke: $carousel-page-link;
871
881
  }
872
882
  }
873
883
  }
874
884
 
875
885
  button.ql-active {
876
- color: $carouselPagelink;
886
+ color: $carousel-page-link;
877
887
 
878
888
  .ql-stroke {
879
- stroke: $carouselPagelink;
889
+ stroke: $carousel-page-link;
880
890
  }
881
891
 
882
892
  .ql-stroke-miter {
883
- stroke: $carouselPagelink;
893
+ stroke: $carousel-page-link;
884
894
  }
885
895
  }
886
896
 
887
897
  .ql-picker-label {
888
898
  &:hover {
889
- color: $carouselPagelink;
899
+ color: $carousel-page-link;
890
900
 
891
901
  .ql-stroke {
892
- stroke: $carouselPagelink;
902
+ stroke: $carousel-page-link;
893
903
  }
894
904
 
895
905
  .ql-stroke-miter {
896
- stroke: $carouselPagelink;
906
+ stroke: $carousel-page-link;
897
907
  }
898
908
  }
899
909
  }
900
910
 
901
911
  .ql-picker-label.ql-active {
902
- color: $carouselPagelink;
912
+ color: $carousel-page-link;
903
913
 
904
914
  .ql-stroke {
905
- stroke: $carouselPagelink;
915
+ stroke: $carousel-page-link;
906
916
  }
907
917
 
908
918
  .ql-stroke-miter {
909
- stroke: $carouselPagelink;
919
+ stroke: $carousel-page-link;
910
920
  }
911
921
  }
912
922
 
913
923
  .ql-picker-item {
914
924
  &:hover {
915
- color: $carouselPagelink;
925
+ color: $carousel-page-link;
916
926
 
917
927
  .ql-stroke {
918
- stroke: $carouselPagelink;
928
+ stroke: $carousel-page-link;
919
929
  }
920
930
 
921
931
  .ql-stroke-miter {
922
- stroke: $carouselPagelink;
932
+ stroke: $carousel-page-link;
923
933
  }
924
934
  }
925
935
  }
926
936
 
927
937
  .ql-picker-item.ql-selected {
928
- color: $carouselPagelink;
938
+ color: $carousel-page-link;
929
939
 
930
940
  .ql-stroke {
931
- stroke: $carouselPagelink;
941
+ stroke: $carousel-page-link;
932
942
  }
933
943
 
934
944
  .ql-stroke-miter {
935
- stroke: $carouselPagelink;
945
+ stroke: $carousel-page-link;
936
946
  }
937
947
  }
938
948
  }
@@ -941,79 +951,79 @@ body {
941
951
  .ql-toolbar {
942
952
  button {
943
953
  &:hover {
944
- color: $carouselPagelink;
954
+ color: $carousel-page-link;
945
955
 
946
956
  .ql-stroke {
947
- stroke: $carouselPagelink;
957
+ stroke: $carousel-page-link;
948
958
  }
949
959
 
950
960
  .ql-stroke-miter {
951
- stroke: $carouselPagelink;
961
+ stroke: $carousel-page-link;
952
962
  }
953
963
  }
954
964
  }
955
965
 
956
966
  button.ql-active {
957
- color: $carouselPagelink;
967
+ color: $carousel-page-link;
958
968
 
959
969
  .ql-stroke {
960
- stroke: $carouselPagelink;
970
+ stroke: $carousel-page-link;
961
971
  }
962
972
 
963
973
  .ql-stroke-miter {
964
- stroke: $carouselPagelink;
974
+ stroke: $carousel-page-link;
965
975
  }
966
976
  }
967
977
 
968
978
  .ql-picker-label {
969
979
  &:hover {
970
- color: $carouselPagelink;
980
+ color: $carousel-page-link;
971
981
 
972
982
  .ql-stroke {
973
- stroke: $carouselPagelink;
983
+ stroke: $carousel-page-link;
974
984
  }
975
985
 
976
986
  .ql-stroke-miter {
977
- stroke: $carouselPagelink;
987
+ stroke: $carousel-page-link;
978
988
  }
979
989
  }
980
990
  }
981
991
 
982
992
  .ql-picker-label.ql-active {
983
- color: $carouselPagelink;
993
+ color: $carousel-page-link;
984
994
 
985
995
  .ql-stroke {
986
- stroke: $carouselPagelink;
996
+ stroke: $carousel-page-link;
987
997
  }
988
998
 
989
999
  .ql-stroke-miter {
990
- stroke: $carouselPagelink;
1000
+ stroke: $carousel-page-link;
991
1001
  }
992
1002
  }
993
1003
 
994
1004
  .ql-picker-item {
995
1005
  &:hover {
996
- color: $carouselPagelink;
1006
+ color: $carousel-page-link;
997
1007
 
998
1008
  .ql-stroke {
999
- stroke: $carouselPagelink;
1009
+ stroke: $carousel-page-link;
1000
1010
  }
1001
1011
 
1002
1012
  .ql-stroke-miter {
1003
- stroke: $carouselPagelink;
1013
+ stroke: $carousel-page-link;
1004
1014
  }
1005
1015
  }
1006
1016
  }
1007
1017
 
1008
1018
  .ql-picker-item.ql-selected {
1009
- color: $carouselPagelink;
1019
+ color: $carousel-page-link;
1010
1020
 
1011
1021
  .ql-stroke {
1012
- stroke: $carouselPagelink;
1022
+ stroke: $carousel-page-link;
1013
1023
  }
1014
1024
 
1015
1025
  .ql-stroke-miter {
1016
- stroke: $carouselPagelink;
1026
+ stroke: $carousel-page-link;
1017
1027
  }
1018
1028
  }
1019
1029
  }
@@ -1074,7 +1084,7 @@ body {
1074
1084
  }
1075
1085
 
1076
1086
  .ui-slider {
1077
- background-color: $uiinputText;
1087
+ background-color: $ui-input-text;
1078
1088
  border: 0 0;
1079
1089
 
1080
1090
  .ui-slider-handle {
@@ -1223,7 +1233,7 @@ body {
1223
1233
 
1224
1234
  .ui-timepicker {
1225
1235
  border: 0 0;
1226
- border-top: 1px solid $autoCompletegrp;
1236
+ border-top: 1px solid $auto-complete-grp;
1227
1237
  padding: 0.857em;
1228
1238
 
1229
1239
  a {
@@ -1384,8 +1394,8 @@ body {
1384
1394
 
1385
1395
  .ui-inputgroup {
1386
1396
  .ui-inputgroup-addon {
1387
- background-color: $inputGroundaddon;
1388
- border-color: $uiinputText;
1397
+ background-color: $input-ground-addon;
1398
+ border-color: $ui-input-text;
1389
1399
  color: $font-color-main;
1390
1400
  min-width: 2em;
1391
1401
  padding: 0.429em;
@@ -1630,7 +1640,7 @@ body {
1630
1640
  color: $font-color-main;
1631
1641
 
1632
1642
  .ui-button-icon-left {
1633
- color: $toastmsgSuccess;
1643
+ color: $toast-msg-success;
1634
1644
  }
1635
1645
  }
1636
1646
  }
@@ -1642,7 +1652,7 @@ body {
1642
1652
  outline: 0 none;
1643
1653
 
1644
1654
  .ui-button-icon-left {
1645
- color: $toastmsgSuccess;
1655
+ color: $toast-msg-success;
1646
1656
  }
1647
1657
  }
1648
1658
  }
@@ -1696,7 +1706,7 @@ body {
1696
1706
  color: $font-color-main;
1697
1707
 
1698
1708
  .p-button-icon-left {
1699
- color: $toastmsgSuccess;
1709
+ color: $toast-msg-success;
1700
1710
  }
1701
1711
  }
1702
1712
  }
@@ -1707,7 +1717,7 @@ body {
1707
1717
  outline: 0 none;
1708
1718
 
1709
1719
  .p-button-icon-left {
1710
- color: $toastmsgSuccess;
1720
+ color: $toast-msg-success;
1711
1721
  }
1712
1722
  }
1713
1723
  }
@@ -1782,7 +1792,7 @@ body {
1782
1792
  &:hover {
1783
1793
  background-color: $tabView;
1784
1794
  border-color: $tabView;
1785
- color: $toastmsgSuccess;
1795
+ color: $toast-msg-success;
1786
1796
  }
1787
1797
 
1788
1798
  &:focus {
@@ -1807,7 +1817,7 @@ body {
1807
1817
  &:hover {
1808
1818
  background-color: $tabView;
1809
1819
  border-color: $tabView;
1810
- color: $toastmsgSuccess;
1820
+ color: $toast-msg-success;
1811
1821
  }
1812
1822
 
1813
1823
  &:focus {
@@ -1830,13 +1840,13 @@ body {
1830
1840
 
1831
1841
  &:enabled {
1832
1842
  &:hover {
1833
- background-color: $buttonInfohover;
1834
- border-color: $buttonInfohover;
1843
+ background-color: $button-info-hover;
1844
+ border-color: $button-info-hover;
1835
1845
  color: rgb(255 255 255);
1836
1846
  }
1837
1847
 
1838
1848
  &:focus {
1839
- background-color: $buttonInfofocus;
1849
+ background-color: $button-info-focus;
1840
1850
  }
1841
1851
 
1842
1852
  &:active {
@@ -1855,13 +1865,13 @@ body {
1855
1865
 
1856
1866
  &:enabled {
1857
1867
  &:hover {
1858
- background-color: $buttonInfohover;
1859
- border-color: $buttonInfohover;
1868
+ background-color: $button-info-hover;
1869
+ border-color: $button-info-hover;
1860
1870
  color: rgb(255 255 255);
1861
1871
  }
1862
1872
 
1863
1873
  &:focus {
1864
- background-color: $buttonInfofocus;
1874
+ background-color: $button-info-focus;
1865
1875
  }
1866
1876
 
1867
1877
  &:active {
@@ -1886,12 +1896,12 @@ body {
1886
1896
  }
1887
1897
 
1888
1898
  &:focus {
1889
- background-color: $primeStateButtonfocus;
1899
+ background-color: $prime-state-button-focus;
1890
1900
  }
1891
1901
 
1892
1902
  &:active {
1893
- background-color: $primeStateButtonactive;
1894
- border-color: $primeStateButtonactive;
1903
+ background-color: $prime-state-button-active;
1904
+ border-color: $prime-state-button-active;
1895
1905
  color: rgb(255 255 255);
1896
1906
  }
1897
1907
  }
@@ -1911,12 +1921,12 @@ body {
1911
1921
  }
1912
1922
 
1913
1923
  &:focus {
1914
- background-color: $primeStateButtonfocus;
1924
+ background-color: $prime-state-button-focus;
1915
1925
  }
1916
1926
 
1917
1927
  &:active {
1918
- background-color: $primeStateButtonactive;
1919
- border-color: $primeStateButtonactive;
1928
+ background-color: $prime-state-button-active;
1929
+ border-color: $prime-state-button-active;
1920
1930
  color: rgb(255 255 255);
1921
1931
  }
1922
1932
  }
@@ -1930,18 +1940,18 @@ body {
1930
1940
 
1931
1941
  &:enabled {
1932
1942
  &:hover {
1933
- background-color: $primeStateButtonwarning;
1934
- border-color: $primeStateButtonwarning;
1943
+ background-color: $prime-state-button-warning;
1944
+ border-color: $prime-state-button-warning;
1935
1945
  color: $font-color-main;
1936
1946
  }
1937
1947
 
1938
1948
  &:focus {
1939
- background-color: $primeButtonwarningFocus;
1949
+ background-color: $prime-button-warning-focus;
1940
1950
  }
1941
1951
 
1942
1952
  &:active {
1943
- background-color: $primeButtonwarningactive;
1944
- border-color: $primeButtonwarningactive;
1953
+ background-color: $prime-button-warning-active;
1954
+ border-color: $prime-button-warning-active;
1945
1955
  color: $font-color-main;
1946
1956
  }
1947
1957
  }
@@ -1955,18 +1965,18 @@ body {
1955
1965
 
1956
1966
  &:enabled {
1957
1967
  &:hover {
1958
- background-color: $primeStateButtonwarning;
1959
- border-color: $primeStateButtonwarning;
1968
+ background-color: $prime-state-button-warning;
1969
+ border-color: $prime-state-button-warning;
1960
1970
  color: $font-color-main;
1961
1971
  }
1962
1972
 
1963
1973
  &:focus {
1964
- background-color: $primeButtonwarningFocus;
1974
+ background-color: $prime-button-warning-focus;
1965
1975
  }
1966
1976
 
1967
1977
  &:active {
1968
- background-color: $primeButtonwarningactive;
1969
- border-color: $primeButtonwarningactive;
1978
+ background-color: $prime-button-warning-active;
1979
+ border-color: $prime-button-warning-active;
1970
1980
  color: $font-color-main;
1971
1981
  }
1972
1982
  }
@@ -1974,14 +1984,14 @@ body {
1974
1984
  }
1975
1985
 
1976
1986
  .ui-button.ui-state-default.ui-button-danger {
1977
- background-color: $primeButtonDangeractive;
1978
- border: 1px solid $primeButtonDangeractive;
1987
+ background-color: $prime-button-danger-active;
1988
+ border: 1px solid $prime-button-danger-active;
1979
1989
  color: rgb(255 255 255);
1980
1990
 
1981
1991
  &:enabled {
1982
1992
  &:hover {
1983
- background-color: $primeButtonSethover;
1984
- border-color: $primeButtonSethover;
1993
+ background-color: $prime-button-set-hover;
1994
+ border-color: $prime-button-set-hover;
1985
1995
  color: rgb(255 255 255);
1986
1996
  }
1987
1997
 
@@ -1990,8 +2000,8 @@ body {
1990
2000
  }
1991
2001
 
1992
2002
  &:active {
1993
- background-color: $primeButtonSetactive;
1994
- border-color: $primeButtonSetactive;
2003
+ background-color: $prime-button-set-active;
2004
+ border-color: $prime-button-set-active;
1995
2005
  color: rgb(255 255 255);
1996
2006
  }
1997
2007
  }
@@ -1999,14 +2009,14 @@ body {
1999
2009
 
2000
2010
  .ui-buttonset.ui-button-danger {
2001
2011
  > .ui-button.ui-state-default {
2002
- background-color: $primeButtonDangeractive;
2003
- border: 1px solid $primeButtonDangeractive;
2012
+ background-color: $prime-button-danger-active;
2013
+ border: 1px solid $prime-button-danger-active;
2004
2014
  color: rgb(255 255 255);
2005
2015
 
2006
2016
  &:enabled {
2007
2017
  &:hover {
2008
- background-color: $primeButtonSethover;
2009
- border-color: $primeButtonSethover;
2018
+ background-color: $prime-button-set-hover;
2019
+ border-color: $prime-button-set-hover;
2010
2020
  color: rgb(255 255 255);
2011
2021
  }
2012
2022
 
@@ -2015,8 +2025,8 @@ body {
2015
2025
  }
2016
2026
 
2017
2027
  &:active {
2018
- background-color: $primeButtonSetactive;
2019
- border-color: $primeButtonSetactive;
2028
+ background-color: $prime-button-set-active;
2029
+ border-color: $prime-button-set-active;
2020
2030
  color: rgb(255 255 255);
2021
2031
  }
2022
2032
  }
@@ -2062,7 +2072,7 @@ body {
2062
2072
  transition: color 0.3s;
2063
2073
 
2064
2074
  &:hover {
2065
- color: $carouselPagelink;
2075
+ color: $carousel-page-link;
2066
2076
  }
2067
2077
  }
2068
2078
  }
@@ -2241,11 +2251,11 @@ body {
2241
2251
  color: $font-color-main;
2242
2252
 
2243
2253
  .ui-tabview-left-icon {
2244
- color: $carouselPagelink;
2254
+ color: $carousel-page-link;
2245
2255
  }
2246
2256
 
2247
2257
  .ui-tabview-right-icon {
2248
- color: $carouselPagelink;
2258
+ color: $carousel-page-link;
2249
2259
  }
2250
2260
  }
2251
2261
 
@@ -2348,11 +2358,11 @@ body {
2348
2358
  color: $font-color-main;
2349
2359
 
2350
2360
  .ui-tabview-left-icon {
2351
- color: $carouselPagelink;
2361
+ color: $carousel-page-link;
2352
2362
  }
2353
2363
 
2354
2364
  .ui-tabview-right-icon {
2355
- color: $carouselPagelink;
2365
+ color: $carousel-page-link;
2356
2366
  }
2357
2367
  }
2358
2368
 
@@ -2455,11 +2465,11 @@ body {
2455
2465
  color: $font-color-main;
2456
2466
 
2457
2467
  .ui-tabview-left-icon {
2458
- color: $carouselPagelink;
2468
+ color: $carousel-page-link;
2459
2469
  }
2460
2470
 
2461
2471
  .ui-tabview-right-icon {
2462
- color: $carouselPagelink;
2472
+ color: $carousel-page-link;
2463
2473
  }
2464
2474
  }
2465
2475
 
@@ -2562,11 +2572,11 @@ body {
2562
2572
  color: $font-color-main;
2563
2573
 
2564
2574
  .ui-tabview-left-icon {
2565
- color: $carouselPagelink;
2575
+ color: $carousel-page-link;
2566
2576
  }
2567
2577
 
2568
2578
  .ui-tabview-right-icon {
2569
- color: $carouselPagelink;
2579
+ color: $carousel-page-link;
2570
2580
  }
2571
2581
  }
2572
2582
 
@@ -2655,7 +2665,7 @@ body {
2655
2665
 
2656
2666
  .p-paginator-first {
2657
2667
  border: 0 0;
2658
- color: $galleriaNavText;
2668
+ color: $galleria-nav-text;
2659
2669
  height: 2.308em;
2660
2670
  line-height: 2.308em;
2661
2671
  margin: 0;
@@ -2680,7 +2690,7 @@ body {
2680
2690
 
2681
2691
  .p-paginator-prev {
2682
2692
  border: 0 0;
2683
- color: $galleriaNavText;
2693
+ color: $galleria-nav-text;
2684
2694
  height: 2.308em;
2685
2695
  line-height: 2.308em;
2686
2696
  margin: 0;
@@ -2704,7 +2714,7 @@ body {
2704
2714
 
2705
2715
  .p-paginator-next {
2706
2716
  border: 0 0;
2707
- color: $galleriaNavText;
2717
+ color: $galleria-nav-text;
2708
2718
  height: 2.308em;
2709
2719
  line-height: 2.308em;
2710
2720
  margin: 0;
@@ -2729,7 +2739,7 @@ body {
2729
2739
 
2730
2740
  .p-paginator-last {
2731
2741
  border: 0 0;
2732
- color: $galleriaNavText;
2742
+ color: $galleria-nav-text;
2733
2743
  height: 2.308em;
2734
2744
  line-height: 2.308em;
2735
2745
  margin: 0;
@@ -2759,7 +2769,7 @@ body {
2759
2769
 
2760
2770
  .p-paginator-page {
2761
2771
  border: 0 0;
2762
- color: $galleriaNavText;
2772
+ color: $galleria-nav-text;
2763
2773
  height: 2.308em;
2764
2774
  line-height: 2.308em;
2765
2775
  margin: 0;
@@ -2910,7 +2920,7 @@ body {
2910
2920
  &:not(.p-highlight) {
2911
2921
  &:not(.ui-contextmenu-selected) {
2912
2922
  &:hover {
2913
- background-color: $satetHover;
2923
+ background-color: $satet-hover;
2914
2924
  color: $font-color-main;
2915
2925
  cursor: pointer;
2916
2926
  }
@@ -3255,7 +3265,7 @@ body {
3255
3265
  padding: 0;
3256
3266
 
3257
3267
  .ui-tree-toggler {
3258
- color: $galleriaNavText;
3268
+ color: $galleria-nav-text;
3259
3269
  display: inline-block;
3260
3270
  float: none;
3261
3271
  font-size: 15px;
@@ -3264,7 +3274,7 @@ body {
3264
3274
  }
3265
3275
 
3266
3276
  .ui-treenode-icon {
3267
- color: $galleriaNavText;
3277
+ color: $galleria-nav-text;
3268
3278
  display: inline-block;
3269
3279
  font-size: 15px;
3270
3280
  margin: 0 0.143em 0 0;
@@ -3405,7 +3415,7 @@ body {
3405
3415
 
3406
3416
  .ui-node-toggler {
3407
3417
  bottom: -0.7em;
3408
- color: $galleriaNavText;
3418
+ color: $galleria-nav-text;
3409
3419
  margin-left: -0.46em;
3410
3420
  }
3411
3421
  }
@@ -3456,7 +3466,7 @@ body {
3456
3466
 
3457
3467
  &:not(.ui-state-disabled) {
3458
3468
  &:hover {
3459
- color: $carouselPagelink;
3469
+ color: $carousel-page-link;
3460
3470
  }
3461
3471
  }
3462
3472
  }
@@ -3470,7 +3480,7 @@ body {
3470
3480
  transition: color 0.3s;
3471
3481
 
3472
3482
  &:hover {
3473
- color: $carouselPagelink;
3483
+ color: $carousel-page-link;
3474
3484
  }
3475
3485
  }
3476
3486
 
@@ -3530,7 +3540,7 @@ body {
3530
3540
  padding: 0.3em 1em;
3531
3541
 
3532
3542
  .ui-treetable-toggler {
3533
- color: $galleriaNavText;
3543
+ color: $galleria-nav-text;
3534
3544
  font-size: 15px;
3535
3545
  line-height: 1.5;
3536
3546
  vertical-align: middle;
@@ -3595,7 +3605,7 @@ body {
3595
3605
 
3596
3606
  &:not(.ui-state-highlight) {
3597
3607
  &:hover {
3598
- background-color: $satetHover;
3608
+ background-color: $satet-hover;
3599
3609
  color: $font-color-main;
3600
3610
 
3601
3611
  a {
@@ -3633,7 +3643,7 @@ body {
3633
3643
  &:not(.ui-state-highlight) {
3634
3644
  &:not(.ui-contextmenu-selected) {
3635
3645
  &:hover {
3636
- background-color: $satetHover;
3646
+ background-color: $satet-hover;
3637
3647
  color: $font-color-main;
3638
3648
  cursor: pointer;
3639
3649
  }
@@ -3673,22 +3683,22 @@ body {
3673
3683
  }
3674
3684
 
3675
3685
  .ui-messages.ui-messages-success {
3676
- background-color: $toastmsgScessbg;
3686
+ background-color: $toast-msg-success-bg;
3677
3687
  border: 0 0;
3678
- color: $toastmsgSuccess;
3688
+ color: $toast-msg-success;
3679
3689
 
3680
3690
  .ui-messages-icon {
3681
- color: $toastmsgSuccess;
3691
+ color: $toast-msg-success;
3682
3692
  }
3683
3693
 
3684
3694
  .ui-messages-close {
3685
- color: $toastmsgSuccess;
3695
+ color: $toast-msg-success;
3686
3696
  }
3687
3697
  }
3688
3698
 
3689
3699
  .ui-messages.ui-messages-warn {
3690
- background-color: $toastmsgWarning;
3691
- border: 1px solid $toastmsgWarnbdr;
3700
+ background-color: $toast-msg-warning;
3701
+ border: 1px solid $toast-msg-Warn-bdr;
3692
3702
  color: $toastIconClose;
3693
3703
 
3694
3704
  .ui-messages-icon {
@@ -3701,8 +3711,8 @@ body {
3701
3711
  }
3702
3712
 
3703
3713
  .ui-messages.ui-messages-error {
3704
- background-color: $growlerrorMsg;
3705
- border: 1px solid $growlerrorMsgbdr;
3714
+ background-color: $growl-error-msg;
3715
+ border: 1px solid $growl-error-msg-bdr;
3706
3716
  color: $growlColor;
3707
3717
 
3708
3718
  .ui-messages-icon {
@@ -3721,21 +3731,21 @@ body {
3721
3731
  }
3722
3732
 
3723
3733
  .ui-message.ui-message-warn {
3724
- background-color: $toastmsgWarning;
3725
- border: 1px solid $toastmsgWarnbdr;
3734
+ background-color: $toast-msg-warning;
3735
+ border: 1px solid $toast-msg-Warn-bdr;
3726
3736
  color: $toastIconClose;
3727
3737
  }
3728
3738
 
3729
3739
  .ui-message.ui-message-error {
3730
- background-color: $growlerrorMsg;
3731
- border: 1px solid $growlerrorMsgbdr;
3740
+ background-color: $growl-error-msg;
3741
+ border: 1px solid $growl-error-msg-bdr;
3732
3742
  color: $growlColor;
3733
3743
  }
3734
3744
 
3735
3745
  .ui-message.ui-message-success {
3736
- background-color: $toastmsgScessbg;
3746
+ background-color: $toast-msg-success-bg;
3737
3747
  border: 0 0;
3738
- color: $toastmsgSuccess;
3748
+ color: $toast-msg-success;
3739
3749
  }
3740
3750
 
3741
3751
  .ui-message {
@@ -3779,18 +3789,18 @@ body {
3779
3789
  }
3780
3790
 
3781
3791
  .ui-growl-item-container.ui-growl-message-success {
3782
- background-color: $toastmsgScessbg;
3792
+ background-color: $toast-msg-success-bg;
3783
3793
  border: 0 0;
3784
- color: $toastmsgSuccess;
3794
+ color: $toast-msg-success;
3785
3795
 
3786
3796
  .ui-growl-image {
3787
- color: $toastmsgSuccess;
3797
+ color: $toast-msg-success;
3788
3798
  }
3789
3799
  }
3790
3800
 
3791
3801
  .ui-growl-item-container.ui-growl-message-warn {
3792
- background-color: $toastmsgWarning;
3793
- border: 1px solid $toastmsgWarnbdr;
3802
+ background-color: $toast-msg-warning;
3803
+ border: 1px solid $toast-msg-Warn-bdr;
3794
3804
  color: $toastIconClose;
3795
3805
 
3796
3806
  .ui-growl-image {
@@ -3799,8 +3809,8 @@ body {
3799
3809
  }
3800
3810
 
3801
3811
  .ui-growl-item-container.ui-growl-message-error {
3802
- background-color: $growlerrorMsg;
3803
- border: 1px solid $growlerrorMsgbdr;
3812
+ background-color: $growl-error-msg;
3813
+ border: 1px solid $growl-error-msg-bdr;
3804
3814
  color: $growlColor;
3805
3815
 
3806
3816
  .ui-growl-image {
@@ -3829,22 +3839,22 @@ body {
3829
3839
  }
3830
3840
 
3831
3841
  .ui-toast-message.ui-toast-message-success {
3832
- background-color: $toastmsgScessbg;
3842
+ background-color: $toast-msg-success-bg;
3833
3843
  border: 0 0;
3834
- color: $toastmsgSuccess;
3844
+ color: $toast-msg-success;
3835
3845
 
3836
3846
  .ui-toast-close-icon {
3837
- color: $toastmsgSuccess;
3847
+ color: $toast-msg-success;
3838
3848
  }
3839
3849
 
3840
3850
  .ui-toast-icon {
3841
- color: $toastIconSuccess;
3851
+ color: $toast-icon-success;
3842
3852
  }
3843
3853
  }
3844
3854
 
3845
3855
  .ui-toast-message.ui-toast-message-warn {
3846
- background-color: $toastmsgWarning;
3847
- border: 1px solid $toastmsgWarnbdr;
3856
+ background-color: $toast-msg-warning;
3857
+ border: 1px solid $toast-msg-Warn-bdr;
3848
3858
  color: $toastIconClose;
3849
3859
 
3850
3860
  .ui-toast-close-icon {
@@ -3857,8 +3867,8 @@ body {
3857
3867
  }
3858
3868
 
3859
3869
  .ui-toast-message.ui-toast-message-error {
3860
- background-color: $growlerrorMsg;
3861
- border: 1px solid $growlerrorMsgbdr;
3870
+ background-color: $growl-error-msg;
3871
+ border: 1px solid $growl-error-msg-bdr;
3862
3872
  color: $growlColor;
3863
3873
 
3864
3874
  .ui-toast-close-icon {
@@ -3929,7 +3939,7 @@ body {
3929
3939
  transition: color 0.3s;
3930
3940
 
3931
3941
  &:hover {
3932
- color: $carouselPagelink;
3942
+ color: $carousel-page-link;
3933
3943
  }
3934
3944
  }
3935
3945
  }
@@ -4038,7 +4048,7 @@ body {
4038
4048
  transition: color 0.3s;
4039
4049
 
4040
4050
  &:hover {
4041
- color: $carouselPagelink;
4051
+ color: $carousel-page-link;
4042
4052
  }
4043
4053
  }
4044
4054
  }
@@ -4101,7 +4111,7 @@ body {
4101
4111
 
4102
4112
  &:first-child {
4103
4113
  a {
4104
- color: $galleriaNavText;
4114
+ color: $galleria-nav-text;
4105
4115
  font-size: 17px;
4106
4116
  margin: 0;
4107
4117
  }
@@ -4109,7 +4119,7 @@ body {
4109
4119
  }
4110
4120
 
4111
4121
  li.ui-breadcrumb-chevron {
4112
- color: $galleriaNavText;
4122
+ color: $galleria-nav-text;
4113
4123
  margin: 0 0.429em;
4114
4124
  }
4115
4125
  }
@@ -4146,7 +4156,7 @@ body {
4146
4156
  }
4147
4157
 
4148
4158
  .ui-steps-title {
4149
- color: $galleriaNavText;
4159
+ color: $galleria-nav-text;
4150
4160
  display: block;
4151
4161
  margin-top: 6px;
4152
4162
  }
@@ -4624,7 +4634,7 @@ body {
4624
4634
  }
4625
4635
 
4626
4636
  .ui-menuitem-icon {
4627
- color: $carouselPagelink;
4637
+ color: $carousel-page-link;
4628
4638
  }
4629
4639
  }
4630
4640
  }
@@ -4790,7 +4800,7 @@ body {
4790
4800
 
4791
4801
  .ui-galleria {
4792
4802
  .ui-galleria-nav-prev {
4793
- color: $galleriaNavText;
4803
+ color: $galleria-nav-text;
4794
4804
  font-size: 15px;
4795
4805
  position: absolute;
4796
4806
  transition: all 0.3s;
@@ -4801,7 +4811,7 @@ body {
4801
4811
  }
4802
4812
 
4803
4813
  .ui-galleria-nav-next {
4804
- color: $galleriaNavText;
4814
+ color: $galleria-nav-text;
4805
4815
  font-size: 15px;
4806
4816
  position: absolute;
4807
4817
  transition: all 0.3s;
@@ -4911,7 +4921,7 @@ body {
4911
4921
  }
4912
4922
 
4913
4923
  .m-subheader .m-subheader__title.m-subheader__title--separator {
4914
- border-right: 1px solid $primeSeprator;
4924
+ border-right: 1px solid $prime-separator;
4915
4925
  }
4916
4926
 
4917
4927
  .m-subheader .m-subheader__title {
@@ -5003,7 +5013,7 @@ body {
5003
5013
 
5004
5014
  .skills-modal {
5005
5015
  .ui-autocomplete-multiple {
5006
- border: 1px solid $uiinputText;
5016
+ border: 1px solid $ui-input-text;
5007
5017
  }
5008
5018
  }
5009
5019