@sc-360-v2/storefront-cms-library 0.2.75 → 0.2.77

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 (104) 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 +2 -2
  89. package/dist/types/builder/elements/image/index.d.ts +13 -0
  90. package/dist/types/builder/enums/index.d.ts +5 -1
  91. package/dist/types/builder/index.d.ts +3 -1
  92. package/dist/types/builder/interfaces/global.d.ts +5 -0
  93. package/dist/types/builder/tools/element-edit/addOrder.d.ts +28 -0
  94. package/dist/types/builder/tools/element-edit/createForm.d.ts +15 -0
  95. package/dist/types/builder/tools/element-edit/index.d.ts +3 -1
  96. package/dist/uom-selector.scss +1569 -383
  97. package/dist/variant-picker.scss +1593 -481
  98. package/dist/video.scss +212 -53
  99. package/dist/volume-pricing.scss +775 -196
  100. package/dist/widget.scss +14 -0
  101. package/package.json +1 -1
  102. package/dist/editor-core.scss +0 -537
  103. package/dist/tab-panel.scss +0 -93
  104. package/dist/text-editor.scss +0 -331
package/dist/breadcrumbs.scss CHANGED
@@ -5,8 +5,17 @@ $resizerId: "[data-cms-tool='cms-element-resizer']";
5
5
  $resizeActive: '[data-cms-element-resizer="true"]';
