@sc-360-v2/storefront-cms-library 0.4.50 → 0.4.52

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 (39) hide show
  1. package/dist/allocationDetails.scss +2253 -2247
  2. package/dist/builder.js +1 -1
  3. package/dist/cart-details.scss +3207 -3207
  4. package/dist/cart.scss +271 -269
  5. package/dist/cartAttributes.scss +932 -935
  6. package/dist/checkout.scss +6496 -6460
  7. package/dist/dropdownTemplate.scss +4 -1
  8. package/dist/filters.scss +2450 -2418
  9. package/dist/functions.scss +91 -1
  10. package/dist/icon-list.scss +277 -268
  11. package/dist/language-selector.scss +702 -528
  12. package/dist/layouter.scss +307 -294
  13. package/dist/login.scss +1605 -1473
  14. package/dist/menu-v2.scss +752 -730
  15. package/dist/my-templates.scss +464 -463
  16. package/dist/myTemplates.scss +5 -5
  17. package/dist/order-status.scss +1877 -1856
  18. package/dist/product-image-allocation.scss +1365 -0
  19. package/dist/product-image.scss +2 -1
  20. package/dist/product-sizechart.scss +1826 -1826
  21. package/dist/profile.scss +23 -20
  22. package/dist/repeater-embla-controls.scss +6 -0
  23. package/dist/repeater.scss +920 -915
  24. package/dist/search.scss +361 -296
  25. package/dist/section.scss +210 -209
  26. package/dist/static-global.scss +5 -0
  27. package/dist/types/builder/tools/element-edit/bundle.d.ts +13 -2
  28. package/dist/types/builder/tools/element-edit/cart.d.ts +1 -0
  29. package/dist/types/builder/tools/element-edit/common.d.ts +5 -0
  30. package/dist/types/builder/tools/element-edit/icon-list.d.ts +17 -0
  31. package/dist/types/builder/tools/element-edit/language-menu.d.ts +1 -0
  32. package/dist/types/builder/tools/element-edit/login.d.ts +1 -0
  33. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +39 -0
  34. package/dist/types/builder/tools/element-edit/repeater.d.ts +2 -0
  35. package/dist/types/builder/tools/element-edit/resetPassword.d.ts +2 -1
  36. package/dist/types/builder/tools/element-edit/search.d.ts +28 -0
  37. package/dist/types/builder/tools/element-edit/userElements.d.ts +48 -88
  38. package/dist/user-elements.scss +2555 -2471
  39. package/package.json +1 -1
