@sc-360-v2/storefront-cms-library 0.3.37 → 0.3.39

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 (42) hide show
  1. package/dist/add-order.scss +234 -24
  2. package/dist/add-products-tab.scss +388 -0
  3. package/dist/allocationDetails copy.scss +757 -0
  4. package/dist/allocationDetails.scss +405 -35
  5. package/dist/badge.scss +84 -82
  6. package/dist/builder.js +1 -1
  7. package/dist/bulk-order-pad.scss +29 -32
  8. package/dist/cart-details.scss +54 -57
  9. package/dist/cart-products-sidebar.scss +113 -83
  10. package/dist/cart-summary.scss +2 -2
  11. package/dist/cartAttributes.scss +180 -182
  12. package/dist/cartDropdownOverlay.scss +49 -27
  13. package/dist/checkout.scss +127 -38
  14. package/dist/customization-tree.scss +42 -10
  15. package/dist/dropdownTemplate.scss +36 -26
  16. package/dist/employee-bulk-order.scss +101 -5
  17. package/dist/empty-states.scss +66 -66
  18. package/dist/functions.scss +7 -5
  19. package/dist/icons.js +1 -1
  20. package/dist/index.js +1 -1
  21. package/dist/item-stock.scss +27 -28
  22. package/dist/loader.scss +0 -55
  23. package/dist/menu-v2.scss +2 -2
  24. package/dist/modal.scss +104 -75
  25. package/dist/overflow-module.scss +21 -22
  26. package/dist/past-orders.scss +272 -258
  27. package/dist/payment-methods.scss +70 -71
  28. package/dist/prefix-list.scss +1 -0
  29. package/dist/product-actions.scss +68 -68
  30. package/dist/product-image.scss +4 -8
  31. package/dist/product-sizechart.scss +13 -13
  32. package/dist/quick-links.scss +47 -48
  33. package/dist/quick-order-pad.scss +51 -51
  34. package/dist/quotes.scss +118 -116
  35. package/dist/rfqs.scss +118 -116
  36. package/dist/types/builder/elements/add-products-tab/index.d.ts +46 -0
  37. package/dist/types/builder/enums/index.d.ts +2 -0
  38. package/dist/types/builder/index.d.ts +2 -1
  39. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +418 -0
  40. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  41. package/dist/widget.scss +1 -1
  42. package/package.json +1 -1
