@sc-360-v2/storefront-cms-library 0.2.73 → 0.2.76

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 (106) hide show
  1. package/dist/add-order.scss +69 -0
  2. package/dist/allocationDetails.scss +335 -0
  3. package/dist/allocations.scss +546 -2
  4. package/dist/amount-estimator.scss +733 -187
  5. package/dist/brand-basic-elements.scss +142 -61
  6. package/dist/brand.scss +66 -16
  7. package/dist/breadcrumbs.scss +379 -88
  8. package/dist/builder.js +1 -1
  9. package/dist/bulk-variant-picker.scss +525 -121
  10. package/dist/bundle-basic-elements.scss +283 -121
  11. package/dist/bundle.scss +74 -15
  12. package/dist/buyFor.scss +153 -0
  13. package/dist/cart-details.scss +387 -0
  14. package/dist/cart-summary.scss +175 -0
  15. package/dist/cart.scss +178 -44
  16. package/dist/cartDropdownOverlay.scss +118 -0
  17. package/dist/cartGrouping.scss +89 -0
  18. package/dist/category.scss +38 -7
  19. package/dist/categoryDetails.scss +24 -6
  20. package/dist/categoryWidget.scss +11 -6
  21. package/dist/code-temp.scss +6 -4
  22. package/dist/contact-us.scss +19 -147
  23. package/dist/container.scss +22 -1
  24. package/dist/countdown.scss +372 -112
  25. package/dist/editCartItem.scss +111 -0
  26. package/dist/embed-temp.scss +29 -14
  27. package/dist/faq.scss +3 -6
  28. package/dist/filters.scss +11 -2
  29. package/dist/form-preview.scss +128 -93
  30. package/dist/gallery-slider-temp.scss +548 -135
  31. package/dist/grid.scss +24 -0
  32. package/dist/hotspot.scss +27 -25
  33. package/dist/icon-library.scss +26 -15
  34. package/dist/icons.js +1 -1
  35. package/dist/image-temp.scss +45 -17
  36. package/dist/index.js +1 -1
  37. package/dist/item-stock.scss +125 -0
  38. package/dist/layouter-item.scss +26 -2
  39. package/dist/layouter.scss +26 -1
  40. package/dist/light-box-v2.scss +29 -3
  41. package/dist/lightbox.scss +18 -2
  42. package/dist/line.scss +165 -0
  43. package/dist/login.scss +15 -23
  44. package/dist/map.scss +495 -119
  45. package/dist/marchandiserSets.scss +35 -18
  46. package/dist/menu.scss +121 -33
  47. package/dist/modal.scss +4 -0
  48. package/dist/past-orders.scss +11 -2
  49. package/dist/payment-methods.scss +29 -13
  50. package/dist/pickup-locations.scss +884 -244
  51. package/dist/product-actions.scss +2223 -418
  52. package/dist/product-basic-elements.scss +273 -122
  53. package/dist/product-highlights.scss +22 -14
  54. package/dist/product-image.scss +535 -136
  55. package/dist/product-inventory.scss +1105 -283
  56. package/dist/product-options.scss +378 -94
  57. package/dist/product-price.scss +1386 -316
  58. package/dist/product-promotions.scss +2252 -601
  59. package/dist/product.scss +68 -14
  60. package/dist/productDetails.scss +29 -2
  61. package/dist/profile.scss +19 -4
  62. package/dist/quantity-selector.scss +5 -4
  63. package/dist/quick-links.scss +277 -0
  64. package/dist/quotes.scss +11 -2
  65. package/dist/repeater-item.scss +26 -2
  66. package/dist/repeater.scss +60 -7
  67. package/dist/rfqs.scss +11 -2
  68. package/dist/scroll.scss +112 -47
  69. package/dist/search-results-heading.scss +282 -0
  70. package/dist/search.scss +84 -23
  71. package/dist/section.scss +25 -1
  72. package/dist/shareCartSideBar.scss +230 -0
  73. package/dist/shipping-estimator.scss +7 -3
  74. package/dist/social.scss +148 -38
  75. package/dist/sort.scss +11 -2
  76. package/dist/stack.scss +23 -3
  77. package/dist/static-text.scss +0 -1
  78. package/dist/store-locations.scss +887 -244
  79. package/dist/sub-category.scss +50 -19
  80. package/dist/tab-container-item.scss +80 -0
  81. package/dist/tab-container.scss +89 -0
  82. package/dist/tab-v2.scss +579 -0
  83. package/dist/table.scss +370 -91
  84. package/dist/tabs.scss +334 -74
  85. package/dist/text-temp-v2.scss +21 -9
  86. package/dist/types/builder/elements/add-order/index.d.ts +27 -0
  87. package/dist/types/builder/elements/create-form/index.d.ts +27 -0
  88. package/dist/types/builder/elements/form-builder/index.d.ts +7 -0
  89. package/dist/types/builder/elements/image/index.d.ts +13 -0
  90. package/dist/types/builder/elements/quick-links/index.d.ts +36 -0
  91. package/dist/types/builder/enums/index.d.ts +9 -1
  92. package/dist/types/builder/index.d.ts +4 -1
  93. package/dist/types/builder/interfaces/global.d.ts +5 -0
  94. package/dist/types/builder/tools/element-edit/addOrder.d.ts +28 -0
  95. package/dist/types/builder/tools/element-edit/createForm.d.ts +15 -0
  96. package/dist/types/builder/tools/element-edit/index.d.ts +4 -1
  97. package/dist/types/builder/tools/element-edit/quickLinks.d.ts +360 -0
  98. package/dist/uom-selector.scss +1569 -383
  99. package/dist/variant-picker.scss +1593 -481
  100. package/dist/video.scss +212 -53
  101. package/dist/volume-pricing.scss +775 -196
  102. package/dist/widget.scss +14 -0
  103. package/package.json +1 -1
  104. package/dist/editor-core.scss +0 -537
  105. package/dist/tab-panel.scss +0 -93
  106. package/dist/text-editor.scss +0 -331