@@ -1,294 +1,307 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./repeater-embla-controls.scss" as *;
4
- $childItemSelector: '[data-element-type="layouter-item"]';
5
- $sliderControlDragging: "[flex-slider-control-moving='true']";
6
- [data-div-type="element"] {
7
- &[data-element-type="layouter"] {
8
- // width: var(--_sf-con-nw-wh);
9
- // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
10
- width: calc(
11
- 1% *
12
- var(
13
- --_ctm-mob-lay-ele-nw-wh-vl,
14
- var(--_ctm-tab-lay-ele-nw-wh-vl, var(--_ctm-lay-ele-nw-wh-vl, auto))
15
- )
16
- );
17
- // width: 100%;
18
- // height: var(--_ctm-con-lt-ht);
19
- margin: var(
20
- --_ctm-mob-lay-lt-mn,
21
- var(--_ctm-tab-lay-lt-mn, var(--_ctm-lay-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))))
22
- );
23
- background-color: var(
24
- --_ctm-mob-lay-dn-bd-cr,
25
- var(--_ctm-tab-lay-dn-bd-cr, var(--_ctm-lay-dn-bd-cr))
26
- );
27
- background-image: var(
28
- --_ctm-mob-lay-dn-bd-ie,
29
- var(--_ctm-tab-lay-dn-bd-ie, var(--_ctm-lay-dn-bd-ie))
30
- );
31
- background-attachment: var(
32
- --_ctm-mob-lay-dn-bd-at,
33
- var(--_ctm-tab-lay-dn-bd-at, var(--_ctm-lay-dn-bd-at))
34
- );
35
- background-position: var(
36
- --_ctm-mob-lay-dn-bd-pn,
37
- var(--_ctm-tab-lay-dn-bd-pn, var(--_ctm-lay-dn-bd-pn))
38
- );
39
- background-repeat: var(
40
- --_ctm-mob-lay-dn-bd-rt,
41
- var(--_ctm-tab-lay-dn-bd-rt, var(--_ctm-lay-dn-bd-rt))
42
- );
43
- background-size: var(
44
- --_ctm-mob-lay-dn-bd-se,
45
- var(--_ctm-tab-lay-dn-bd-se, var(--_ctm-lay-dn-bd-se))
46
- );
47
- border-radius: var(
48
- --_ctm-mob-lay-dn-br-rs,
49
- var(--_ctm-tab-lay-dn-br-rs, var(--_ctm-lay-dn-br-rs))
50
- );
51
- border-color: var(
52
- --_ctm-mob-lay-dn-br-cr,
53
- var(--_ctm-tab-lay-dn-br-cr, var(--_ctm-lay-dn-br-cr))
54
- );
55
- border-style: var(
56
- --_ctm-mob-lay-dn-br-se,
57
- var(--_ctm-tab-lay-dn-br-se, var(--_ctm-lay-dn-br-se))
58
- );
59
- border-width: var(
60
- --_ctm-mob-lay-dn-br-wh,
61
- var(--_ctm-tab-lay-dn-br-wh, var(--_ctm-lay-dn-br-wh))
62
- );
63
- box-shadow: var(
64
- --_hover-show-shadow,
65
- var(
66
- --_sf-hr-bx-sw,
67
- var(
68
- --_show-shadow,
69
- var(--_ctm-mob-dn-dt-se-sw-ae, var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae)))
70
- var(
71
- --_ctm-mob-dn-dt-se-sw-br,
72
- var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
73
- )
74
- var(
75
- --_ctm-mob-dn-dt-se-sw-sd,
76
- var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
77
- )
78
- var(
79
- --_ctm-mob-dn-dt-se-sw-cr,
80
- var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
81
- )
82
- )
83
- )
84
- );
85
- padding: var(--_ctm-mob-lay-lt-pg, var(--_ctm-tab-lay-lt-pg, var(--_ctm-lay-lt-pg)));
86
-
87
- &.grd {
88
- & > div {
89
- &.wrapper {
90
- width: 100%;
91
- display: grid;
92
- grid-template-columns: repeat(
93
- auto-fit,
94
- minmax(
95
- var(
96
- --_ctm-mob-lay-lt-mn-cn-wh,
97
- var(--_ctm-tab-lay-lt-mn-cn-wh, var(--_ctm-lay-lt-mn-cn-wh))
98
- ),
99
- 1fr
100
- )
101
- );
102
- grid-template-rows: repeat(
103
- auto-fit,
104
- minmax(
105
- var(
106
- --_ctm-mob-lay-lt-mn-rw-ht,
107
- var(--_ctm-tab-lay-lt-mn-rw-ht, var(--_ctm-lay-lt-mn-rw-ht))
108
- ),
109
- 1fr
110
- )
111
- );
112
-
113
- div {
114
- &#{$childItemSelector} {
115
- width: 100%;
116
- }
117
- }
118
-
119
- @media only screen and (max-width: 767px) {
120
- grid-template-rows: auto;
121
- }
122
- }
123
- }
124
- }
125
-
126
- &.sld {
127
- &:is(:not(#{$sliderControlDragging} *)) {
128
- overflow: clip;
129
- }
130
- // overflow: clip;
131
- height: auto;
132
- min-height: 50px !important;
133
- --_sf-sl-ct-ic-dt-at-cl: var(
134
- --_ctm-mob-lay-lt-cl-ae-cr,
135
- var(--_ctm-tab-lay-lt-cl-ae-cr, var(--_ctm-lay-lt-cl-ae-cr))
136
- );
137
- // &:is([data-control-type="1"]) {
138
- // @include CMSRepeaterEmblaControlStyles(1);
139
- // }
140
- @for $i from 1 through 3 {
141
- &:is([data-control-type="#{$i}"]) {
142
- @if ($i == 3) {
143
- overflow-y: visible;
144
- }
145
- @include CMSRepeaterEmblaControlStyles($i);
146
- }
147
- }
148
-
149
- & > div {
150
- &.wrapper {
151
- &.embla__container {
152
- display: flex !important;
153
- --_embla-slide-space: var(
154
- --_ctm-mob-lay-lt-im-gp,
155
- var(--_ctm-tab-lay-lt-im-gp, var(--_ctm-lay-lt-im-gp))
156
- );
157
- --_embla-col-count: var(
158
- --_ctm-mob-lay-lt-st-is-pr-se,
159
- var(--_ctm-tab-lay-lt-st-is-pr-se, var(--_ctm-lay-lt-st-is-pr-se, 3))
160
- );
161
- // gap: 0px !important;
162
- // margin-left: calc(var(--_embla-slide-space, 10px) * -1);
163
- width: 100%;
164
- height: 100%;
165
- & > .embla__slide {
166
- --_sf-cl-vl: calc(
167
- (100% / var(--_embla-col-count, 3)) -
168
- (
169
- ((var(--_embla-col-count, 3) - 1) * (var(--_embla-slide-space, 10px))) /
170
- (var(--_embla-col-count, 3))
171
- )
172
- );
173
- // flex: 0 0 calc(var(--_embla-slide-width, 100%) / var(--_embla-col-count, 3));
174
- // width: calc(var(--_embla-slide-width, 100%) / var(--_embla-col-count, 3));
175
- flex: 0 0 var(--_sf-cl-vl);
176
- width: var(--_sf-cl-vl);
177
- // grid-template-rows: minmax(
178
- // max(0.5px, 0.09375 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))),
179
- // auto
180
- // );
181
-
182
- grid-template-rows: minmax(50px, auto);
183
- grid-template-columns: minmax(0px, 1fr);
184
- // padding-left: calc(var(--_embla-slide-space, 10px) * 1);
185
- // padding-left: 0px !important;
186
-
187
- img {
188
- width: 100%;
189
- }
190
- }
191
- }
192
- }
193
- }
194
- }
195
- & > div {
196
- &.wrapper {
197
- width: 100%;
198
- gap: var(
199
- --_ctm-mob-lay-lt-im-gp,
200
- var(--_ctm-tab-lay-lt-im-gp, var(--_ctm-lay-lt-im-gp, 0px))
201
- );
202
- // width: 100%;
203
- // grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
204
- // grid-auto-rows: minmax(100px, 1fr);
205
- }
206
- }
207
-
208
- &.rws {
209
- & > .wrapper {
210
- // grid-template-columns: 100%;
211
- // grid-template-rows:
212
- // minmax(
213
- // clamp(
214
- // 0.5px,
215
- // calc(
216
- // (18.918014128728416 * var(--_cms-playground-unit)) -
217
- // (0.18918014128728416 * var(--_cms-scrollbar-width))
218
- // ),
219
- // calc(0.18918014128728416 * var(--_cms-section-max-width))
220
- // ),
221
- // auto
222
- // )
223
- // minmax(
224
- // clamp(
225
- // 0.5px,
226
- // calc(
227
- // (18.918014128728416 * var(--_cms-playground-unit)) -
228
- // (0.18918014128728416 * var(--_cms-scrollbar-width))
229
- // ),
230
- // calc(0.18918014128728416 * var(--_cms-section-max-width))
231
- // ),
232
- // auto
233
- // )
234
- // minmax(
235
- // clamp(
236
- // 0.5px,
237
- // calc(
238
- // (18.918014128728416 * var(--_cms-playground-unit)) -
239
- // (0.18918014128728416 * var(--_cms-scrollbar-width))
240
- // ),
241
- // calc(0.18918014128728416 * var(--_cms-section-max-width))
242
- // ),
243
- // auto
244
- // )
245
- // minmax(
246
- // clamp(
247
- // 0.5px,
248
- // calc(
249
- // (18.918014128728416 * var(--_cms-playground-unit)) -
250
- // (0.18918014128728416 * var(--_cms-scrollbar-width))
251
- // ),
252
- // calc(0.18918014128728416 * var(--_cms-section-max-width))
253
- // ),
254
- // auto
255
- // );
256
- & > div {
257
- &#{$childItemSelector} {
258
- width: 100%;
259
- }
260
- }
261
- }
262
- }
263
-
264
- &.cln {
265
- &[data-view-state="auto"] {
266
- height: var(--_ctm-mob-lay-lt-ht, var(--_ctm-tab-lay-lt-ht, var(--_ctm-lay-lt-ht)));
267
- }
268
- & > .wrapper {
269
- height: 100%;
270
- & > div {
271
- &#{$childItemSelector} {
272
- width: 100%;
273
- // align-self: flex-start;
274
- }
275
- }
276
- }
277
- }
278
-
279
- // &[data-view-state="full"] {
280
- // width: auto;
281
- // margin: 0;
282
- // justify-self: stretch !important;
283
- // align-self: stretch !important;
284
- // cursor: auto;
285
-
286
- // & > div {
287
- // &[data-div-type="wrapper__layer"] {
288
- // --_sf-vt-zz: visible;
289
- // --_sf-op-zz: 1;
290
- // }
291
- // }
292
- // }
293
- }
294
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+ @use "./repeater-embla-controls.scss" as *;
5
+ $childItemSelector: '[data-element-type="layouter-item"]';
6
+ $sliderControlDragging: "[flex-slider-control-moving='true']";
7
+ [data-div-type="element"] {
8
+ &[data-element-type="layouter"] {
9
+ // width: var(--_sf-con-nw-wh);
10
+ // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
11
+ width: calc(
12
+ 1% *
13
+ var(
14
+ --_ctm-mob-lay-ele-nw-wh-vl,
15
+ var(--_ctm-tab-lay-ele-nw-wh-vl, var(--_ctm-lay-ele-nw-wh-vl, auto))
16
+ )
17
+ );
18
+ // width: 100%;
19
+ // height: var(--_ctm-con-lt-ht);
20
+ margin: var(
21
+ --_ctm-mob-lay-lt-mn,
22
+ var(--_ctm-tab-lay-lt-mn, var(--_ctm-lay-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))))
23
+ );
24
+ background-color: var(
25
+ --_ctm-mob-lay-dn-bd-cr,
26
+ var(--_ctm-tab-lay-dn-bd-cr, var(--_ctm-lay-dn-bd-cr))
27
+ );
28
+ background-image: var(
29
+ --_ctm-mob-lay-dn-bd-ie,
30
+ var(--_ctm-tab-lay-dn-bd-ie, var(--_ctm-lay-dn-bd-ie))
31
+ );
32
+ background-attachment: var(
33
+ --_ctm-mob-lay-dn-bd-at,
34
+ var(--_ctm-tab-lay-dn-bd-at, var(--_ctm-lay-dn-bd-at))
35
+ );
36
+ background-position: var(
37
+ --_ctm-mob-lay-dn-bd-pn,
38
+ var(--_ctm-tab-lay-dn-bd-pn, var(--_ctm-lay-dn-bd-pn))
39
+ );
40
+ background-repeat: var(
41
+ --_ctm-mob-lay-dn-bd-rt,
42
+ var(--_ctm-tab-lay-dn-bd-rt, var(--_ctm-lay-dn-bd-rt))
43
+ );
44
+ background-size: var(
45
+ --_ctm-mob-lay-dn-bd-se,
46
+ var(--_ctm-tab-lay-dn-bd-se, var(--_ctm-lay-dn-bd-se))
47
+ );
48
+ border-radius: var(
49
+ --_ctm-mob-lay-dn-br-rs,
50
+ var(--_ctm-tab-lay-dn-br-rs, var(--_ctm-lay-dn-br-rs))
51
+ );
52
+ border-color: var(
53
+ --_ctm-mob-lay-dn-br-cr,
54
+ var(--_ctm-tab-lay-dn-br-cr, var(--_ctm-lay-dn-br-cr))
55
+ );
56
+ border-style: var(
57
+ --_ctm-mob-lay-dn-br-se,
58
+ var(--_ctm-tab-lay-dn-br-se, var(--_ctm-lay-dn-br-se))
59
+ );
60
+ border-width: var(
61
+ --_ctm-mob-lay-dn-br-wh,
62
+ var(--_ctm-tab-lay-dn-br-wh, var(--_ctm-lay-dn-br-wh))
63
+ );
64
+ box-shadow: var(
65
+ --_hover-show-shadow,
66
+ var(
67
+ --_sf-hr-bx-sw,
68
+ var(
69
+ --_show-shadow,
70
+ var(--_ctm-mob-dn-dt-se-sw-ae, var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae)))
71
+ var(
72
+ --_ctm-mob-dn-dt-se-sw-br,
73
+ var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
74
+ )
75
+ var(
76
+ --_ctm-mob-dn-dt-se-sw-sd,
77
+ var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
78
+ )
79
+ var(
80
+ --_ctm-mob-dn-dt-se-sw-cr,
81
+ var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
82
+ )
83
+ )
84
+ )
85
+ );
86
+ padding: var(--_ctm-mob-lay-lt-pg, var(--_ctm-tab-lay-lt-pg, var(--_ctm-lay-lt-pg)));
87
+
88
+ &.grd {
89
+ & > div {
90
+ &.wrapper {
91
+ width: 100%;
92
+ display: grid;
93
+ grid-template-columns: repeat(
94
+ auto-fit,
95
+ minmax(
96
+ var(
97
+ --_ctm-mob-lay-lt-mn-cn-wh,
98
+ var(--_ctm-tab-lay-lt-mn-cn-wh, var(--_ctm-lay-lt-mn-cn-wh))
99
+ ),
100
+ 1fr
101
+ )
102
+ );
103
+ grid-template-rows: repeat(
104
+ auto-fit,
105
+ minmax(
106
+ var(
107
+ --_ctm-mob-lay-lt-mn-rw-ht,
108
+ var(--_ctm-tab-lay-lt-mn-rw-ht, var(--_ctm-lay-lt-mn-rw-ht))
109
+ ),
110
+ 1fr
111
+ )
112
+ );
113
+
114
+ div {
115
+ &#{$childItemSelector} {
116
+ width: 100%;
117
+ }
118
+ }
119
+
120
+ @media only screen and (max-width: 767px) {
121
+ grid-template-rows: auto;
122
+ }
123
+ }
124
+ }
125
+ }
126
+
127
+ &.sld {
128
+ &:is(:not(#{$sliderControlDragging} *)) {
129
+ overflow: clip;
130
+ }
131
+ // overflow: clip;
132
+ height: auto;
133
+ min-height: 50px !important;
134
+ --_sf-sl-ct-ic-dt-at-cl: var(
135
+ --_ctm-mob-lay-lt-cl-ae-cr,
136
+ var(--_ctm-tab-lay-lt-cl-ae-cr, var(--_ctm-lay-lt-cl-ae-cr))
137
+ );
138
+ // &:is([data-control-type="1"]) {
139
+ // @include CMSRepeaterEmblaControlStyles(1);
140
+ // }
141
+ @for $i from 1 through 3 {
142
+ &:is([data-control-type="#{$i}"]) {
143
+ @if ($i == 3) {
144
+ overflow-y: visible;
145
+ }
146
+ @include CMSRepeaterEmblaControlStyles($i);
147
+ }
148
+ }
149
+
150
+ & > div {
151
+ &.wrapper {
152
+ &.embla__container {
153
+ display: flex !important;
154
+ --_embla-slide-space: var(
155
+ --_ctm-mob-lay-lt-im-gp,
156
+ var(--_ctm-tab-lay-lt-im-gp, var(--_ctm-lay-lt-im-gp))
157
+ );
158
+ --_embla-col-count: var(
159
+ --_ctm-mob-lay-lt-st-is-pr-se,
160
+ var(--_ctm-tab-lay-lt-st-is-pr-se, var(--_ctm-lay-lt-st-is-pr-se, 3))
161
+ );
162
+ // gap: 0px !important;
163
+ // margin-left: calc(var(--_embla-slide-space, 10px) * -1);
164
+ width: 100%;
165
+ height: 100%;
166
+ & > .embla__slide {
167
+ --_sf-cl-vl: calc(
168
+ (100% / var(--_embla-col-count, 3)) -
169
+ (
170
+ ((var(--_embla-col-count, 3) - 1) * (var(--_embla-slide-space, 10px))) /
171
+ (var(--_embla-col-count, 3))
172
+ )
173
+ );
174
+ // flex: 0 0 calc(var(--_embla-slide-width, 100%) / var(--_embla-col-count, 3));
175
+ // width: calc(var(--_embla-slide-width, 100%) / var(--_embla-col-count, 3));
176
+ flex: 0 0 var(--_sf-cl-vl);
177
+ width: var(--_sf-cl-vl);
178
+ // grid-template-rows: minmax(
179
+ // max(0.5px, 0.09375 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))),
180
+ // auto
181
+ // );
182
+
183
+ grid-template-rows: minmax(50px, auto);
184
+ grid-template-columns: minmax(0px, 1fr);
185
+ // padding-left: calc(var(--_embla-slide-space, 10px) * 1);
186
+ // padding-left: 0px !important;
187
+
188
+ img {
189
+ width: 100%;
190
+ }
191
+ }
192
+ }
193
+ }
194
+ }
195
+ }
196
+ & > div {
197
+ &.wrapper {
198
+ width: 100%;
199
+ gap: var(
200
+ --_ctm-mob-lay-lt-im-gp,
201
+ var(--_ctm-tab-lay-lt-im-gp, var(--_ctm-lay-lt-im-gp, 0px))
202
+ );
203
+
204
+ &:is(.sld > *, .rws > *, .cln > *) {
205
+ // gap: var(
206
+ // --_ctm-mob-lay-lt-im-gp,
207
+ // var(--_ctm-tab-lay-lt-im-gp, var(--_ctm-lay-lt-im-gp, 0px))
208
+ // );
209
+ gap: #{prepareMediaVariable(--_ctm-lay-lt-im-gp)};
210
+ }
211
+ &:is(.grd > *) {
212
+ column-gap: #{prepareMediaVariable(--_ctm-lay-lt-cn-gp)};
213
+ row-gap: #{prepareMediaVariable(--_ctm-lay-lt-rw-gp)};
214
+ }
215
+ // width: 100%;
216
+ // grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
217
+ // grid-auto-rows: minmax(100px, 1fr);
218
+ }
219
+ }
220
+
221
+ &.rws {
222
+ & > .wrapper {
223
+ // grid-template-columns: 100%;
224
+ // grid-template-rows:
225
+ // minmax(
226
+ // clamp(
227
+ // 0.5px,
228
+ // calc(
229
+ // (18.918014128728416 * var(--_cms-playground-unit)) -
230
+ // (0.18918014128728416 * var(--_cms-scrollbar-width))
231
+ // ),
232
+ // calc(0.18918014128728416 * var(--_cms-section-max-width))
233
+ // ),
234
+ // auto
235
+ // )
236
+ // minmax(
237
+ // clamp(
238
+ // 0.5px,
239
+ // calc(
240
+ // (18.918014128728416 * var(--_cms-playground-unit)) -
241
+ // (0.18918014128728416 * var(--_cms-scrollbar-width))
242
+ // ),
243
+ // calc(0.18918014128728416 * var(--_cms-section-max-width))
244
+ // ),
245
+ // auto
246
+ // )
247
+ // minmax(
248
+ // clamp(
249
+ // 0.5px,
250
+ // calc(
251
+ // (18.918014128728416 * var(--_cms-playground-unit)) -
252
+ // (0.18918014128728416 * var(--_cms-scrollbar-width))
253
+ // ),
254
+ // calc(0.18918014128728416 * var(--_cms-section-max-width))
255
+ // ),
256
+ // auto
257
+ // )
258
+ // minmax(
259
+ // clamp(
260
+ // 0.5px,
261
+ // calc(
262
+ // (18.918014128728416 * var(--_cms-playground-unit)) -
263
+ // (0.18918014128728416 * var(--_cms-scrollbar-width))
264
+ // ),
265
+ // calc(0.18918014128728416 * var(--_cms-section-max-width))
266
+ // ),
267
+ // auto
268
+ // );
269
+ & > div {
270
+ &#{$childItemSelector} {
271
+ width: 100%;
272
+ }
273
+ }
274
+ }
275
+ }
276
+
277
+ &.cln {
278
+ &[data-view-state="auto"] {
279
+ height: var(--_ctm-mob-lay-lt-ht, var(--_ctm-tab-lay-lt-ht, var(--_ctm-lay-lt-ht)));
280
+ }
281
+ & > .wrapper {
282
+ height: 100%;
283
+ & > div {
284
+ &#{$childItemSelector} {
285
+ width: 100%;
286
+ // align-self: flex-start;
287
+ }
288
+ }
289
+ }
290
+ }
291
+
292
+ // &[data-view-state="full"] {
293
+ // width: auto;
294
+ // margin: 0;
295
+ // justify-self: stretch !important;
296
+ // align-self: stretch !important;
297
+ // cursor: auto;
298
+
299
+ // & > div {
300
+ // &[data-div-type="wrapper__layer"] {
301
+ // --_sf-vt-zz: visible;
302
+ // --_sf-op-zz: 1;
303
+ // }
304
+ // }
305
+ // }
306
+ }
307
+ }