@@ -1,8 +1,6 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
- @function ctm-var($base) {
4
- @return unquote("var(--_ctm-mob-#{$base}, var(--_ctm-tab-#{$base}, var(--_ctm-#{$base})))");
5
- }
3
+ @use "./functions.scss" as *;
6
4
  [data-div-type="element"] {
7
5
  &[data-element-type="paymentMethods"] {
8
6
  // width: var(--_lt-wh);
@@ -36,13 +34,13 @@
36
34
  display: flex;
37
35
  flex-direction: column;
38
36
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
39
- background-color: ctm-var(dn-pt-md-wt-bd-cr);
40
- border-width: ctm-var(dn-pt-md-wt-br-wh);
41
- border-color: ctm-var(dn-pt-md-wt-br-cr);
42
- border-style: ctm-var(dn-pt-md-wt-br-se);
43
- border-radius: ctm-var(dn-pt-md-wt-br-rs);
44
- box-shadow: ctm-var(dn-pt-md-wt-sw-ae) ctm-var(dn-pt-md-wt-sw-br) ctm-var(dn-pt-md-wt-sw-sd)
45
- ctm-var(dn-pt-md-wt-sw-cr);
37
+ background-color: prepareMediaVariable(dn-pt-md-wt-bd-cr);
38
+ border-width: prepareMediaVariable(dn-pt-md-wt-br-wh);
39
+ border-color: prepareMediaVariable(dn-pt-md-wt-br-cr);
40
+ border-style: prepareMediaVariable(dn-pt-md-wt-br-se);
41
+ border-radius: prepareMediaVariable(dn-pt-md-wt-br-rs);
42
+ box-shadow: prepareMediaVariable(dn-pt-md-wt-sw-ae) prepareMediaVariable(dn-pt-md-wt-sw-br)
43
+ prepareMediaVariable(dn-pt-md-wt-sw-sd) prepareMediaVariable(dn-pt-md-wt-sw-cr);
46
44
  .title-content {
47
45
  display: flex;
48
46
  flex-direction: column;
@@ -50,28 +48,28 @@
50
48
  font-size: 24px;
51
49
  margin-bottom: 10px;
52
50
  color: #000;
53
- font-family: ctm-var(dn-pt-md-te-ft-fy);
54
- font-size: ctm-var(dn-pt-md-te-ft-se);
55
- color: ctm-var(dn-pt-md-te-cr);
56
- font-weight: ctm-var(dn-pt-md-te-ft-wt);
57
- font-style: ctm-var(dn-pt-md-te-ft-se-ic);
58
- text-decoration: ctm-var(dn-pt-md-te-ue);
59
- text-align: ctm-var(dn-pt-md-te-tt-an);
60
- letter-spacing: ctm-var(dn-pt-md-te-lr-sg);
61
- line-height: ctm-var(dn-pt-md-te-le-ht);
51
+ font-family: prepareMediaVariable(dn-pt-md-te-ft-fy);
52
+ font-size: prepareMediaVariable(dn-pt-md-te-ft-se);
53
+ color: prepareMediaVariable(dn-pt-md-te-cr);
54
+ font-weight: prepareMediaVariable(dn-pt-md-te-ft-wt);
55
+ font-style: prepareMediaVariable(dn-pt-md-te-ft-se-ic);
56
+ text-decoration: prepareMediaVariable(dn-pt-md-te-ue);
57
+ text-align: prepareMediaVariable(dn-pt-md-te-tt-an);
58
+ letter-spacing: prepareMediaVariable(dn-pt-md-te-lr-sg);
59
+ line-height: prepareMediaVariable(dn-pt-md-te-le-ht);
62
60
  }
63
61
  .description {
64
62
  font-size: 16px;
65
63
  color: #000;
66
- font-family: ctm-var(dn-pt-md-dn-ft-fy);
67
- font-size: ctm-var(dn-pt-md-dn-ft-se);
68
- color: ctm-var(dn-pt-md-dn-cr);
69
- font-weight: ctm-var(dn-pt-md-dn-ft-wt);
70
- font-style: ctm-var(dn-pt-md-dn-ft-se-ic);
71
- text-decoration: ctm-var(dn-pt-md-dn-ue);
72
- text-align: ctm-var(dn-pt-md-dn-tt-an);
73
- letter-spacing: ctm-var(dn-pt-md-dn-lr-sg);
74
- line-height: ctm-var(dn-pt-md-dn-le-ht);
64
+ font-family: prepareMediaVariable(dn-pt-md-dn-ft-fy);
65
+ font-size: prepareMediaVariable(dn-pt-md-dn-ft-se);
66
+ color: prepareMediaVariable(dn-pt-md-dn-cr);
67
+ font-weight: prepareMediaVariable(dn-pt-md-dn-ft-wt);
68
+ font-style: prepareMediaVariable(dn-pt-md-dn-ft-se-ic);
69
+ text-decoration: prepareMediaVariable(dn-pt-md-dn-ue);
70
+ text-align: prepareMediaVariable(dn-pt-md-dn-tt-an);
71
+ letter-spacing: prepareMediaVariable(dn-pt-md-dn-lr-sg);
72
+ line-height: prepareMediaVariable(dn-pt-md-dn-le-ht);
75
73
  }
76
74
  }
77
75
  .payment__methods__container {
@@ -83,13 +81,14 @@
83
81
  --_ctm-mob-lt-im-ct-at,
84
82
  var(--_ctm-tab-lt-im-ct-at, var(--_ctm-lt-im-ct-at))
85
83
  );
86
- background-color: ctm-var(dn-pt-md-cr-dn-bd-cr);
87
- border-width: ctm-var(dn-pt-md-cr-dn-br-wh);
88
- border-color: ctm-var(dn-pt-md-cr-dn-br-cr);
89
- border-style: ctm-var(dn-pt-md-cr-dn-br-se);
90
- border-radius: ctm-var(dn-pt-md-cr-dn-br-rs);
91
- box-shadow: ctm-var(dn-pt-md-cr-dn-sw-ae) ctm-var(dn-pt-md-cr-dn-sw-br)
92
- ctm-var(dn-pt-md-cr-dn-sw-sd) ctm-var(dn-pt-md-cr-dn-sw-cr);
84
+ background-color: prepareMediaVariable(dn-pt-md-cr-dn-bd-cr);
85
+ border-width: prepareMediaVariable(dn-pt-md-cr-dn-br-wh);
86
+ border-color: prepareMediaVariable(dn-pt-md-cr-dn-br-cr);
87
+ border-style: prepareMediaVariable(dn-pt-md-cr-dn-br-se);
88
+ border-radius: prepareMediaVariable(dn-pt-md-cr-dn-br-rs);
89
+ box-shadow: prepareMediaVariable(dn-pt-md-cr-dn-sw-ae)
90
+ prepareMediaVariable(dn-pt-md-cr-dn-sw-br) prepareMediaVariable(dn-pt-md-cr-dn-sw-sd)
91
+ prepareMediaVariable(dn-pt-md-cr-dn-sw-cr);
93
92
 
94
93
  .horizontal {
95
94
  display: flex;
@@ -105,15 +104,15 @@
105
104
  }
106
105
  .item {
107
106
  padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
108
- font-family: ctm-var(dn-pt-md-cr-dn-ft-fy);
109
- font-size: ctm-var(dn-pt-md-cr-dn-ft-se);
110
- color: ctm-var(dn-pt-md-cr-dn-cr);
111
- font-weight: ctm-var(dn-pt-md-cr-dn-ft-wt);
112
- font-style: ctm-var(dn-pt-md-cr-dn-ft-se-ic);
113
- text-decoration: ctm-var(dn-pt-md-cr-dn-ue);
114
- text-align: ctm-var(dn-pt-md-cr-dn-tt-an);
115
- letter-spacing: ctm-var(dn-pt-md-cr-dn-lr-sg);
116
- line-height: ctm-var(dn-pt-md-cr-dn-le-ht);
107
+ font-family: prepareMediaVariable(dn-pt-md-cr-dn-ft-fy);
108
+ font-size: prepareMediaVariable(dn-pt-md-cr-dn-ft-se);
109
+ color: prepareMediaVariable(dn-pt-md-cr-dn-cr);
110
+ font-weight: prepareMediaVariable(dn-pt-md-cr-dn-ft-wt);
111
+ font-style: prepareMediaVariable(dn-pt-md-cr-dn-ft-se-ic);
112
+ text-decoration: prepareMediaVariable(dn-pt-md-cr-dn-ue);
113
+ text-align: prepareMediaVariable(dn-pt-md-cr-dn-tt-an);
114
+ letter-spacing: prepareMediaVariable(dn-pt-md-cr-dn-lr-sg);
115
+ line-height: prepareMediaVariable(dn-pt-md-cr-dn-le-ht);
117
116
  img {
118
117
  width: 50px;
119
118
  height: 30px;
@@ -134,15 +133,15 @@
134
133
  }
135
134
  .item {
136
135
  padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
137
- font-family: ctm-var(dn-pt-md-cr-dn-ft-fy);
138
- font-size: ctm-var(dn-pt-md-cr-dn-ft-se);
139
- color: ctm-var(dn-pt-md-cr-dn-cr);
140
- font-weight: ctm-var(dn-pt-md-cr-dn-ft-wt);
141
- font-style: ctm-var(dn-pt-md-cr-dn-ft-se-ic);
142
- text-decoration: ctm-var(dn-pt-md-cr-dn-ue);
143
- text-align: ctm-var(dn-pt-md-cr-dn-tt-an);
144
- letter-spacing: ctm-var(dn-pt-md-cr-dn-lr-sg);
145
- line-height: ctm-var(dn-pt-md-cr-dn-le-ht);
136
+ font-family: prepareMediaVariable(dn-pt-md-cr-dn-ft-fy);
137
+ font-size: prepareMediaVariable(dn-pt-md-cr-dn-ft-se);
138
+ color: prepareMediaVariable(dn-pt-md-cr-dn-cr);
139
+ font-weight: prepareMediaVariable(dn-pt-md-cr-dn-ft-wt);
140
+ font-style: prepareMediaVariable(dn-pt-md-cr-dn-ft-se-ic);
141
+ text-decoration: prepareMediaVariable(dn-pt-md-cr-dn-ue);
142
+ text-align: prepareMediaVariable(dn-pt-md-cr-dn-tt-an);
143
+ letter-spacing: prepareMediaVariable(dn-pt-md-cr-dn-lr-sg);
144
+ line-height: prepareMediaVariable(dn-pt-md-cr-dn-le-ht);
146
145
  img {
147
146
  width: 50px;
148
147
  height: 30px;
@@ -192,15 +191,15 @@
192
191
  var(--_ctm-tab-lt-ct-at, var(--_ctm-lt-ct-at))
193
192
  );
194
193
  border: 0;
195
- font-family: ctm-var(dn-pt-md-cr-dn-ft-fy);
196
- font-size: ctm-var(dn-pt-md-cr-dn-ft-se);
197
- color: ctm-var(dn-pt-md-cr-dn-cr);
198
- font-weight: ctm-var(dn-pt-md-cr-dn-ft-wt);
199
- font-style: ctm-var(dn-pt-md-cr-dn-ft-se-ic);
200
- text-decoration: ctm-var(dn-pt-md-cr-dn-ue);
201
- text-align: ctm-var(dn-pt-md-cr-dn-tt-an);
202
- letter-spacing: ctm-var(dn-pt-md-cr-dn-lr-sg);
203
- line-height: ctm-var(dn-pt-md-cr-dn-le-ht);
194
+ font-family: prepareMediaVariable(dn-pt-md-cr-dn-ft-fy);
195
+ font-size: prepareMediaVariable(dn-pt-md-cr-dn-ft-se);
196
+ color: prepareMediaVariable(dn-pt-md-cr-dn-cr);
197
+ font-weight: prepareMediaVariable(dn-pt-md-cr-dn-ft-wt);
198
+ font-style: prepareMediaVariable(dn-pt-md-cr-dn-ft-se-ic);
199
+ text-decoration: prepareMediaVariable(dn-pt-md-cr-dn-ue);
200
+ text-align: prepareMediaVariable(dn-pt-md-cr-dn-tt-an);
201
+ letter-spacing: prepareMediaVariable(dn-pt-md-cr-dn-lr-sg);
202
+ line-height: prepareMediaVariable(dn-pt-md-cr-dn-le-ht);
204
203
  }
205
204
  }
206
205
  }