package/dist/tabs.scss CHANGED
@@ -4,15 +4,27 @@
4
4
  [data-div-type="element"] {
5
5
  &[data-element-type="tabs"] {
6
6
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
7
- width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-tabs-ele-nw-wh-vl, var(--_sf-nw-wh))));
7
+ width: var(
8
+ --_sf-el-wh-st-mx,
9
+ calc(
10
+ 1% *
11
+ var(
12
+ --_ctm-mob-tabs-ele-nw-wh-vl,
13
+ var(--_ctm-tab-tabs-ele-nw-wh-vl, var(--_ctm-tabs-ele-nw-wh-vl, var(--_sf-nw-wh)))
14
+ )
15
+ )
16
+ );
8
17
  // margin: var(--_ctm-lt-mn, --_tst-lt-mn);
9
18
  // width: calc(1% * var(--_ctm-tab-lt-wh, auto));
10
19
  // width: 100%;
11
20
  // height: var(--_ctm-pro-lt-ht) !important;
12
21
  // width: 100%;
13
22
  height: auto;
14
- margin: var(--_ctm-tabs-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
15
- background: var(--_ctm-tabs-dn-bd-cr);
23
+ margin: var(--_ctm-mob-tabs-lt-mn, var(--_ctm-tab-lt-mn, --_ctm-lt-mn));
24
+ background: var(
25
+ --_ctm-mob-tabs-dn-bd-cr,
26
+ var(--_ctm-tab-tabs-dn-bd-cr, var(--_ctm-tabs-dn-bd-cr))
27
+ );
16
28
  // aspect-ratio: 1 / var(--_sf-aspect-ratio);
17
29
  // --_aspect-ratio: calc(
18
30
  // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
@@ -22,13 +34,46 @@
22
34
  width: 100%;
23
35
  }