6
6
  [data-div-type="element"] {
7
7
  &[data-element-type="breadcrumbs"] {
8
- width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
9
- margin: var(--_ctm-lt-mn, --_tst-lt-mn);
8
+ width: var(
9
+ --_sf-el-wh-st-mx,
10
+ calc(
11
+ 1% *
12
+ var(
13
+ --_ctm-mob-ele-nw-wh-vl,
14
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
15
+ )
16
+ )
17
+ );
18
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
10
19
 
11
20
  & > div {
12
21
  &.wrapper {
@@ -16,18 +25,47 @@ $resizeActive: '[data-cms-element-resizer="true"]';
16
25
  .horizontal_breadcrumb_wrapper {
17
26
  display: inline-flex;
18
27
  align-items: center;
19
- border-style: var(--_ctm-dn-bd-ad-fl-br-se);
20
- border-width: var(--_ctm-dn-bd-ad-fl-br-wh);
21
- border-color: var(--_ctm-dn-bd-ad-fl-br-cr);
22
- border-radius: var(--_ctm-dn-bd-ad-fl-br-rs);
23
- background-color: var(--_ctm-dn-bd-ad-fl-bd-cr);
24
- padding: var(--_ctm-lt-pg);
28
+ border-style: var(
29
+ --_ctm-mob-dn-bd-ad-fl-br-se,
30
+ var(--_ctm-tab-dn-bd-ad-fl-br-se, var(--_ctm-dn-bd-ad-fl-br-se))
31
+ );
32
+ border-width: var(
33
+ --_ctm-mob-dn-bd-ad-fl-br-wh,
34
+ var(--_ctm-tab-dn-bd-ad-fl-br-wh, var(--_ctm-dn-bd-ad-fl-br-wh))
35
+ );
36
+ border-color: var(
37
+ --_ctm-mob-dn-bd-ad-fl-br-cr,
38
+ var(--_ctm-tab-dn-bd-ad-fl-br-cr, var(--_ctm-dn-bd-ad-fl-br-cr))
39
+ );
40
+ border-radius: var(
41
+ --_ctm-mob-dn-bd-ad-fl-br-rs,
42
+ var(--_ctm-tab-dn-bd-ad-fl-br-rs, var(--_ctm-dn-bd-ad-fl-br-rs))
43
+ );
44
+ background-color: var(
45
+ --_ctm-mob-dn-bd-ad-fl-bd-cr,
46
+ var(--_ctm-tab-dn-bd-ad-fl-bd-cr, var(--_ctm-dn-bd-ad-fl-bd-cr))
47
+ );
48
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
25
49
  box-shadow: var(
26
50
  --_show-shadow,
27
- var(--_ctm-dn-bd-ad-fl-sw-ae) var(--_ctm-dn-bd-ad-fl-sw-br) var(--_ctm-dn-bd-ad-fl-sw-sd)
28
- var(--_ctm-dn-bd-ad-fl-sw-cr)
51
+ var(
52
+ --_ctm-mob-dn-bd-ad-fl-sw-ae,
53
+ var(--_ctm-tab-dn-bd-ad-fl-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae))
54
+ )
55
+ var(
56
+ --_ctm-mob-dn-bd-ad-fl-sw-br,
57
+ var(--_ctm-tab-dn-bd-ad-fl-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br))
58
+ )
59
+ var(
60
+ --_ctm-mob-dn-bd-ad-fl-sw-sd,
61
+ var(--_ctm-tab-dn-bd-ad-fl-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd))
62
+ )
63
+ var(
64
+ --_ctm-mob-dn-bd-ad-fl-sw-cr,
65
+ var(--_ctm-tab-dn-bd-ad-fl-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
66
+ )
29
67
  );
30
- gap: var(--_ctm-lt-im-sg);
68
+ gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
31
69
 
32
70
  &[overflow-item="Scroll"],
33
71
  &[overflow-item="Show More"],
@@ -38,8 +76,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
38
76
 
39
77
  &[overflow-item="Wrap"] {
40
78
  flex-wrap: wrap;
41
- row-gap: var(--_ctm-lt-im-vl-sg);
42
- column-gap: var(--_ctm-lt-im-sg);
79
+ row-gap: var(
80
+ --_ctm-mob-lt-im-vl-sg,
81
+ var(--_ctm-tab-lt-im-vl-sg, var(--_ctm-lt-im-vl-sg))
82
+ );
83
+ column-gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
43
84
  }
44
85
  }
45
86
  .vertical_breadcrumb_wrapper {
@@ -47,28 +88,62 @@ $resizeActive: '[data-cms-element-resizer="true"]';
47
88
  align-items: flex-start;
48
89
  flex-direction: column;
49
90
  height: 120px;
50
- border-style: var(--_ctm-dn-bd-ad-fl-br-se);
51
- border-width: var(--_ctm-dn-bd-ad-fl-br-wh);
52
- border-color: var(--_ctm-dn-bd-ad-fl-br-cr);
53
- border-radius: var(--_ctm-dn-bd-ad-fl-br-rs);
54
- background-color: var(--_ctm-dn-bd-ad-fl-bd-cr);
55
- padding: var(--_ctm-lt-pg);
91
+
92
+ border-style: var(
93
+ --_ctm-mob-dn-bd-ad-fl-br-se,
94
+ var(--_ctm-tab-dn-bd-ad-fl-br-se, var(--_ctm-dn-bd-ad-fl-br-se))
95
+ );
96
+ border-width: var(
97
+ --_ctm-mob-dn-bd-ad-fl-br-wh,
98
+ var(--_ctm-tab-dn-bd-ad-fl-br-wh, var(--_ctm-dn-bd-ad-fl-br-wh))
99
+ );
100
+ border-color: var(
101
+ --_ctm-mob-dn-bd-ad-fl-br-cr,
102
+ var(--_ctm-tab-dn-bd-ad-fl-br-cr, var(--_ctm-dn-bd-ad-fl-br-cr))
103
+ );
104
+ border-radius: var(
105
+ --_ctm-mob-dn-bd-ad-fl-br-rs,
106
+ var(--_ctm-tab-dn-bd-ad-fl-br-rs, var(--_ctm-dn-bd-ad-fl-br-rs))
107
+ );
108
+ background-color: var(
109
+ --_ctm-mob-dn-bd-ad-fl-bd-cr,
110
+ var(--_ctm-tab-dn-bd-ad-fl-bd-cr, var(--_ctm-dn-bd-ad-fl-bd-cr))
111
+ );
112
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
56
113
  box-shadow: var(
57
114
  --_show-shadow,
58
- var(--_ctm-dn-bd-ad-fl-sw-ae) var(--_ctm-dn-bd-ad-fl-sw-br) var(--_ctm-dn-bd-ad-fl-sw-sd)
59
- var(--_ctm-dn-bd-ad-fl-sw-cr)
115
+ var(
116
+ --_ctm-mob-dn-bd-ad-fl-sw-ae,
117
+ var(--_ctm-tab-dn-bd-ad-fl-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae))
118
+ )
119
+ var(
120
+ --_ctm-mob-dn-bd-ad-fl-sw-br,
121
+ var(--_ctm-tab-dn-bd-ad-fl-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br))
122
+ )
123
+ var(
124
+ --_ctm-mob-dn-bd-ad-fl-sw-sd,
125
+ var(--_ctm-tab-dn-bd-ad-fl-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd))
126
+ )
127
+ var(
128
+ --_ctm-mob-dn-bd-ad-fl-sw-cr,
129
+ var(--_ctm-tab-dn-bd-ad-fl-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
130
+ )
60
131
  );
61
132
 
62
133
  &[overflow-item="Scroll"],
63
134
  &[overflow-item="Show More"],
64
135
  &[overflow-item="Collapsed"] {
65
136
  overflow-y: auto;
66
- gap: var(--_ctm-lt-im-sg);
137
+ gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
67
138
  }
139
+
68
140
  &[overflow-item="Wrap"] {
69
141
  flex-wrap: wrap;
70
- row-gap: var(--_ctm-lt-im-vl-sg);
71
- column-gap: var(--_ctm-lt-im-sg);
142
+ row-gap: var(
143
+ --_ctm-mob-lt-im-vl-sg,
144
+ var(--_ctm-tab-lt-im-vl-sg, var(--_ctm-lt-im-vl-sg))
145
+ );
146
+ column-gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
72
147
  }
73
148
 
74
149
  .item_wrapper {
@@ -84,86 +159,281 @@ $resizeActive: '[data-cms-element-resizer="true"]';
84
159
  white-space: nowrap;
85
160
  align-items: center;
86
161
 
87
- background-color: var(--_ctm-dn-or-im-se-bd-cr);
88
- border-color: var(--_ctm-dn-or-im-se-br-cr);
89
- border-radius: var(--_ctm-dn-or-im-se-br-rs);
90
- border-style: var(--_ctm-dn-or-im-se-br-se);
91
- border-width: var(--_ctm-dn-or-im-se-br-wh);
92
- color: var(--_ctm-dn-or-im-se-cr);
93
- font-family: var(--_ctm-dn-or-im-se-ft-fy);
94
- font-size: var(--_ctm-dn-or-im-se-ft-se);
95
- font-style: var(--_ctm-dn-or-im-se-ft-se-ic);
96
- font-weight: var(--_ctm-dn-or-im-se-ft-wt);
97
- line-height: var(--_ctm-dn-or-im-se-le-ht);
98
- letter-spacing: var(--_ctm-dn-or-im-se-lr-sg);
99
- text-align: var(--_ctm-dn-or-im-se-tt-an);
100
- text-decoration: var(--_ctm-dn-or-im-se-ue);
101
- box-shadow: var(--_ctm-dn-or-im-se-sw-ae) var(--_ctm-dn-or-im-se-sw-br)
102
- var(--_ctm-dn-or-im-se-sw-sd) var(--_ctm-dn-or-im-se-sw-cr);
162
+ background-color: var(
163
+ --_ctm-mob-dn-or-im-se-bd-cr,
164
+ var(--_ctm-tab-dn-or-im-se-bd-cr, var(--_ctm-dn-or-im-se-bd-cr))
165
+ );
166
+ border-color: var(
167
+ --_ctm-mob-dn-or-im-se-br-cr,
168
+ var(--_ctm-tab-dn-or-im-se-br-cr, var(--_ctm-dn-or-im-se-br-cr))
169
+ );
170
+ border-radius: var(
171
+ --_ctm-mob-dn-or-im-se-br-rs,
172
+ var(--_ctm-tab-dn-or-im-se-br-rs, var(--_ctm-dn-or-im-se-br-rs))
173
+ );
174
+ border-style: var(
175
+ --_ctm-mob-dn-or-im-se-br-se,
176
+ var(--_ctm-tab-dn-or-im-se-br-se, var(--_ctm-dn-or-im-se-br-se))
177
+ );
178
+ border-width: var(
179
+ --_ctm-mob-dn-or-im-se-br-wh,
180
+ var(--_ctm-tab-dn-or-im-se-br-wh, var(--_ctm-dn-or-im-se-br-wh))
181
+ );
182
+ color: var(
183
+ --_ctm-mob-dn-or-im-se-cr,
184
+ var(--_ctm-tab-dn-or-im-se-cr, var(--_ctm-dn-or-im-se-cr))
185
+ );
186
+ font-family: var(
187
+ --_ctm-mob-dn-or-im-se-ft-fy,
188
+ var(--_ctm-tab-dn-or-im-se-ft-fy, var(--_ctm-dn-or-im-se-ft-fy))
189
+ );
190
+ font-size: var(
191
+ --_ctm-mob-dn-or-im-se-ft-se,
192
+ var(--_ctm-tab-dn-or-im-se-ft-se, var(--_ctm-dn-or-im-se-ft-se))
193
+ );
194
+ font-style: var(
195
+ --_ctm-mob-dn-or-im-se-ft-se-ic,
196
+ var(--_ctm-tab-dn-or-im-se-ft-se-ic, var(--_ctm-dn-or-im-se-ft-se-ic))
197
+ );
198
+ font-weight: var(
199
+ --_ctm-mob-dn-or-im-se-ft-wt,
200
+ var(--_ctm-tab-dn-or-im-se-ft-wt, var(--_ctm-dn-or-im-se-ft-wt))
201
+ );
202
+ line-height: var(
203
+ --_ctm-mob-dn-or-im-se-le-ht,
204
+ var(--_ctm-tab-dn-or-im-se-le-ht, var(--_ctm-dn-or-im-se-le-ht))
205
+ );
206
+ letter-spacing: var(
207
+ --_ctm-mob-dn-or-im-se-lr-sg,
208
+ var(--_ctm-tab-dn-or-im-se-lr-sg, var(--_ctm-dn-or-im-se-lr-sg))
209
+ );
210
+ text-align: var(
211
+ --_ctm-mob-dn-or-im-se-tt-an,
212
+ var(--_ctm-tab-dn-or-im-se-tt-an, var(--_ctm-dn-or-im-se-tt-an))
213
+ );
214
+ text-decoration: var(
215
+ --_ctm-mob-dn-or-im-se-ue,
216
+ var(--_ctm-tab-dn-or-im-se-ue, var(--_ctm-dn-or-im-se-ue))
217
+ );
218
+ box-shadow: var(
219
+ --_ctm-mob-dn-or-im-se-sw-ae,
220
+ var(--_ctm-tab-dn-or-im-se-sw-ae, var(--_ctm-dn-or-im-se-sw-ae))
221
+ )
222
+ var(
223
+ --_ctm-mob-dn-or-im-se-sw-br,
224
+ var(--_ctm-tab-dn-or-im-se-sw-br, var(--_ctm-dn-or-im-se-sw-br))
225
+ )
226
+ var(
227
+ --_ctm-mob-dn-or-im-se-sw-sd,
228
+ var(--_ctm-tab-dn-or-im-se-sw-sd, var(--_ctm-dn-or-im-se-sw-sd))
229
+ )
230
+ var(
231
+ --_ctm-mob-dn-or-im-se-sw-cr,
232
+ var(--_ctm-tab-dn-or-im-se-sw-cr, var(--_ctm-dn-or-im-se-sw-cr))
233
+ );
103
234
 
104
235
  .icon {
105
236
  svg {
106
- width: var(--_ctm-dn-or-im-se-in-se);
107
- height: var(--_ctm-dn-or-im-se-in-se);
237
+ width: var(
238
+ --_ctm-mob-dn-or-im-se-in-se,
239
+ var(--_ctm-tab-dn-or-im-se-in-se, var(--_ctm-dn-or-im-se-in-se))
240
+ );
241
+ height: var(
242
+ --_ctm-mob-dn-or-im-se-in-se,
243
+ var(--_ctm-tab-dn-or-im-se-in-se, var(--_ctm-dn-or-im-se-in-se))
244
+ );
108
245
  path {
109
- stroke: var(--_ctm-dn-or-im-se-in-c1);
246
+ stroke: var(
247
+ --_ctm-mob-dn-or-im-se-in-c1,
248
+ var(--_ctm-tab-dn-or-im-se-in-c1, var(--_ctm-dn-or-im-se-in-c1))
249
+ );
110
250
  }
111
251
  }
112
252
  }
113
253
 
114
254
  &:first-child {
115
- background-color: var(--_ctm-dn-he-pe-im-se-bd-cr);
116
- border-color: var(--_ctm-dn-he-pe-im-se-br-cr);
117
- border-radius: var(--_ctm-dn-he-pe-im-se-br-rs);
118
- border-style: var(--_ctm-dn-he-pe-im-se-br-se);
119
- border-width: var(--_ctm-dn-he-pe-im-se-br-wh);
120
- color: var(--_ctm-dn-he-pe-im-se-cr);
121
- font-family: var(--_ctm-dn-he-pe-im-se-ft-fy);
122
- font-size: var(--_ctm-dn-he-pe-im-se-ft-se);
123
- font-style: var(--_ctm-dn-he-pe-im-se-ft-se-ic);
124
- font-weight: var(--_ctm-dn-he-pe-im-se-ft-wt);
125
- line-height: var(--_ctm-dn-he-pe-im-se-le-ht);
126
- letter-spacing: var(--_ctm-dn-he-pe-im-se-lr-sg);
127
- text-align: var(--_ctm-dn-he-pe-im-se-tt-an);
128
- text-decoration: var(--_ctm-dn-he-pe-im-se-ue);
129
- box-shadow: var(--_ctm-dn-he-pe-im-se-sw-ae) var(--_ctm-dn-he-pe-im-se-sw-br)
130
- var(--_ctm-dn-he-pe-im-se-sw-sd) var(--_ctm-dn-he-pe-im-se-sw-cr);
255
+ background-color: var(
256
+ --_ctm-mob-dn-he-pe-im-se-bd-cr,
257
+ var(--_ctm-tab-dn-he-pe-im-se-bd-cr, var(--_ctm-dn-he-pe-im-se-bd-cr))
258
+ );
259
+ border-color: var(
260
+ --_ctm-mob-dn-he-pe-im-se-br-cr,
261
+ var(--_ctm-tab-dn-he-pe-im-se-br-cr, var(--_ctm-dn-he-pe-im-se-br-cr))
262
+ );
263
+ border-radius: var(
264
+ --_ctm-mob-dn-he-pe-im-se-br-rs,
265
+ var(--_ctm-tab-dn-he-pe-im-se-br-rs, var(--_ctm-dn-he-pe-im-se-br-rs))
266
+ );
267
+ border-style: var(
268
+ --_ctm-mob-dn-he-pe-im-se-br-se,
269
+ var(--_ctm-tab-dn-he-pe-im-se-br-se, var(--_ctm-dn-he-pe-im-se-br-se))
270
+ );
271
+ border-width: var(
272
+ --_ctm-mob-dn-he-pe-im-se-br-wh,
273
+ var(--_ctm-tab-dn-he-pe-im-se-br-wh, var(--_ctm-dn-he-pe-im-se-br-wh))
274
+ );
275
+ color: var(
276
+ --_ctm-mob-dn-he-pe-im-se-cr,
277
+ var(--_ctm-tab-dn-he-pe-im-se-cr, var(--_ctm-dn-he-pe-im-se-cr))
278
+ );
279
+ font-family: var(
280
+ --_ctm-mob-dn-he-pe-im-se-ft-fy,
281
+ var(--_ctm-tab-dn-he-pe-im-se-ft-fy, var(--_ctm-dn-he-pe-im-se-ft-fy))
282
+ );
283
+ font-size: var(
284
+ --_ctm-mob-dn-he-pe-im-se-ft-se,
285
+ var(--_ctm-tab-dn-he-pe-im-se-ft-se, var(--_ctm-dn-he-pe-im-se-ft-se))
286
+ );
287
+ font-style: var(
288
+ --_ctm-mob-dn-he-pe-im-se-ft-se-ic,
289
+ var(--_ctm-tab-dn-he-pe-im-se-ft-se-ic, var(--_ctm-dn-he-pe-im-se-ft-se-ic))
290
+ );
291
+ font-weight: var(
292
+ --_ctm-mob-dn-he-pe-im-se-ft-wt,
293
+ var(--_ctm-tab-dn-he-pe-im-se-ft-wt, var(--_ctm-dn-he-pe-im-se-ft-wt))
294
+ );
295
+ line-height: var(
296
+ --_ctm-mob-dn-he-pe-im-se-le-ht,
297
+ var(--_ctm-tab-dn-he-pe-im-se-le-ht, var(--_ctm-dn-he-pe-im-se-le-ht))
298
+ );
299
+ letter-spacing: var(
300
+ --_ctm-mob-dn-he-pe-im-se-lr-sg,
301
+ var(--_ctm-tab-dn-he-pe-im-se-lr-sg, var(--_ctm-dn-he-pe-im-se-lr-sg))
302
+ );
303
+ text-align: var(
304
+ --_ctm-mob-dn-he-pe-im-se-tt-an,
305
+ var(--_ctm-tab-dn-he-pe-im-se-tt-an, var(--_ctm-dn-he-pe-im-se-tt-an))
306
+ );
307
+ text-decoration: var(
308
+ --_ctm-mob-dn-he-pe-im-se-ue,
309
+ var(--_ctm-tab-dn-he-pe-im-se-ue, var(--_ctm-dn-he-pe-im-se-ue))
310
+ );
311
+ box-shadow: var(
312
+ --_ctm-mob-dn-he-pe-im-se-sw-ae,
313
+ var(--_ctm-tab-dn-he-pe-im-se-sw-ae, var(--_ctm-dn-he-pe-im-se-sw-ae))
314
+ )
315
+ var(
316
+ --_ctm-mob-dn-he-pe-im-se-sw-br,
317
+ var(--_ctm-tab-dn-he-pe-im-se-sw-br, var(--_ctm-dn-he-pe-im-se-sw-br))
318
+ )
319
+ var(
320
+ --_ctm-mob-dn-he-pe-im-se-sw-sd,
321
+ var(--_ctm-tab-dn-he-pe-im-se-sw-sd, var(--_ctm-dn-he-pe-im-se-sw-sd))
322
+ )
323
+ var(
324
+ --_ctm-mob-dn-he-pe-im-se-sw-cr,
325
+ var(--_ctm-tab-dn-he-pe-im-se-sw-cr, var(--_ctm-dn-he-pe-im-se-sw-cr))
326
+ );
131
327
 
132
328
  .icon {
133
329
  svg {
134
- width: var(--_ctm-dn-he-pe-im-se-in-se);
135
- height: var(--_ctm-dn-he-pe-im-se-in-se);
330
+ width: var(
331
+ --_ctm-mob-dn-he-pe-im-se-in-se,
332
+ var(--_ctm-tab-dn-he-pe-im-se-in-se, var(--_ctm-dn-he-pe-im-se-in-se))
333
+ );
334
+ height: var(
335
+ --_ctm-mob-dn-he-pe-im-se-in-se,
336
+ var(--_ctm-tab-dn-he-pe-im-se-in-se, var(--_ctm-dn-he-pe-im-se-in-se))
337
+ );
136
338
  path {
137
- stroke: var(--_ctm-dn-he-pe-im-se-in-c1);
339
+ stroke: var(
340
+ --_ctm-mob-dn-he-pe-im-se-in-c1,
341
+ var(--_ctm-tab-dn-he-pe-im-se-in-c1, var(--_ctm-dn-he-pe-im-se-in-c1))
342
+ );
138
343
  }
139
344
  }
140
345
  }
141
346
  }
142
347
 
143
348
  &:last-child {
144
- background-color: var(--_ctm-dn-ct-pe-im-se-bd-cr);
145
- border-color: var(--_ctm-dn-ct-pe-im-se-br-cr);
146
- border-radius: var(--_ctm-dn-ct-pe-im-se-br-rs);
147
- border-style: var(--_ctm-dn-ct-pe-im-se-br-se);
148
- border-width: var(--_ctm-dn-ct-pe-im-se-br-wh);
149
- color: var(--_ctm-dn-ct-pe-im-se-cr);
150
- font-family: var(--_ctm-dn-ct-pe-im-se-ft-fy);
151
- font-size: var(--_ctm-dn-ct-pe-im-se-ft-se);
152
- font-style: var(--_ctm-dn-ct-pe-im-se-ft-se-ic);
153
- font-weight: var(--_ctm-dn-ct-pe-im-se-ft-wt);
154
- line-height: var(--_ctm-dn-ct-pe-im-se-le-ht);
155
- letter-spacing: var(--_ctm-dn-ct-pe-im-se-lr-sg);
156
- text-align: var(--_ctm-dn-ct-pe-im-se-tt-an);
157
- text-decoration: var(--_ctm-dn-ct-pe-im-se-ue);
158
- box-shadow: var(--_ctm-dn-ct-pe-im-se-sw-ae) var(--_ctm-dn-ct-pe-im-se-sw-sd)
159
- var(--_ctm-dn-he-pe-im-se-sw-sd) var(--_ctm-dn-ct-pe-im-se-sw-cr);
349
+ background-color: var(
350
+ --_ctm-mob-dn-ct-pe-im-se-bd-cr,
351
+ var(--_ctm-tab-dn-ct-pe-im-se-bd-cr, var(--_ctm-dn-ct-pe-im-se-bd-cr))
352
+ );
353
+ border-color: var(
354
+ --_ctm-mob-dn-ct-pe-im-se-br-cr,
355
+ var(--_ctm-tab-dn-ct-pe-im-se-br-cr, var(--_ctm-dn-ct-pe-im-se-br-cr))
356
+ );
357
+ border-radius: var(
358
+ --_ctm-mob-dn-ct-pe-im-se-br-rs,
359
+ var(--_ctm-tab-dn-ct-pe-im-se-br-rs, var(--_ctm-dn-ct-pe-im-se-br-rs))
360
+ );
361
+ border-style: var(
362
+ --_ctm-mob-dn-ct-pe-im-se-br-se,
363
+ var(--_ctm-tab-dn-ct-pe-im-se-br-se, var(--_ctm-dn-ct-pe-im-se-br-se))
364
+ );
365
+ border-width: var(
366
+ --_ctm-mob-dn-ct-pe-im-se-br-wh,
367
+ var(--_ctm-tab-dn-ct-pe-im-se-br-wh, var(--_ctm-dn-ct-pe-im-se-br-wh))
368
+ );
369
+ color: var(
370
+ --_ctm-mob-dn-ct-pe-im-se-cr,
371
+ var(--_ctm-tab-dn-ct-pe-im-se-cr, var(--_ctm-dn-ct-pe-im-se-cr))
372
+ );
373
+ font-family: var(
374
+ --_ctm-mob-dn-ct-pe-im-se-ft-fy,
375
+ var(--_ctm-tab-dn-ct-pe-im-se-ft-fy, var(--_ctm-dn-ct-pe-im-se-ft-fy))
376
+ );
377
+ font-size: var(
378
+ --_ctm-mob-dn-ct-pe-im-se-ft-se,
379
+ var(--_ctm-tab-dn-ct-pe-im-se-ft-se, var(--_ctm-dn-ct-pe-im-se-ft-se))
380
+ );
381
+ font-style: var(
382
+ --_ctm-mob-dn-ct-pe-im-se-ft-se-ic,
383
+ var(--_ctm-tab-dn-ct-pe-im-se-ft-se-ic, var(--_ctm-dn-ct-pe-im-se-ft-se-ic))
384
+ );
385
+ font-weight: var(
386
+ --_ctm-mob-dn-ct-pe-im-se-ft-wt,
387
+ var(--_ctm-tab-dn-ct-pe-im-se-ft-wt, var(--_ctm-dn-ct-pe-im-se-ft-wt))
388
+ );
389
+ line-height: var(
390
+ --_ctm-mob-dn-ct-pe-im-se-le-ht,
391
+ var(--_ctm-tab-dn-ct-pe-im-se-le-ht, var(--_ctm-dn-ct-pe-im-se-le-ht))
392
+ );
393
+ letter-spacing: var(
394
+ --_ctm-mob-dn-ct-pe-im-se-lr-sg,
395
+ var(--_ctm-tab-dn-ct-pe-im-se-lr-sg, var(--_ctm-dn-ct-pe-im-se-lr-sg))
396
+ );
397
+ text-align: var(
398
+ --_ctm-mob-dn-ct-pe-im-se-tt-an,
399
+ var(--_ctm-tab-dn-ct-pe-im-se-tt-an, var(--_ctm-dn-ct-pe-im-se-tt-an))
400
+ );
401
+ text-decoration: var(
402
+ --_ctm-mob-dn-ct-pe-im-se-ue,
403
+ var(--_ctm-tab-dn-ct-pe-im-se-ue, var(--_ctm-dn-ct-pe-im-se-ue))
404
+ );
405
+ box-shadow: var(
406
+ --_ctm-mob-dn-ct-pe-im-se-sw-ae,
407
+ var(--_ctm-tab-dn-ct-pe-im-se-sw-ae, var(--_ctm-dn-ct-pe-im-se-sw-ae))
408
+ )
409
+ var(
410
+ --_ctm-mob-dn-ct-pe-im-se-sw-sd,
411
+ var(--_ctm-tab-dn-ct-pe-im-se-sw-sd, var(--_ctm-dn-ct-pe-im-se-sw-sd))
412
+ )
413
+ var(
414
+ --_ctm-mob-dn-he-pe-im-se-sw-sd,
415
+ var(--_ctm-tab-dn-he-pe-im-se-sw-sd, var(--_ctm-dn-he-pe-im-se-sw-sd))
416
+ )
417
+ var(
418
+ --_ctm-mob-dn-ct-pe-im-se-sw-cr,
419
+ var(--_ctm-tab-dn-ct-pe-im-se-sw-cr, var(--_ctm-dn-ct-pe-im-se-sw-cr))
420
+ );
160
421
 
161
422
  .icon {
162
423
  svg {
163
- width: var(--_ctm-dn-ct-pe-im-se-in-se);
164
- height: var(--_ctm-dn-ct-pe-im-se-in-se);
424
+ width: var(
425
+ --_ctm-mob-dn-ct-pe-im-se-in-se,
426
+ var(--_ctm-tab-dn-ct-pe-im-se-in-se, var(--_ctm-dn-ct-pe-im-se-in-se))
427
+ );
428
+ height: var(
429
+ --_ctm-mob-dn-ct-pe-im-se-in-se,
430
+ var(--_ctm-tab-dn-ct-pe-im-se-in-se, var(--_ctm-dn-ct-pe-im-se-in-se))
431
+ );
165
432
  path {
166
- stroke: var(--_ctm-dn-ct-pe-im-se-in-c1);
433
+ stroke: var(
434
+ --_ctm-mob-dn-ct-pe-im-se-in-c1,
435
+ var(--_ctm-tab-dn-ct-pe-im-se-in-c1, var(--_ctm-dn-ct-pe-im-se-in-c1))
436
+ );
167
437
  }
168
438
  }
169
439
  }
@@ -173,23 +443,44 @@ $resizeActive: '[data-cms-element-resizer="true"]';
173
443
  .separator {
174
444
  .icon {
175
445
  svg {
176
- width: var(--_ctm-dn-im-sr-in-se);
177
- height: var(--_ctm-dn-im-sr-in-se);
446
+ width: var(
447
+ --_ctm-mob-dn-im-sr-in-se,
448
+ var(--_ctm-tab-dn-im-sr-in-se, var(--_ctm-dn-im-sr-in-se))
449
+ );
450
+ height: var(
451
+ --_ctm-mob-dn-im-sr-in-se,
452
+ var(--_ctm-tab-dn-im-sr-in-se, var(--_ctm-dn-im-sr-in-se))
453
+ );
178
454
  path {
179
- stroke: var(--_ctm-dn-im-sr-in-c1);
455
+ stroke: var(
456
+ --_ctm-mob-dn-im-sr-in-c1,
457
+ var(--_ctm-tab-dn-im-sr-in-c1, var(--_ctm-dn-im-sr-in-c1))
458
+ );
180
459
  }
181
460
  }
182
461
  }
183
462
  }
184
463
 
185
464
  .collapse_btn {
186
- background-color: var(--_ctm-dn-ed-in-bd-cr);
465
+ background-color: var(
466
+ --_ctm-mob-dn-ed-in-bd-cr,
467
+ var(--_ctm-tab-dn-ed-in-bd-cr, var(--_ctm-dn-ed-in-bd-cr))
468
+ );
187
469
  .icon {
188
470
  svg {
189
- width: var(--_ctm-dn-ed-in-in-se);
190
- height: var(--_ctm-dn-ed-in-in-se);
471
+ width: var(
472
+ --_ctm-mob-dn-ed-in-in-se,
473
+ var(--_ctm-tab-dn-ed-in-in-se, var(--_ctm-dn-ed-in-in-se))
474
+ );
475
+ height: var(
476
+ --_ctm-mob-dn-ed-in-in-se,
477
+ var(--_ctm-tab-dn-ed-in-in-se, var(--_ctm-dn-ed-in-in-se))
478
+ );
191
479
  path {
192
- stroke: var(--_ctm-dn-ed-in-in-c1);
480
+ stroke: var(
481
+ --_ctm-mob-dn-ed-in-in-c1,
482
+ var(--_ctm-tab-dn-ed-in-in-c1, var(--_ctm-dn-ed-in-in-c1))
483
+ );
193
484
  }
194
485
  }
195
486
  }