@@ -219,15 +218,15 @@
219
218
  --_ctm-mob-lt-ct-at,
220
219
  var(--_ctm-tab-lt-ct-at, var(--_ctm-lt-ct-at))
221
220
  );
222
- font-family: ctm-var(dn-pt-md-cr-dn-ft-fy);
223
- font-size: ctm-var(dn-pt-md-cr-dn-ft-se);
224
- color: ctm-var(dn-pt-md-cr-dn-cr);
225
- font-weight: ctm-var(dn-pt-md-cr-dn-ft-wt);
226
- font-style: ctm-var(dn-pt-md-cr-dn-ft-se-ic);
227
- text-decoration: ctm-var(dn-pt-md-cr-dn-ue);
228
- text-align: ctm-var(dn-pt-md-cr-dn-tt-an);
229
- letter-spacing: ctm-var(dn-pt-md-cr-dn-lr-sg);
230
- line-height: ctm-var(dn-pt-md-cr-dn-le-ht);
221
+ font-family: prepareMediaVariable(dn-pt-md-cr-dn-ft-fy);
222
+ font-size: prepareMediaVariable(dn-pt-md-cr-dn-ft-se);
223
+ color: prepareMediaVariable(dn-pt-md-cr-dn-cr);
224
+ font-weight: prepareMediaVariable(dn-pt-md-cr-dn-ft-wt);
225
+ font-style: prepareMediaVariable(dn-pt-md-cr-dn-ft-se-ic);
226
+ text-decoration: prepareMediaVariable(dn-pt-md-cr-dn-ue);
227
+ text-align: prepareMediaVariable(dn-pt-md-cr-dn-tt-an);
228
+ letter-spacing: prepareMediaVariable(dn-pt-md-cr-dn-lr-sg);
229
+ line-height: prepareMediaVariable(dn-pt-md-cr-dn-le-ht);
231
230
  }