24
36
  .tabs__main {
25
- background-color: var(--_ctm-tabs-dn-tb-cr-bd-cr);
26
- border-color: var(--_ctm-tabs-dn-tb-cr-br-cr);
27
- border-style: var(--_ctm-tabs-dn-tb-cr-br-se);
28
- border-width: var(--_ctm-tabs-dn-tb-cr-br-wh);
29
- border-radius: var(--_ctm-tabs-dn-tb-cr-br-rs);
30
- box-shadow: var(--_ctm-tabs-dn-tb-cr-sw-ae) var(--_ctm-tabs-dn-tb-cr-sw-br)
31
- var(--_ctm-tabs-dn-tb-cr-sw-sd) var(--_ctm-tabs-dn-tb-cr-sw-cr);
37
+ background-color: var(
38
+ --_ctm-mob-tabs-dn-tb-cr-bd-cr,
39
+ var(--_ctm-tab-tabs-dn-tb-cr-bd-cr, var(--_ctm-tabs-dn-tb-cr-bd-cr))
40
+ );
41
+ border-color: var(
42
+ --_ctm-mob-tabs-dn-tb-cr-br-cr,
43
+ var(--_ctm-tab-tabs-dn-tb-cr-br-cr, var(--_ctm-tabs-dn-tb-cr-br-cr))
44
+ );
45
+ border-style: var(
46
+ --_ctm-mob-tabs-dn-tb-cr-br-se,
47
+ var(--_ctm-tab-tabs-dn-tb-cr-br-se, var(--_ctm-tabs-dn-tb-cr-br-se))
48
+ );
49
+ border-width: var(
50
+ --_ctm-mob-tabs-dn-tb-cr-br-wh,
51
+ var(--_ctm-tab-tabs-dn-tb-cr-br-wh, var(--_ctm-tabs-dn-tb-cr-br-wh))
52
+ );
53
+ border-radius: var(
54
+ --_ctm-mob-tabs-dn-tb-cr-br-rs,
55
+ var(--_ctm-tab-tabs-dn-tb-cr-br-rs, var(--_ctm-tabs-dn-tb-cr-br-rs))
56
+ );
57
+ box-shadow: var
58
+ (
59
+ --_show-shadow,
60
+ var(
61
+ --_ctm-mob-tabs-dn-tb-cr-sw-ae,
62
+ var(--_ctm-tab-tabs-dn-tb-cr-sw-ae, var(--_ctm-tabs-dn-tb-cr-sw-ae))
63
+ )
64
+ var(
65
+ --_ctm-mob-tabs-dn-tb-cr-sw-br,
66
+ var(--_ctm-tab-tabs-dn-tb-cr-sw-br, var(--_ctm-tabs-dn-tb-cr-sw-br))
67
+ )
68
+ var(
69
+ --_ctm-mob-tabs-dn-tb-cr-sw-sd,
70
+ var(--_ctm-tab-tabs-dn-tb-cr-sw-sd, var(--_ctm-tabs-dn-tb-cr-sw-sd))
71
+ )
72
+ var(
73
+ --_ctm-mob-tabs-dn-tb-cr-sw-cr,
74
+ var(--_ctm-tab-tabs-dn-tb-cr-sw-cr, var(--_ctm-tabs-dn-tb-cr-sw-cr))
75
+ )
76
+ );
32
77
  padding: var(--_ctm-tabs-lt-pg);
33
78
  &.tabs__vertical {
34
79
  .tabs {
@@ -48,85 +93,300 @@
48
93
  }
49
94
  .tabs {
50
95
  display: flex;
51
- gap: var(--_ctm-tabs-lt-tb-cr);
96
+ gap: var(
97
+ --_ctm-mob-tabs-lt-tb-cr,
98
+ var(--_ctm-tab-tabs-lt-tb-cr, var(--_ctm-tabs-lt-tb-cr))
99
+ );
52
100
 
53
101
  .tabs__container {
54
102
  display: flex;
55
- justify-content: var(--_ctm-tabs-lt-tb-at);
103
+ justify-content: var(
104
+ --_ctm-mob-tabs-lt-tb-at,
105
+ var(--_ctm-tab-tabs-lt-tb-at, var(--_ctm-tabs-lt-tb-at))
106
+ );
56
107
  align-items: center;
57
108
  background-color: var(--_gray-100);
58
109
  // gap: var(--_ctm-tabs-lt-tb-sg);
59
110
  .tab {
60
111
  cursor: pointer;
61
112
  text-align: left;
62
- padding: var(--_ctm-tabs-lt-hl-pg) var(--_ctm-tabs-lt-vl-pg);
63
- background-color: var(--_ctm-tabs-dn-ts-dt-se-bd-cr);
64
- border-color: var(--_ctm-tabs-dn-ts-dt-se-br-cr);
65
- border-style: var(--_ctm-tabs-dn-ts-dt-se-br-se);
66
- border-width: var(--_ctm-tabs-dn-ts-dt-se-br-wh);
67
- border-radius: var(--_ctm-tabs-dn-ts-dt-se-br-rs);
68
- box-shadow: var(--_ctm-tabs-dn-ts-dt-se-sw-ae) var(--_ctm-tabs-dn-ts-dt-se-sw-br)
69
- var(--_ctm-tabs-dn-ts-dt-se-sw-sd) var(--_ctm-tabs-dn-ts-dt-se-sw-cr);
70
- color: var(--_ctm-tabs-dn-ts-dt-se-cr);
71
- font-family: var(--_ctm-tabs-dn-ts-dt-se-ft-fy), sans-serif;
72
- font-size: var(--_ctm-tabs-dn-ts-dt-se-ft-se);
73
- font-weight: var(--_ctm-tabs-dn-ts-dt-se-ft-wt);
74
- font-style: var(--_ctm-tabs-dn-ts-dt-se-ft-se-ic);
75
- text-align: var(--_ctm-tabs-dn-ts-dt-se-tt-an);
76
- letter-spacing: var(--_ctm-tabs-dn-ts-dt-se-lr-sg);
77
- line-height: var(--_ctm-tabs-dn-ts-dt-se-le-ht);
78
- text-decoration: var(--_ctm-tabs-dn-ts-dt-se-ue);
79
- // span {
80
- // padding: 8px;
81
- // &.active {
82
- // border-bottom: 2px solid var(--_primary-400);
83
- // }
84
- // }
113
+ padding: var(
114
+ --_ctm-mob-tabs-lt-hl-pg,
115
+ var(--_ctm-tab-tabs-lt-hl-pg, var(--_ctm-tabs-lt-hl-pg))
116
+ )
117
+ var(
118
+ --_ctm-mob-tabs-lt-vl-pg,
119
+ var(--_ctm-tab-tabs-lt-vl-pg, var(--_ctm-tabs-lt-vl-pg))
120
+ );
121
+ background-color: var(
122
+ --_ctm-mob-tabs-dn-ts-dt-se-bd-cr,
123
+ var(--_ctm-tab-tabs-dn-ts-dt-se-bd-cr, var(--_ctm-tabs-dn-ts-dt-se-bd-cr))
124
+ );
125
+ border-color: var(
126
+ --_ctm-mob-tabs-dn-ts-dt-se-br-cr,
127
+ var(--_ctm-tab-tabs-dn-ts-dt-se-br-cr, var(--_ctm-tabs-dn-ts-dt-se-br-cr))
128
+ );
129
+ border-style: var(
130
+ --_ctm-mob-tabs-dn-ts-dt-se-br-se,
131
+ var(--_ctm-tab-tabs-dn-ts-dt-se-br-se, var(--_ctm-tabs-dn-ts-dt-se-br-se))
132
+ );
133
+ border-width: var(
134
+ --_ctm-mob-tabs-dn-ts-dt-se-br-wh,
135
+ var(--_ctm-tab-tabs-dn-ts-dt-se-br-wh, var(--_ctm-tabs-dn-ts-dt-se-br-wh))
136
+ );
137
+ border-radius: var(
138
+ --_ctm-mob-tabs-dn-ts-dt-se-br-rs,
139
+ var(--_ctm-tab-tabs-dn-ts-dt-se-br-rs, var(--_ctm-tabs-dn-ts-dt-se-br-rs))
140
+ );
141
+ box-shadow: var(
142
+ --_ctm-mob-tabs-dn-ts-dt-se-sw-ae,
143
+ var(--_ctm-tab-tabs-dn-ts-dt-se-sw-ae, var(--_ctm-tabs-dn-ts-dt-se-sw-ae))
144
+ )
145
+ var(
146
+ --_ctm-mob-tabs-dn-ts-dt-se-sw-br,
147
+ var(--_ctm-tab-tabs-dn-ts-dt-se-sw-br, var(--_ctm-tabs-dn-ts-dt-se-sw-br))
148
+ )
149
+ var(
150
+ --_ctm-mob-tabs-dn-ts-dt-se-sw-sd,
151
+ var(--_ctm-tab-tabs-dn-ts-dt-se-sw-sd, var(--_ctm-tabs-dn-ts-dt-se-sw-sd))
152
+ )
153
+ var(
154
+ --_ctm-mob-tabs-dn-ts-dt-se-sw-cr,
155
+ var(--_ctm-tab-tabs-dn-ts-dt-se-sw-cr, var(--_ctm-tabs-dn-ts-dt-se-sw-cr))
156
+ );
157
+ color: var(
158
+ --_ctm-mob-tabs-dn-ts-dt-se-cr,
159
+ var(--_ctm-tab-tabs-dn-ts-dt-se-cr, var(--_ctm-tabs-dn-ts-dt-se-cr))
160
+ );
161
+ font-family: var(
162
+ --_sf-hr-ff,
163
+ var(
164
+ --_ctm-mob-tabs-dn-ts-dt-se-ft-fy,
165
+ var(--_ctm-tab-tabs-dn-ts-dt-se-ft-fy, var(--_ctm-tabs-dn-ts-dt-se-ft-fy))
166
+ )
167
+ );
168
+ font-size: var(
169
+ --_ctm-mob-tabs-dn-ts-dt-se-ft-se,
170
+ var(--_ctm-tab-tabs-dn-ts-dt-se-ft-se, var(--_ctm-tabs-dn-ts-dt-se-ft-se))
171
+ );
172
+ font-weight: var(
173
+ --_ctm-mob-tabs-dn-ts-dt-se-ft-wt,
174
+ var(--_ctm-tab-tabs-dn-ts-dt-se-ft-wt, var(--_ctm-tabs-dn-ts-dt-se-ft-wt))
175
+ );
176
+ font-style: var(
177
+ --_ctm-mob-tabs-dn-ts-dt-se-ft-se-ic,
178
+ var(--_ctm-tab-tabs-dn-ts-dt-se-ft-se-ic, var(--_ctm-tabs-dn-ts-dt-se-ft-se-ic))
179
+ );
180
+ text-align: var(
181
+ --_ctm-mob-tabs-dn-ts-dt-se-tt-an,
182
+ var(--_ctm-tab-tabs-dn-ts-dt-se-tt-an, var(--_ctm-tabs-dn-ts-dt-se-tt-an))
183
+ );
184
+ letter-spacing: var(
185
+ --_ctm-mob-tabs-dn-ts-dt-se-lr-sg,
186
+ var(--_ctm-tab-tabs-dn-ts-dt-se-lr-sg, var(--_ctm-tabs-dn-ts-dt-se-lr-sg))
187
+ );
188
+ line-height: var(
189
+ --_ctm-mob-tabs-dn-ts-dt-se-le-ht,
190
+ var(--_ctm-tab-tabs-dn-ts-dt-se-le-ht, var(--_ctm-tabs-dn-ts-dt-se-le-ht))
191
+ );
192
+ text-decoration: var(
193
+ --_ctm-mob-tabs-dn-ts-dt-se-ue,
194
+ var(--_ctm-tab-tabs-dn-ts-dt-se-ue, var(--_ctm-tabs-dn-ts-dt-se-ue))
195
+ );
196
+
85
197
  &:hover {
86
- background-color: var(--_ctm-tabs-dn-ts-hr-se-bd-cr);
87
- border-color: var(--_ctm-tabs-dn-ts-hr-se-br-cr);
88
- border-style: var(--_ctm-tabs-dn-ts-hr-se-br-se);
89
- border-width: var(--_ctm-tabs-dn-ts-hr-se-br-wh);
90
- border-radius: var(--_ctm-tabs-dn-ts-hr-se-br-rs);
91
- box-shadow: var(--_ctm-tabs-dn-ts-hr-se-sw-ae) var(--_ctm-tabs-dn-ts-hr-se-sw-br)
92
- var(--_ctm-tabs-dn-ts-hr-se-sw-sd) var(--_ctm-tabs-dn-ts-hr-se-sw-cr);
93
- color: var(--_ctm-tabs-dn-ts-hr-se-cr);
94
- font-family: var(--_ctm-tabs-dn-ts-hr-se-ft-fy), sans-serif;
95
- font-size: var(--_ctm-tabs-dn-ts-hr-se-ft-se);
96
- font-weight: var(--_ctm-tabs-dn-ts-hr-se-ft-wt);
97
- font-style: var(--_ctm-tabs-dn-ts-hr-se-ft-se-ic);
98
- text-align: var(--_ctm-tabs-dn-ts-hr-se-tt-an);
99
- letter-spacing: var(--_ctm-tabs-dn-ts-hr-se-lr-sg);
100
- line-height: var(--_ctm-tabs-dn-ts-hr-se-le-ht);
101
- text-decoration: var(--_ctm-tabs-dn-ts-hr-se-ue);
198
+ background-color: var(
199
+ --_ctm-mob-tabs-dn-ts-hr-se-bd-cr,
200
+ var(--_ctm-tab-tabs-dn-ts-hr-se-bd-cr, var(--_ctm-tabs-dn-ts-hr-se-bd-cr))
201
+ );
202
+ border-color: var(
203
+ --_ctm-mob-tabs-dn-ts-hr-se-br-cr,
204
+ var(--_ctm-tab-tabs-dn-ts-hr-se-br-cr, var(--_ctm-tabs-dn-ts-hr-se-br-cr))
205
+ );
206
+ border-style: var(
207
+ --_ctm-mob-tabs-dn-ts-hr-se-br-se,
208
+ var(--_ctm-tab-tabs-dn-ts-hr-se-br-se, var(--_ctm-tabs-dn-ts-hr-se-br-se))
209
+ );
210
+ border-width: var(
211
+ --_ctm-mob-tabs-dn-ts-hr-se-br-wh,
212
+ var(--_ctm-tab-tabs-dn-ts-hr-se-br-wh, var(--_ctm-tabs-dn-ts-hr-se-br-wh))
213
+ );
214
+ border-radius: var(
215
+ --_ctm-mob-tabs-dn-ts-hr-se-br-rs,
216
+ var(--_ctm-tab-tabs-dn-ts-hr-se-br-rs, var(--_ctm-tabs-dn-ts-hr-se-br-rs))
217
+ );
218
+ box-shadow: var(
219
+ --_ctm-mob-tabs-dn-ts-hr-se-sw-ae,
220
+ var(--_ctm-tab-tabs-dn-ts-hr-se-sw-ae, var(--_ctm-tabs-dn-ts-hr-se-sw-ae))
221
+ )
222
+ var(
223
+ --_ctm-mob-tabs-dn-ts-hr-se-sw-br,
224
+ var(--_ctm-tab-tabs-dn-ts-hr-se-sw-br, var(--_ctm-tabs-dn-ts-hr-se-sw-br))
225
+ )
226
+ var(
227
+ --_ctm-mob-tabs-dn-ts-hr-se-sw-sd,
228
+ var(--_ctm-tab-tabs-dn-ts-hr-se-sw-sd, var(--_ctm-tabs-dn-ts-hr-se-sw-sd))
229
+ )
230
+ var(
231
+ --_ctm-mob-tabs-dn-ts-hr-se-sw-cr,
232
+ var(--_ctm-tab-tabs-dn-ts-hr-se-sw-cr, var(--_ctm-tabs-dn-ts-hr-se-sw-cr))
233
+ );
234
+ color: var(
235
+ --_ctm-mob-tabs-dn-ts-hr-se-cr,
236
+ var(--_ctm-tab-tabs-dn-ts-hr-se-cr, var(--_ctm-tabs-dn-ts-hr-se-cr))
237
+ );
238
+ font-family: var(
239
+ --_ctm-mob-tabs-dn-ts-hr-se-ft-fy,
240
+ var(--_ctm-tab-tabs-dn-ts-hr-se-ft-fy, var(--_ctm-tabs-dn-ts-hr-se-ft-fy))
241
+ );
242
+ font-size: var(
243
+ --_ctm-mob-tabs-dn-ts-hr-se-ft-se,
244
+ var(--_ctm-tab-tabs-dn-ts-hr-se-ft-se, var(--_ctm-tabs-dn-ts-hr-se-ft-se))
245
+ );
246
+ font-weight: var(
247
+ --_ctm-mob-tabs-dn-ts-hr-se-ft-wt,
248
+ var(--_ctm-tab-tabs-dn-ts-hr-se-ft-wt, var(--_ctm-tabs-dn-ts-hr-se-ft-wt))
249
+ );
250
+ font-style: var(
251
+ --_ctm-mob-tabs-dn-ts-hr-se-ft-se-ic,
252
+ var(--_ctm-tab-tabs-dn-ts-hr-se-ft-se-ic, var(--_ctm-tabs-dn-ts-hr-se-ft-se-ic))
253
+ );
254
+ text-align: var(
255
+ --_ctm-mob-tabs-dn-ts-hr-se-tt-an,
256
+ var(--_ctm-tab-tabs-dn-ts-hr-se-tt-an, var(--_ctm-tabs-dn-ts-hr-se-tt-an))
257
+ );
258
+ letter-spacing: var(
259
+ --_ctm-mob-tabs-dn-ts-hr-se-lr-sg,
260
+ var(--_ctm-tab-tabs-dn-ts-hr-se-lr-sg, var(--_ctm-tabs-dn-ts-hr-se-lr-sg))
261
+ );
262
+ line-height: var(
263
+ --_ctm-mob-tabs-dn-ts-hr-se-le-ht,
264
+ var(--_ctm-tab-tabs-dn-ts-hr-se-le-ht, var(--_ctm-tabs-dn-ts-hr-se-le-ht))
265
+ );
266
+ text-decoration: var(
267
+ --_ctm-mob-tabs-dn-ts-hr-se-ue,
268
+ var(--_ctm-tab-tabs-dn-ts-hr-se-ue, var(--_ctm-tabs-dn-ts-hr-se-ue))
269
+ );
102
270
  }
271
+
103
272
  &.active {
104
- background-color: var(--_ctm-tabs-dn-ts-sd-se-bd-cr);
105
- border-color: var(--_ctm-tabs-dn-ts-sd-se-br-cr);
106
- border-style: var(--_ctm-tabs-dn-ts-sd-se-br-se);
107
- border-width: var(--_ctm-tabs-dn-ts-sd-se-br-wh);
108
- border-radius: var(--_ctm-tabs-dn-ts-sd-se-br-rs);
109
- box-shadow: var(--_ctm-tabs-dn-ts-sd-se-sw-ae) var(--_ctm-tabs-dn-ts-sd-se-sw-br)
110
- var(--_ctm-tabs-dn-ts-sd-se-sw-sd) var(--_ctm-tabs-dn-ts-sd-se-sw-cr);
111
- color: var(--_ctm-tabs-dn-ts-sd-se-cr);
112
- font-family: var(--_ctm-tabs-dn-ts-sd-se-ft-fy), sans-serif;
113
- font-size: var(--_ctm-tabs-dn-ts-sd-se-ft-se);
114
- font-weight: var(--_ctm-tabs-dn-ts-sd-se-ft-wt);
115
- font-style: var(--_ctm-tabs-dn-ts-sd-se-ft-se-ic);
116
- text-align: var(--_ctm-tabs-dn-ts-sd-se-tt-an);
117
- letter-spacing: var(--_ctm-tabs-dn-ts-sd-se-lr-sg);
118
- line-height: var(--_ctm-tabs-dn-ts-sd-se-le-ht);
119
- text-decoration: var(--_ctm-tabs-dn-ts-sd-se-ue);
273
+ background-color: var(
274
+ --_ctm-mob-tabs-dn-ts-sd-se-bd-cr,
275
+ var(--_ctm-tab-tabs-dn-ts-sd-se-bd-cr, var(--_ctm-tabs-dn-ts-sd-se-bd-cr))
276
+ );
277
+ border-color: var(
278
+ --_ctm-mob-tabs-dn-ts-sd-se-br-cr,
279
+ var(--_ctm-tab-tabs-dn-ts-sd-se-br-cr, var(--_ctm-tabs-dn-ts-sd-se-br-cr))
280
+ );
281
+ border-style: var(
282
+ --_ctm-mob-tabs-dn-ts-sd-se-br-se,
283
+ var(--_ctm-tab-tabs-dn-ts-sd-se-br-se, var(--_ctm-tabs-dn-ts-sd-se-br-se))
284
+ );
285
+ border-width: var(
286
+ --_ctm-mob-tabs-dn-ts-sd-se-br-wh,
287
+ var(--_ctm-tab-tabs-dn-ts-sd-se-br-wh, var(--_ctm-tabs-dn-ts-sd-se-br-wh))
288
+ );
289
+ border-radius: var(
290
+ --_ctm-mob-tabs-dn-ts-sd-se-br-rs,
291
+ var(--_ctm-tab-tabs-dn-ts-sd-se-br-rs, var(--_ctm-tabs-dn-ts-sd-se-br-rs))
292
+ );
293
+ box-shadow: var(
294
+ --_ctm-mob-tabs-dn-ts-sd-se-sw-ae,
295
+ var(--_ctm-tab-tabs-dn-ts-sd-se-sw-ae, var(--_ctm-tabs-dn-ts-sd-se-sw-ae))
296
+ )
297
+ var(
298
+ --_ctm-mob-tabs-dn-ts-sd-se-sw-br,
299
+ var(--_ctm-tab-tabs-dn-ts-sd-se-sw-br, var(--_ctm-tabs-dn-ts-sd-se-sw-br))
300
+ )
301
+ var(
302
+ --_ctm-mob-tabs-dn-ts-sd-se-sw-sd,
303
+ var(--_ctm-tab-tabs-dn-ts-sd-se-sw-sd, var(--_ctm-tabs-dn-ts-sd-se-sw-sd))
304
+ )
305
+ var(
306
+ --_ctm-mob-tabs-dn-ts-sd-se-sw-cr,
307
+ var(--_ctm-tab-tabs-dn-ts-sd-se-sw-cr, var(--_ctm-tabs-dn-ts-sd-se-sw-cr))
308
+ );
309
+ color: var(
310
+ --_ctm-mob-tabs-dn-ts-sd-se-cr,
311
+ var(--_ctm-tab-tabs-dn-ts-sd-se-cr, var(--_ctm-tabs-dn-ts-sd-se-cr))
312
+ );
313
+ font-family: var(
314
+ --_ctm-mob-tabs-dn-ts-sd-se-ft-fy,
315
+ var(--_ctm-tab-tabs-dn-ts-sd-se-ft-fy, var(--_ctm-tabs-dn-ts-sd-se-ft-fy))
316
+ );
317
+ font-size: var(
318
+ --_ctm-mob-tabs-dn-ts-sd-se-ft-se,
319
+ var(--_ctm-tab-tabs-dn-ts-sd-se-ft-se, var(--_ctm-tabs-dn-ts-sd-se-ft-se))
320
+ );
321
+ font-weight: var(
322
+ --_ctm-mob-tabs-dn-ts-sd-se-ft-wt,
323
+ var(--_ctm-tab-tabs-dn-ts-sd-se-ft-wt, var(--_ctm-tabs-dn-ts-sd-se-ft-wt))
324
+ );
325
+ font-style: var(
326
+ --_ctm-mob-tabs-dn-ts-sd-se-ft-se-ic,
327
+ var(--_ctm-tab-tabs-dn-ts-sd-se-ft-se-ic, var(--_ctm-tabs-dn-ts-sd-se-ft-se-ic))
328
+ );
329
+ text-align: var(
330
+ --_ctm-mob-tabs-dn-ts-sd-se-tt-an,
331
+ var(--_ctm-tab-tabs-dn-ts-sd-se-tt-an, var(--_ctm-tabs-dn-ts-sd-se-tt-an))
332
+ );
333
+ letter-spacing: var(
334
+ --_ctm-mob-tabs-dn-ts-sd-se-lr-sg,
335
+ var(--_ctm-tab-tabs-dn-ts-sd-se-lr-sg, var(--_ctm-tabs-dn-ts-sd-se-lr-sg))
336
+ );
337
+ line-height: var(
338
+ --_ctm-mob-tabs-dn-ts-sd-se-le-ht,
339
+ var(--_ctm-tab-tabs-dn-ts-sd-se-le-ht, var(--_ctm-tabs-dn-ts-sd-se-le-ht))
340
+ );
341
+ text-decoration: var(
342
+ --_ctm-mob-tabs-dn-ts-sd-se-ue,
343
+ var(--_ctm-tab-tabs-dn-ts-sd-se-ue, var(--_ctm-tabs-dn-ts-sd-se-ue))
344
+ );
120
345
  }
121
346
  }
347
+
122
348
  .tab__content {
123
- background-color: var(--_ctm-tabs-dn-tb-ct-cr-bd-cr);
124
- border-color: var(--_ctm-tabs-dn-tb-ct-cr-br-cr);
125
- border-style: var(--_ctm-tabs-dn-tb-ct-cr-br-se);
126
- border-width: var(--_ctm-tabs-dn-tb-ct-cr-br-wh);
127
- border-radius: var(--_ctm-tabs-dn-tb-ct-cr-br-rs);
128
- box-shadow: var(--_ctm-tabs-dn-tb-ct-cr-sw-ae) var(--_ctm-tabs-dn-tb-ct-cr-sw-br)
129
- var(--_ctm-tabs-dn-tb-ct-cr-sw-sd) var(--_ctm-tabs-dn-tb-ct-cr-sw-cr);
349
+ background-color: var(
350
+ --_ctm-mob-tabs-dn-tb-ct-cr-bd-cr,
351
+ var(--_ctm-tab-tabs-dn-tb-ct-cr-bd-cr, var(--_ctm-tabs-dn-tb-ct-cr-bd-cr))
352
+ );
353
+
354
+ border-color: var(
355
+ --_ctm-mob-tabs-dn-tb-ct-cr-br-cr,
356
+ var(--_ctm-tab-tabs-dn-tb-ct-cr-br-cr, var(--_ctm-tabs-dn-tb-ct-cr-br-cr))
357
+ );
358
+
359
+ border-style: var(
360
+ --_ctm-mob-tabs-dn-tb-ct-cr-br-se,
361
+ var(--_ctm-tab-tabs-dn-tb-ct-cr-br-se, var(--_ctm-tabs-dn-tb-ct-cr-br-se))
362
+ );
363
+
364
+ border-width: var(
365
+ --_ctm-mob-tabs-dn-tb-ct-cr-br-wh,
366
+ var(--_ctm-tab-tabs-dn-tb-ct-cr-br-wh, var(--_ctm-tabs-dn-tb-ct-cr-br-wh))
367
+ );
368
+
369
+ border-radius: var(
370
+ --_ctm-mob-tabs-dn-tb-ct-cr-br-rs,
371
+ var(--_ctm-tab-tabs-dn-tb-ct-cr-br-rs, var(--_ctm-tabs-dn-tb-ct-cr-br-rs))
372
+ );
373
+
374
+ box-shadow: var(
375
+ --_ctm-mob-tabs-dn-tb-ct-cr-sw-ae,
376
+ var(--_ctm-tab-tabs-dn-tb-ct-cr-sw-ae, var(--_ctm-tabs-dn-tb-ct-cr-sw-ae))
377
+ )
378
+ var(
379
+ --_ctm-mob-tabs-dn-tb-ct-cr-sw-br,
380
+ var(--_ctm-tab-tabs-dn-tb-ct-cr-sw-br, var(--_ctm-tabs-dn-tb-ct-cr-sw-br))
381
+ )
382
+ var(
383
+ --_ctm-mob-tabs-dn-tb-ct-cr-sw-sd,
384
+ var(--_ctm-tab-tabs-dn-tb-ct-cr-sw-sd, var(--_ctm-tabs-dn-tb-ct-cr-sw-sd))
385
+ )
386
+ var(
387
+ --_ctm-mob-tabs-dn-tb-ct-cr-sw-cr,
388
+ var(--_ctm-tab-tabs-dn-tb-ct-cr-sw-cr, var(--_ctm-tabs-dn-tb-ct-cr-sw-cr))
389
+ );
130
390
  }
131
391
  }
132
392
  }
@@ -13,8 +13,14 @@ $dblclk: '[data-cms-tt-ee-dbl-clkd="true"]';
13
13
  // padding: var(--_lt-pg);
14
14
  // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
15
15
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
16
- width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
17
- margin: var(--_ctm-lt-mn, --_tst-lt-mn);
16
+ width: var(
17
+ --_sf-el-wh-st-mx,
18
+ calc(
19
+ 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
20
+ )
21
+ );
22
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
23
+
18
24
  // min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
19
25
  // height: ;
20
26
  // aspect-ratio: 1 / var(--_sf-aspect-ratio);
@@ -44,21 +50,27 @@ $dblclk: '[data-cms-tt-ee-dbl-clkd="true"]';
44
50
  white-space: normal;
45
51
  unicode-bidi: plaintext;
46
52
  }
53
+ &[data-haslink="true"] {
54
+ cursor: pointer;
55
+ }
47
56
 
48
57
  & > .wrapper {
49
58
  width: 100%;
50
59
  min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
51
60
  // min-height: 50px;
52
61
  background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
53
- padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
54
- border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
55
- border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
56
- border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
57
- border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
62
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
63
+ border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
64
+ border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
65
+ border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
66
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
67
+
58
68
  box-shadow: var(
59
69
  --_show-shadow,
60
- var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
61
- var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
70
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
71
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
72
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
73
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
62
74
  );
63
75
  // height: 100%;
64
76
 
@@ -0,0 +1,27 @@
1
+ import { CommonStyleProperties } from "../../../global/style-properties";
2
+ import { CMSHTMLAttributes } from "../../../global/attributes";
3
+ import { AlignSelfValue, BoxSizingValue, GlobalImageAttributes, GridAreaValue, HeightValue, ImageBuilderAttributes, JustifySelfValue, MaxHeightValue, MaxWidthValue, MinHeightValue, MinWidthValue, PaddingValue } from "../../../global/types";
4
+ import { BuilderAttributes, CMSElementInterface } from "../common";
5
+ export interface AddOrderStyleProperties extends CommonStyleProperties {
6
+ minHeight?: MinHeightValue;
7
+ height?: HeightValue;
8
+ minWidth?: MinWidthValue;
9
+ maxWidth?: MaxWidthValue;
10
+ maxHeight?: MaxHeightValue;
11
+ gridArea?: GridAreaValue;
12
+ boxSizing?: BoxSizingValue;
13
+ padding?: PaddingValue;
14
+ justifySelf?: JustifySelfValue;
15
+ alignSelf?: AlignSelfValue;
16
+ }
17
+ export declare const getDefaultStyles: () => AddOrderStyleProperties;
18
+ export interface CMSButtonInterface extends Omit<CMSElementInterface, "attributes"> {
19
+ attributes: {
20
+ HTML: Pick<CMSHTMLAttributes, GlobalImageAttributes>;
21
+ BUILDER: Pick<BuilderAttributes, ImageBuilderAttributes>;
22
+ CUSTOM: any;
23
+ };
24
+ styles: AddOrderStyleProperties;
25
+ childrenStyles?: CommonStyleProperties;
26
+ content?: string;
27
+ }
@@ -0,0 +1,27 @@
1
+ import { CMSHTMLAttributes } from "../../../global/attributes";
2
+ import { CommonStyleProperties } from "../../../global/style-properties";
3
+ import { AlignSelfValue, BoxSizingValue, GridAreaValue, HeightValue, JustifySelfValue, MaxHeightValue, MaxWidthValue, MinHeightValue, MinWidthValue, PaddingValue, CommonBuilderAttributes, GlobalImageAttributes } from "../../../global/types";
4
+ import { BuilderAttributes, CMSElementInterface } from "../common";
5
+ export interface CreateFormStyleProperties extends CommonStyleProperties {
6
+ minHeight?: MinHeightValue;
7
+ height?: HeightValue;
8
+ minWidth?: MinWidthValue;
9
+ maxWidth?: MaxWidthValue;
10
+ maxHeight?: MaxHeightValue;
11
+ gridArea?: GridAreaValue;
12
+ boxSizing?: BoxSizingValue;
13
+ padding?: PaddingValue;
14
+ justifySelf?: JustifySelfValue;
15
+ alignSelf?: AlignSelfValue;
16
+ }
17
+ export declare const getDefaultStyles: () => CreateFormStyleProperties;
18
+ export interface CMSCreateFormInterface extends Omit<CMSElementInterface, "attributes"> {
19
+ attributes: {
20
+ HTML: Pick<CMSHTMLAttributes, GlobalImageAttributes>;
21
+ BUILDER: Pick<BuilderAttributes, CommonBuilderAttributes>;
22
+ CUSTOM: any;
23
+ };
24
+ styles: CreateFormStyleProperties;
25
+ childrenStyles?: CommonStyleProperties;
26
+ content?: string;
27
+ }
@@ -1,13 +1,19 @@
1
1
  /// <reference types="react" />
2
2
  export declare const FB_GRID_COLS = 12;
3
+ export declare const FB_GRID_MOBILE_COLS = 4;
3
4
  export declare const FB_GRID_ROWS = 1;
4
5
  export declare const FB_CELL_HEIGHT = 70;
5
6
  export declare const FB_CONTAINER_PADDING = 20;
6
7
  export declare const FB_GRID_MIN_WIDTH = 4;
8
+ export declare const FB_GRID_MOBILE_MIN_WIDTH = 2;
7
9
  export declare enum FBModeEnum {
8
10
  Edit = 1,
9
11
  Preview = 2
10
12
  }
13
+ export declare enum ScreenSizeEnums {
14
+ Desktop = "desktop",
15
+ Mobile = "mobile"
16
+ }
11
17
  export declare enum FormComponentTypeEnum {
12
18
  Input = "input",
13
19
  Select = "select",
@@ -82,6 +88,7 @@ export interface FormGridProps {
82
88
  onLayoutChange?: (layout: any) => void;
83
89
  isDraggable?: boolean;
84
90
  children: React.ReactNode;
91
+ isDesktopGrid: boolean;
85
92
  }
86
93
  export interface FormGridLayoutInterface {
87
94
  w: number;
@@ -19,6 +19,17 @@ export interface ImageStyleProperties extends CommonStyleProperties {
19
19
  alignSelf?: AlignSelfValue;
20
20
  }
21
21
  export declare const getDefaultStyles: () => ImageStyleProperties;
22
+ interface CMSCropDataInterface {
23
+ zoom: {
24
+ value: number;
25
+ min: number;
26
+ max: number;
27
+ };
28
+ width: string | number | any;
29
+ height: string | number | any;
30
+ x: string | number | any;
31
+ y: string | number | any;
32
+ }
22
33
  export interface CMSImageInterface extends Omit<CMSElementInterface, "attributes"> {
23
34
  attributes: {
24
35
  HTML: Pick<CMSHTMLAttributes, GlobalImageAttributes>;
@@ -28,4 +39,6 @@ export interface CMSImageInterface extends Omit<CMSElementInterface, "attributes
28
39
  styles: ImageStyleProperties;
29
40
  childrenStyles?: CommonStyleProperties;
30
41
  isMaximized?: boolean;
42
+ cropData?: CMSCropDataInterface;
31
43
  }
44
+ export {};
@@ -0,0 +1,36 @@
1
+ import { CommonStyleProperties } from "../../../global/style-properties";
2
+ import { AlignSelfValue, BoxSizingValue, GridAreaValue, HeightValue, JustifySelfValue, MarginValue, MaxHeightValue, MaxWidthValue, MinHeightValue, MinWidthValue, PaddingValue, CommonBuilderAttributes } from "../../../global/types";
3
+ import { BuilderAttributes, CMSElementInterface } from "../common";
4
+ export interface QuickLinksStyleProperties {
5
+ minHeight?: MinHeightValue;
6
+ height?: HeightValue;
7
+ minWidth?: MinWidthValue;
8
+ maxWidth?: MaxWidthValue;
9
+ maxHeight?: MaxHeightValue;
10
+ boxSizing?: BoxSizingValue;
11
+ padding?: PaddingValue;
12
+ marginLeft?: MarginValue;
13
+ marginTop?: MarginValue;
14
+ marginBottom?: MarginValue;
15
+ marginRight?: MarginValue;
16
+ justifySelf?: JustifySelfValue;
17
+ alignSelf?: AlignSelfValue;
18
+ gridArea?: GridAreaValue;
19
+ }
20
+ export declare const getDefaultQuickLinksStyles: () => QuickLinksStyleProperties;
21
+ export interface CMSQuickLinksInterface extends Omit<CMSElementInterface, "attributes"> {
22
+ attributes: {
23
+ HTML: {
24
+ quickL: Array<{
25
+ platform: "Facebook" | "Instagram" | "Twitter" | "Amazon" | "Website" | "Linked In";
26
+ url: string;
27
+ icon: string;
28
+ name: string;
29
+ }>;
30
+ };
31
+ BUILDER: Pick<BuilderAttributes, CommonBuilderAttributes>;
32
+ CUSTOM: any;
33
+ };
34
+ styles: QuickLinksStyleProperties;
35
+ childrenStyles?: CommonStyleProperties;
36
+ }