@sc-360-v2/storefront-cms-library 0.3.38 → 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 (35) hide show
  1. package/dist/add-products-tab.scss +388 -0
  2. package/dist/badge.scss +84 -82
  3. package/dist/builder.js +1 -1
  4. package/dist/bulk-order-pad.scss +29 -34
  5. package/dist/cart-details.scss +54 -57
  6. package/dist/cart-products-sidebar.scss +113 -83
  7. package/dist/cartAttributes.scss +180 -183
  8. package/dist/cartDropdownOverlay.scss +49 -27
  9. package/dist/checkout.scss +127 -38
  10. package/dist/customization-tree.scss +42 -10
  11. package/dist/dropdownTemplate.scss +35 -25
  12. package/dist/employee-bulk-order.scss +219 -47
  13. package/dist/empty-states.scss +66 -66
  14. package/dist/functions.scss +7 -5
  15. package/dist/icons.js +1 -1
  16. package/dist/index.js +1 -1
  17. package/dist/item-stock.scss +27 -28
  18. package/dist/menu-v2.scss +2 -2
  19. package/dist/modal.scss +104 -75
  20. package/dist/past-orders.scss +272 -258
  21. package/dist/payment-methods.scss +70 -71
  22. package/dist/prefix-list.scss +1 -0
  23. package/dist/product-actions.scss +68 -68
  24. package/dist/product-sizechart.scss +13 -13
  25. package/dist/quick-links.scss +47 -48
  26. package/dist/quick-order-pad.scss +51 -51
  27. package/dist/quotes.scss +118 -116
  28. package/dist/rfqs.scss +118 -116
  29. package/dist/types/builder/elements/add-products-tab/index.d.ts +46 -0
  30. package/dist/types/builder/enums/index.d.ts +2 -0
  31. package/dist/types/builder/index.d.ts +2 -1
  32. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +418 -0
  33. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  34. package/dist/widget.scss +1 -0
  35. package/package.json +1 -1
package/dist/payment-methods.scss CHANGED
@@ -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
  }
package/dist/prefix-list.scss CHANGED
@@ -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,
package/dist/product-actions.scss CHANGED
@@ -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
  }
package/dist/product-sizechart.scss CHANGED
@@ -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;
package/dist/quick-links.scss CHANGED
@@ -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
  }
package/dist/quick-order-pad.scss CHANGED
@@ -20,6 +20,7 @@ $input-padding: 10px 12px;
20
20
  flex-direction: column;
21
21
  gap: 16px;
22
22
  width: 100%;
23
+ height: 100%;
23
24
 
24
25
  .input-group {
25
26
  display: flex;
@@ -30,54 +31,55 @@ $input-padding: 10px 12px;
30
31
  border-bottom: 0.5px solid var(--Gray-200, #eaecf0);
31
32
  flex-shrink: 0;
32
33
 
33
- .quick-order-product-dropdown-section {
34
- width: 320px;
35
- height: 40px;
36
- // border: 0.5px solid #d0d5dd;
37
- border-radius: 4px;
38
- .dropdown-input-section {
39
- border-radius: 4px;
40
- border: 0.5px solid var(--Gray-300, #d0d5dd);
41
- display: flex;
42
- width: 320px;
43
- padding: 8px 12px;
44
- justify-content: space-between;
45
- align-items: center;
46
- input {
47
- color: $text-color;
48
- font-size: 16px;
49
- font-weight: 400;
50
- line-height: 24px; /* 150% */
51
- }
52
- }
53
- .dropdown-input-section {
54
- padding: 0px 12px;
55
-
56
- .dropdown-menu {
57
- top: 40px;
58
-
59
- .dropdown_menu_ul {
60
- .dropdown-opt {
61
- height: auto;
62
- .dropdown-item {
63
- max-height: none;
64
-
65
- .item-image {
66
- width: 42px;
67
- height: 42px;
68
- }
69
-
70
- .item-name {
71
- font-size: 16px;
72
- line-height: 24px;
73
- color: #344054;
74
- }
75
- }
76
- }
77
- }
78
- }
79
- }
80
- }
34
+ // .quick-order-product-dropdown-section {
35
+ // width: 320px;
36
+ // height: 40px;
37
+ // // border: 0.5px solid #d0d5dd;
38
+ // border-radius: 4px;
39
+ // .dropdown-input-section {
40
+ // border-radius: 4px;
41
+ // border: 0.5px solid var(--Gray-300, #d0d5dd);
42
+ // display: flex;
43
+ // width: 320px;
44
+ // padding: 8px 12px;
45
+ // justify-content: space-between;
46
+ // align-items: center;
47
+ // input {
48
+ // color: $text-color;
49
+ // font-size: 16px;
50
+ // font-weight: 400;
51
+ // line-height: 24px; /* 150% */
52
+ // }
53
+ // }
54
+ // .dropdown-input-section {
55
+ // padding: 0px 12px;
56
+
57
+ // .dropdown-menu {
58
+ // top: 40px;
59
+
60
+ // .dropdown_menu_ul {
61
+
62
+ // .dropdown-opt {
63
+ // height: auto;
64
+ // .dropdown-item {
65
+ // max-height: none;
66
+
67
+ // .item-image {
68
+ // width: 42px;
69
+ // height: 42px;
70
+ // }
71
+
72
+ // .item-name {
73
+ // font-size: 16px;
74
+ // line-height: 24px;
75
+ // color: #344054;
76
+ // }
77
+ // }
78
+ // }
79
+ // }
80
+ // }
81
+ // }
82
+ // }
81
83
 
82
84
  .qty-input {
83
85
  padding: $input-padding;
@@ -122,8 +124,6 @@ $input-padding: 10px 12px;
122
124
  align-items: center;
123
125
  justify-content: center;
124
126
 
125
-
126
-
127
127
  svg {
128
128
  width: 16px;
129
129
  height: 16px;
@@ -155,4 +155,4 @@ $input-padding: 10px 12px;
155
155
  to {
156
156
  transform: rotate(360deg);
157
157
  }
158
- }
158
+ }