232
231
  }
233
232
  }
@@ -10,6 +10,7 @@ $dataLayerElementType: "data-layer-element-type";
10
10
  $prefixList: (
11
11
  section: sec,
12
12
  grid: gri,
13
+ container: con,
13
14
  stack: sta,
14
15
  repeater: rep,
15
16
  repeater-item: repe,
@@ -1895,74 +1895,74 @@
1895
1895
  }
1896
1896
  }
1897
1897
 
1898
- .dropdown-menu {
1899
- display: block;
1900
- position: absolute;
1901
- top: 110%;
1902
-
1903
- &[data-position="left"] {
1904
- left: 0;
1905
- }
1906
- &[data-position="right"] {
1907
- right: 0;
1908
- }
1909
- &[data-position="center"] {
1910
- left: 50%;
1911
- transform: translateX(-50%);
1912
- }
1913
- // top: 78%;
1914
- // left: 100%;
1915
- // margin-left: 8px;
1916
-
1917
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
1918
- min-width: 200px;
1919
- z-index: 100;
1920
- display: flex;
1921
- flex-direction: column;
1922
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dn-se-pg));
1923
-
1924
- background-color: var(
1925
- --_ctm-mob-dn-dn-se-bd-cr,
1926
- var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
1927
- );
1928
-
1929
- border-color: var(
1930
- --_ctm-mob-dn-dn-se-br-cr,
1931
- var(--_ctm-tab-dn-dn-se-br-cr, var(--_ctm-dn-dn-se-br-cr))
1932
- );
1933
-
1934
- border-style: var(
1935
- --_ctm-mob-dn-dn-se-br-se,
1936
- var(--_ctm-tab-dn-dn-se-br-se, var(--_ctm-dn-dn-se-br-se))
1937
- );
1938
-
1939
- border-width: var(
1940
- --_ctm-mob-dn-dn-se-br-wh,
1941
- var(--_ctm-tab-dn-dn-se-br-wh, var(--_ctm-dn-dn-se-br-wh))
1942
- );
1943
-
1944
- border-radius: var(
1945
- --_ctm-mob-dn-dn-se-br-rs,
1946
- var(--_ctm-tab-dn-dn-se-br-rs, var(--_ctm-dn-dn-se-br-rs))
1947
- );
1948
-
1949
- box-shadow: var(
1950
- --_show-shadow,
1951
- var(--_ctm-mob-dn-dn-se-sw-ae, var(--_ctm-tab-dn-dn-se-sw-ae, var(--_ctm-dn-dn-se-sw-ae)))
1952
- var(
1953
- --_ctm-mob-dn-dn-se-sw-br,
1954
- var(--_ctm-tab-dn-dn-se-sw-br, var(--_ctm-dn-dn-se-sw-br))
1955
- )
1956
- var(
1957
- --_ctm-mob-dn-dn-se-sw-sd,
1958
- var(--_ctm-tab-dn-dn-se-sw-sd, var(--_ctm-dn-dn-se-sw-sd))
1959
- )
1960
- var(
1961
- --_ctm-mob-dn-dn-se-sw-cr,
1962
- var(--_ctm-tab-dn-dn-se-sw-cr, var(--_ctm-dn-dn-se-sw-cr))
1963
- )
1964
- );
1965
- }
1898
+ // .dropdown-menu {
1899
+ // display: block;
1900
+ // position: absolute;
1901
+ // top: 110%;
1902
+
1903
+ // &[data-position="left"] {
1904
+ // left: 0;
1905
+ // }
1906
+ // &[data-position="right"] {
1907
+ // right: 0;
1908
+ // }
1909
+ // &[data-position="center"] {
1910
+ // left: 50%;
1911
+ // transform: translateX(-50%);
1912
+ // }
1913
+ // // top: 78%;
1914
+ // // left: 100%;
1915
+ // // margin-left: 8px;
1916
+
1917
+ // box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
1918
+ // min-width: 200px;
1919
+ // z-index: 100;
1920
+ // display: flex;
1921
+ // flex-direction: column;
1922
+ // padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dn-se-pg));
1923
+
1924
+ // background-color: var(
1925
+ // --_ctm-mob-dn-dn-se-bd-cr,
1926
+ // var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
1927
+ // );
1928
+
1929
+ // border-color: var(
1930
+ // --_ctm-mob-dn-dn-se-br-cr,
1931
+ // var(--_ctm-tab-dn-dn-se-br-cr, var(--_ctm-dn-dn-se-br-cr))
1932
+ // );
1933
+
1934
+ // border-style: var(
1935
+ // --_ctm-mob-dn-dn-se-br-se,
1936
+ // var(--_ctm-tab-dn-dn-se-br-se, var(--_ctm-dn-dn-se-br-se))
1937
+ // );
1938
+
1939
+ // border-width: var(
1940
+ // --_ctm-mob-dn-dn-se-br-wh,
1941
+ // var(--_ctm-tab-dn-dn-se-br-wh, var(--_ctm-dn-dn-se-br-wh))
1942
+ // );
1943
+
1944
+ // border-radius: var(
1945
+ // --_ctm-mob-dn-dn-se-br-rs,
1946
+ // var(--_ctm-tab-dn-dn-se-br-rs, var(--_ctm-dn-dn-se-br-rs))
1947
+ // );
1948
+
1949
+ // box-shadow: var(
1950
+ // --_show-shadow,
1951
+ // var(--_ctm-mob-dn-dn-se-sw-ae, var(--_ctm-tab-dn-dn-se-sw-ae, var(--_ctm-dn-dn-se-sw-ae)))
1952
+ // var(
1953
+ // --_ctm-mob-dn-dn-se-sw-br,
1954
+ // var(--_ctm-tab-dn-dn-se-sw-br, var(--_ctm-dn-dn-se-sw-br))
1955
+ // )
1956
+ // var(
1957
+ // --_ctm-mob-dn-dn-se-sw-sd,
1958
+ // var(--_ctm-tab-dn-dn-se-sw-sd, var(--_ctm-dn-dn-se-sw-sd))
1959
+ // )
1960
+ // var(
1961
+ // --_ctm-mob-dn-dn-se-sw-cr,
1962
+ // var(--_ctm-tab-dn-dn-se-sw-cr, var(--_ctm-dn-dn-se-sw-cr))
1963
+ // )
1964
+ // );
1965
+ // }
1966
1966
  }
1967
1967
  }
1968
1968
  }
@@ -291,8 +291,7 @@
291
291
  var(--_ctm-tab-dn-gy-wt-se-cr, var(--_ctm-dn-gy-wt-se-cr))
292
292
  );
293
293
 
294
- font-family:
295
- var(
294
+ font-family: var(
296
295
  --_ctm-mob-dn-gy-wt-se-ft-fy,
297
296
  var(--_ctm-tab-dn-gy-wt-se-ft-fy, var(--_ctm-dn-gy-wt-se-ft-fy))
298
297
  ),
@@ -340,8 +339,7 @@
340
339
  var(--_ctm-tab-dn-gy-wt-se-cr-dc, var(--_ctm-dn-gy-wt-se-cr-dc))
341
340
  );
342
341
 
343
- font-family:
344
- var(
342
+ font-family: var(
345
343
  --_ctm-mob-dn-gy-wt-se-ft-fy-dc,
346
344
  var(--_ctm-tab-dn-gy-wt-se-ft-fy-dc, var(--_ctm-dn-gy-wt-se-ft-fy-dc))
347
345
  ),
@@ -1104,8 +1102,7 @@
1104
1102
 
1105
1103
  & h3 {
1106
1104
  color: var(--_ctm-mob-dn-im-se-cr, var(--_ctm-tab-dn-im-se-cr, var(--_ctm-dn-im-se-cr)));
1107
- font-family:
1108
- var(
1105
+ font-family: var(
1109
1106
  --_ctm-mob-dn-im-se-ft-fy,
1110
1107
  var(--_ctm-tab-dn-im-se-ft-fy, var(--_ctm-dn-im-se-ft-fy))
1111
1108
  ),
@@ -1145,8 +1142,7 @@
1145
1142
  --_ctm-mob-dn-im-se-cr-dc,
1146
1143
  var(--_ctm-tab-dn-im-se-cr-dc, var(--_ctm-dn-im-se-cr-dc))
1147
1144
  );
1148
- font-family:
1149
- var(
1145
+ font-family: var(
1150
1146
  --_ctm-mob-dn-im-se-ft-fy-dc,
1151
1147
  var(--_ctm-tab-dn-im-se-ft-fy-dc, var(--_ctm-dn-im-se-ft-fy-dc))
1152
1148
  ),
@@ -234,19 +234,19 @@
234
234
  }
235
235
  }
236
236
 
237
- .dropdown-menu {
238
- display: block;
239
- position: absolute;
240
- top: 78%;
241
- left: 100%;
242
- margin-left: 8px;
243
- background: white;
244
- border-radius: 8px;
245
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
246
- min-width: 200px;
247
- z-index: 100;
248
- padding: 8px 0;
249
- }
237
+ // .dropdown-menu {
238
+ // display: block;
239
+ // position: absolute;
240
+ // top: 78%;
241
+ // left: 100%;
242
+ // margin-left: 8px;
243
+ // background: white;
244
+ // border-radius: 8px;
245
+ // box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
246
+ // min-width: 200px;
247
+ // z-index: 100;
248
+ // padding: 8px 0;
249
+ // }
250
250
 
251
251
  .button_options {
252
252
  position: relative;
@@ -1,9 +1,6 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
3
  @use "./functions.scss" as *;
4
- @function ctm-var($base) {
5
- @return unquote("var(--_ctm-mob-#{$base}, var(--_ctm-tab-#{$base}, var(--_ctm-#{$base})))");
6
- }
7
4
 
8
5
  [data-div-type="element"] {
9
6
  &[data-element-type="quickLinks"] {
@@ -102,13 +99,14 @@
102
99
 
103
100
  &[data-widget-border="true"] {
104
101
  .quick__links__container {
105
- background-color: ctm-var(dn-qk-ls-wt-dn-bd-cr);
106
- border-width: ctm-var(dn-qk-ls-wt-dn-br-wh);
107
- border-color: ctm-var(dn-qk-ls-wt-dn-br-cr);
108
- border-style: ctm-var(dn-qk-ls-wt-dn-br-se);
109
- border-radius: ctm-var(dn-qk-ls-wt-dn-br-rs);
110
- box-shadow: ctm-var(dn-qk-ls-wt-dn-sw-ae) ctm-var(dn-qk-ls-wt-dn-sw-br)
111
- ctm-var(dn-qk-ls-wt-dn-sw-sd) ctm-var(dn-qk-ls-wt-dn-sw-cr);
102
+ background-color: prepareMediaVariable(dn-qk-ls-wt-dn-bd-cr);
103
+ border-width: prepareMediaVariable(dn-qk-ls-wt-dn-br-wh);
104
+ border-color: prepareMediaVariable(dn-qk-ls-wt-dn-br-cr);
105
+ border-style: prepareMediaVariable(dn-qk-ls-wt-dn-br-se);
106
+ border-radius: prepareMediaVariable(dn-qk-ls-wt-dn-br-rs);
107
+ box-shadow: prepareMediaVariable(dn-qk-ls-wt-dn-sw-ae)
108
+ prepareMediaVariable(dn-qk-ls-wt-dn-sw-br) prepareMediaVariable(dn-qk-ls-wt-dn-sw-sd)
109
+ prepareMediaVariable(dn-qk-ls-wt-dn-sw-cr);
112
110
  // border-color: var(
113
111
  // --_ctm-mob-dn-qk-ls-wt-dn-br-cr,
114
112
  // var(--_ctm-tab-dn-qk-ls-wt-dn-br-cr, var(--_ctm-dn-qk-ls-wt-dn-br-cr))
@@ -199,11 +197,12 @@
199
197
  // --_ctm-mob-dn-qk-ls-wt-dn-br-rs,
200
198
  // var(--_ctm-tab-dn-qk-ls-wt-dn-br-rs, var(--_ctm-dn-qk-ls-wt-dn-br-rs))
201
199
  // );
202
- background-color: ctm-var(dn-qk-ls-wt-dn-bd-cr);
200
+ background-color: prepareMediaVariable(dn-qk-ls-wt-dn-bd-cr);
203
201
 
204
- border-radius: ctm-var(dn-qk-ls-wt-dn-br-rs);
205
- box-shadow: ctm-var(dn-qk-ls-wt-dn-sw-ae) ctm-var(dn-qk-ls-wt-dn-sw-br)
206
- ctm-var(dn-qk-ls-wt-dn-sw-sd) ctm-var(dn-qk-ls-wt-dn-sw-cr);
202
+ border-radius: prepareMediaVariable(dn-qk-ls-wt-dn-br-rs);
203
+ box-shadow: prepareMediaVariable(dn-qk-ls-wt-dn-sw-ae)
204
+ prepareMediaVariable(dn-qk-ls-wt-dn-sw-br) prepareMediaVariable(dn-qk-ls-wt-dn-sw-sd)
205
+ prepareMediaVariable(dn-qk-ls-wt-dn-sw-cr);
207
206
 
208
207
  .header__container {
209
208
  display: flex;
@@ -250,15 +249,15 @@
250
249
  )
251
250
  );
252
251
  h3 {
253
- font-family: ctm-var(dn-qk-ls-wt-dn-ft-fy);
254
- font-size: ctm-var(dn-qk-ls-wt-dn-ft-se);
255
- color: ctm-var(dn-qk-ls-wt-dn-cr);
256
- font-weight: ctm-var(dn-qk-ls-wt-dn-ft-wt);
257
- font-style: ctm-var(dn-qk-ls-wt-dn-ft-se-ic);
258
- text-decoration: ctm-var(dn-qk-ls-wt-dn-ue);
259
- text-align: ctm-var(dn-qk-ls-wt-dn-tt-an);
260
- letter-spacing: ctm-var(dn-qk-ls-wt-dn-lr-sg);
261
- line-height: ctm-var(dn-qk-ls-wt-dn-le-ht);
252
+ font-family: prepareMediaVariable(dn-qk-ls-wt-dn-ft-fy);
253
+ font-size: prepareMediaVariable(dn-qk-ls-wt-dn-ft-se);
254
+ color: prepareMediaVariable(dn-qk-ls-wt-dn-cr);
255
+ font-weight: prepareMediaVariable(dn-qk-ls-wt-dn-ft-wt);
256
+ font-style: prepareMediaVariable(dn-qk-ls-wt-dn-ft-se-ic);
257
+ text-decoration: prepareMediaVariable(dn-qk-ls-wt-dn-ue);
258
+ text-align: prepareMediaVariable(dn-qk-ls-wt-dn-tt-an);
259
+ letter-spacing: prepareMediaVariable(dn-qk-ls-wt-dn-lr-sg);
260
+ line-height: prepareMediaVariable(dn-qk-ls-wt-dn-le-ht);
262
261
  // color: var(
263
262
  // --_ctm-mob-dn-qk-ls-wt-dn-cr,
264
263
  // var(--_ctm-tab-dn-qk-ls-wt-dn-cr, var(--_ctm-dn-qk-ls-wt-dn-cr))
@@ -301,15 +300,15 @@
301
300
  }
302
301
 
303
302
  p {
304
- font-family: ctm-var(-dn-qk-ls-wt-dn-ft-fy-dc);
305
- font-size: ctm-var(dn-qk-ls-wt-dn-ft-se-dc);
306
- color: ctm-var(dn-qk-ls-wt-dn-cr-dc);
307
- font-weight: ctm-var(dn-qk-ls-wt-dn-ft-wt-dc);
308
- font-style: ctm-var(dn-qk-ls-wt-dn-ft-se-ic-dc);
309
- text-decoration: ctm-var(dn-qk-ls-wt-dn-ue-dc);
310
- text-align: ctm-var(dn-qk-ls-wt-dn-tt-an-dc);
311
- letter-spacing: ctm-var(dn-qk-ls-wt-dn-lr-sg-dc);
312
- line-height: ctm-var(dn-qk-ls-wt-dn-le-ht-dc);
303
+ font-family: prepareMediaVariable(-dn-qk-ls-wt-dn-ft-fy-dc);
304
+ font-size: prepareMediaVariable(dn-qk-ls-wt-dn-ft-se-dc);
305
+ color: prepareMediaVariable(dn-qk-ls-wt-dn-cr-dc);
306
+ font-weight: prepareMediaVariable(dn-qk-ls-wt-dn-ft-wt-dc);
307
+ font-style: prepareMediaVariable(dn-qk-ls-wt-dn-ft-se-ic-dc);
308
+ text-decoration: prepareMediaVariable(dn-qk-ls-wt-dn-ue-dc);
309
+ text-align: prepareMediaVariable(dn-qk-ls-wt-dn-tt-an-dc);
310
+ letter-spacing: prepareMediaVariable(dn-qk-ls-wt-dn-lr-sg-dc);
311
+ line-height: prepareMediaVariable(dn-qk-ls-wt-dn-le-ht-dc);
313
312
  // color: var(
314
313
  // --_ctm-mob-dn-qk-ls-wt-dn-cr-dc,
315
314
  // var(--_ctm-tab-dn-qk-ls-wt-dn-cr-dc, var(--_ctm-dn-qk-ls-wt-dn-cr-dc))
@@ -355,22 +354,22 @@
355
354
  .items__container {
356
355
  .links__item {
357
356
  display: block;
358
- font-family: ctm-var(dn-im-se-ft-fy);
359
- font-size: ctm-var(dn-im-se-ft-se);
360
- color: ctm-var(dn-im-se-cr);
361
- font-weight: ctm-var(dn-im-se-ft-wt);
362
- font-style: ctm-var(dn-im-se-ft-se-ic);
363
- text-decoration: ctm-var(dn-im-se-ue);
364
- text-align: ctm-var(dn-im-se-tt-an);
365
- letter-spacing: ctm-var(dn-im-se-lr-sg);
366
- line-height: ctm-var(dn-im-se-le-ht);
367
- background-color: ctm-var(dn-im-se-bd-cr);
368
- border-width: ctm-var(dn-im-se-br-wh);
369
- border-color: ctm-var(dn-im-se-br-cr);
370
- border-style: ctm-var(dn-im-se-br-se);
371
- border-radius: ctm-var(dn-im-se-br-rs);
372
- box-shadow: ctm-var(dn-im-se-sw-ae) ctm-var(dn-im-se-sw-br) ctm-var(dn-im-se-sw-sd)
373
- ctm-var(dn-im-se-sw-cr);
357
+ font-family: prepareMediaVariable(dn-im-se-ft-fy);
358
+ font-size: prepareMediaVariable(dn-im-se-ft-se);
359
+ color: prepareMediaVariable(dn-im-se-cr);
360
+ font-weight: prepareMediaVariable(dn-im-se-ft-wt);
361
+ font-style: prepareMediaVariable(dn-im-se-ft-se-ic);
362
+ text-decoration: prepareMediaVariable(dn-im-se-ue);
363
+ text-align: prepareMediaVariable(dn-im-se-tt-an);
364
+ letter-spacing: prepareMediaVariable(dn-im-se-lr-sg);
365
+ line-height: prepareMediaVariable(dn-im-se-le-ht);
366
+ background-color: prepareMediaVariable(dn-im-se-bd-cr);
367
+ border-width: prepareMediaVariable(dn-im-se-br-wh);
368
+ border-color: prepareMediaVariable(dn-im-se-br-cr);
369
+ border-style: prepareMediaVariable(dn-im-se-br-se);
370
+ border-radius: prepareMediaVariable(dn-im-se-br-rs);
371
+ box-shadow: prepareMediaVariable(dn-im-se-sw-ae) prepareMediaVariable(dn-im-se-sw-br)
372
+ prepareMediaVariable(dn-im-se-sw-sd) prepareMediaVariable(dn-im-se-sw-cr);
374
373
  padding: 2px 8px;
375
374
  width: fit-content;
376
375
  }