@sc-360-v2/storefront-cms-library 0.5.25 → 0.5.27

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 (32) hide show
  1. package/dist/brand.scss +136 -93
  2. package/dist/breadcrumbs.scss +827 -827
  3. package/dist/builder.js +1 -1
  4. package/dist/buy-for-tab-container.scss +141 -90
  5. package/dist/category.scss +67 -24
  6. package/dist/container.scss +74 -24
  7. package/dist/grid.scss +169 -119
  8. package/dist/icons-builder.js +1 -1
  9. package/dist/icons.js +1 -1
  10. package/dist/index.js +1 -1
  11. package/dist/layouter-item.scss +74 -25
  12. package/dist/layouter-pro-item.scss +55 -6
  13. package/dist/layouter-pro.scss +134 -88
  14. package/dist/layouter.scss +67 -24
  15. package/dist/light-box-v2.scss +154 -105
  16. package/dist/line.scss +261 -166
  17. package/dist/marchandiserSets.scss +107 -60
  18. package/dist/mega-menu-container.scss +73 -24
  19. package/dist/mega-menu.scss +25 -3
  20. package/dist/product-image.scss +1 -1
  21. package/dist/product.scss +140 -97
  22. package/dist/productDetails.scss +113 -70
  23. package/dist/repeater-item.scss +69 -24
  24. package/dist/repeater.scss +73 -24
  25. package/dist/section.scss +53 -7
  26. package/dist/stack.scss +171 -129
  27. package/dist/tab-container.scss +139 -89
  28. package/dist/types/builder/tools/element-edit/marchandiserSets.d.ts +8 -0
  29. package/dist/types/global/types.d.ts +1 -0
  30. package/dist/uploadMedia.js +1 -1
  31. package/dist/user-elements.scss +15 -0
  32. package/package.json +1 -1
package/dist/repeater-item.scss CHANGED
@@ -1,5 +1,7 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+
3
5
  [data-div-type="element"] {
4
6
  &[data-element-type="repeater-item"] {
5
7
  // width: var(--_sf-con-nw-wh);
@@ -19,30 +21,30 @@
19
21
  padding: var(--_ctm-mob-repe-lt-pg, var(--_ctm-tab-repe-lt-pg, var(--_ctm-repe-lt-pg)));
20
22
  //margin: var(--_ctm-mob-repe-lt-mn, var(--_ctm-tab-repe-lt-mn, var(--_ctm-repe-lt-mn)));
21
23
 
22
- background-color: var(
23
- --_ctm-mob-repe-dn-bd-cr,
24
- var(--_ctm-tab-repe-dn-bd-cr, var(--_ctm-repe-dn-bd-cr))
25
- );
26
- background-image: var(
27
- --_ctm-mob-repe-dn-bd-ie,
28
- var(--_ctm-tab-repe-dn-bd-ie, var(--_ctm-repe-dn-bd-ie))
29
- );
30
- background-attachment: var(
31
- --_ctm-mob-repe-dn-bd-at,
32
- var(--_ctm-tab-repe-dn-bd-at, var(--_ctm-repe-dn-bd-at))
33
- );
34
- background-position: var(
35
- --_ctm-mob-repe-dn-bd-pn,
36
- var(--_ctm-tab-repe-dn-bd-pn, var(--_ctm-repe-dn-bd-pn))
37
- );
38
- background-repeat: var(
39
- --_ctm-mob-repe-dn-bd-rt,
40
- var(--_ctm-tab-repe-dn-bd-rt, var(--_ctm-repe-dn-bd-rt))
41
- );
42
- background-size: var(
43
- --_ctm-mob-repe-dn-bd-se,
44
- var(--_ctm-tab-repe-dn-bd-se, var(--_ctm-repe-dn-bd-se))
45
- );
24
+ // background-color: var(
25
+ // --_ctm-mob-repe-dn-bd-cr,
26
+ // var(--_ctm-tab-repe-dn-bd-cr, var(--_ctm-repe-dn-bd-cr))
27
+ // );
28
+ // background-image: var(
29
+ // --_ctm-mob-repe-dn-bd-ie,
30
+ // var(--_ctm-tab-repe-dn-bd-ie, var(--_ctm-repe-dn-bd-ie))
31
+ // );
32
+ // background-attachment: var(
33
+ // --_ctm-mob-repe-dn-bd-at,
34
+ // var(--_ctm-tab-repe-dn-bd-at, var(--_ctm-repe-dn-bd-at))
35
+ // );
36
+ // background-position: var(
37
+ // --_ctm-mob-repe-dn-bd-pn,
38
+ // var(--_ctm-tab-repe-dn-bd-pn, var(--_ctm-repe-dn-bd-pn))
39
+ // );
40
+ // background-repeat: var(
41
+ // --_ctm-mob-repe-dn-bd-rt,
42
+ // var(--_ctm-tab-repe-dn-bd-rt, var(--_ctm-repe-dn-bd-rt))
43
+ // );
44
+ // background-size: var(
45
+ // --_ctm-mob-repe-dn-bd-se,
46
+ // var(--_ctm-tab-repe-dn-bd-se, var(--_ctm-repe-dn-bd-se))
47
+ // );
46
48
  border-radius: var(
47
49
  --_ctm-mob-repe-dn-br-rs,
48
50
  var(--_ctm-tab-repe-dn-br-rs, var(--_ctm-repe-dn-br-rs))
@@ -85,6 +87,49 @@
85
87
  )
86
88
  );
87
89
  }
90
+ &:is([data-background-type="color"] > *).wrapper {
91
+ background-color: #{prepareMediaVariable(--_ctm-repe-dn-bd-cr)};
92
+ }
93
+
94
+ &:is([data-background-type="gradient"] > *).wrapper {
95
+ --_sf-repe-gradient-angle: calc(#{prepareMediaVariable(--_ctm-repe-dn-gt-ae, 90)} * 1deg);
96
+ --_sf-repe-gradient-start-color: #{prepareMediaVariable(
97
+ --_ctm-repe-dn-gt-st-cr,
98
+ transparent
99
+ )};
100
+ --_sf-repe-gradient-start-position: calc(
101
+ #{prepareMediaVariable(--_ctm-repe-dn-gt-st-pn, 0)} * 1%
102
+ );
103
+ --_sf-repe-gradient-end-color: #{prepareMediaVariable(--_ctm-repe-dn-gt-ed-cr, transparent)};
104
+ --_sf-repe-gradient-end-position: calc(
105
+ #{prepareMediaVariable(--_ctm-repe-dn-gt-ed-pn, 100)} * 1%
106
+ );
107
+ --_sf-repe-gradient-position: #{prepareMediaVariable(--_ctm-repe-dn-gt-pn, center)};
108
+ }
109
+
110
+ &:is([data-gradient-type="Linear Gradient"] > *).wrapper {
111
+ background-image: linear-gradient(
112
+ var(--_sf-repe-gradient-angle),
113
+ var(--_sf-repe-gradient-start-color) var(--_sf-repe-gradient-start-position),
114
+ var(--_sf-repe-gradient-end-color) var(--_sf-repe-gradient-end-position)
115
+ );
116
+ }
117
+
118
+ &:is([data-gradient-type="Radial Gradient"] > *).wrapper {
119
+ background-image: radial-gradient(
120
+ circle at var(--_sf-repe-gradient-position),
121
+ var(--_sf-repe-gradient-start-color) var(--_sf-repe-gradient-start-position),
122
+ var(--_sf-repe-gradient-end-color) var(--_sf-repe-gradient-end-position)
123
+ );
124
+ }
125
+ &:is([data-background-type="image"] > *).wrapper {
126
+ background-image: prepareMediaVariable(--_ctm-repe-dn-bd-ie);
127
+ background-attachment: prepareMediaVariable(--_ctm-repe-dn-bd-at);
128
+ background-position: prepareMediaVariable(--_ctm-repe-dn-bd-pn);
129
+ background-position-y: prepareMediaVariable(--_ctm-repe-dn-bd-pn-y);
130
+ background-repeat: prepareMediaVariable(--_ctm-repe-dn-bd-rt);
131
+ background-size: prepareMediaVariable(--_ctm-repe-dn-bd-se);
132
+ }
88
133
  }
89
134
  }
90
135
  }
package/dist/repeater.scss CHANGED
@@ -32,30 +32,79 @@ $listViewSlector: '.lst_vw[data-element-type="repeater"]';
32
32
  --_ctm-mob-rep-lt-mn,
33
33
  var(--_ctm-tab-rep-lt-mn, var(--_ctm-rep-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))))
34
34
  );
35
- background-color: var(
36
- --_ctm-mob-rep-dn-rr-wt-bd-cr,
37
- var(--_ctm-tab-rep-dn-rr-wt-bd-cr, var(--_ctm-rep-dn-rr-wt-bd-cr))
38
- );
39
- background-image: var(
40
- --_ctm-mob-rep-dn-rr-wt-bd-ie,
41
- var(--_ctm-tab-rep-dn-rr-wt-bd-ie, var(--_ctm-rep-dn-rr-wt-bd-ie))
42
- );
43
- background-attachment: var(
44
- --_ctm-mob-rep-dn-rr-wt-bd-at,
45
- var(--_ctm-tab-rep-dn-rr-wt-bd-at, var(--_ctm-rep-dn-rr-wt-bd-at))
46
- );
47
- background-position: var(
48
- --_ctm-mob-rep-dn-rr-wt-bd-pn,
49
- var(--_ctm-tab-rep-dn-rr-wt-bd-pn, var(--_ctm-rep-dn-rr-wt-bd-pn))
50
- );
51
- background-repeat: var(
52
- --_ctm-mob-rep-dn-rr-wt-bd-rt,
53
- var(--_ctm-tab-rep-dn-rr-wt-bd-rt, var(--_ctm-rep-dn-rr-wt-bd-rt))
54
- );
55
- background-size: var(
56
- --_ctm-mob-rep-dn-rr-wt-bd-se,
57
- var(--_ctm-tab-rep-dn-rr-wt-bd-se, var(--_ctm-rep-dn-rr-wt-bd-se))
58
- );
35
+
36
+ &[data-background-type="color"] {
37
+ background-color: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-cr);
38
+ }
39
+
40
+ &[data-background-type="gradient"] {
41
+ --_sf-rep-gradient-angle: calc(#{prepareMediaVariable(--_ctm-rep-dn-rr-wt-gt-ae, 90)} * 1deg);
42
+ --_sf-rep-gradient-start-color: #{prepareMediaVariable(
43
+ --_ctm-rep-dn-rr-wt-gt-st-cr,
44
+ transparent
45
+ )};
46
+ --_sf-rep-gradient-start-position: calc(
47
+ #{prepareMediaVariable(--_ctm-rep-dn-rr-wt-gt-st-pn, 0)} * 1%
48
+ );
49
+ --_sf-rep-gradient-end-color: #{prepareMediaVariable(
50
+ --_ctm-rep-dn-rr-wt-gt-ed-cr,
51
+ transparent
52
+ )};
53
+ --_sf-rep-gradient-end-position: calc(
54
+ #{prepareMediaVariable(--_ctm-rep-dn-rr-wt-gt-ed-pn, 100)} * 1%
55
+ );
56
+ --_sf-rep-gradient-position: #{prepareMediaVariable(--_ctm-rep-dn-rr-wt-gt-pn, center)};
57
+
58
+ &[data-gradient-type="Linear Gradient"] {
59
+ background-image: linear-gradient(
60
+ var(--_sf-rep-gradient-angle),
61
+ var(--_sf-rep-gradient-start-color) var(--_sf-rep-gradient-start-position),
62
+ var(--_sf-rep-gradient-end-color) var(--_sf-rep-gradient-end-position)
63
+ );
64
+ }
65
+
66
+ &[data-gradient-type="Radial Gradient"] {
67
+ background-image: radial-gradient(
68
+ circle at var(--_sf-rep-gradient-position),
69
+ var(--_sf-rep-gradient-start-color) var(--_sf-rep-gradient-start-position),
70
+ var(--_sf-rep-gradient-end-color) var(--_sf-rep-gradient-end-position)
71
+ );
72
+ }
73
+ }
74
+
75
+ &[data-background-type="image"] {
76
+ background-image: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-ie);
77
+ background-attachment: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-at);
78
+ background-position: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-pn);
79
+ background-position-y: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-pn-y);
80
+ background-repeat: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-rt);
81
+ background-size: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-se);
82
+ }
83
+
84
+ // background-color: var(
85
+ // --_ctm-mob-rep-dn-rr-wt-bd-cr,
86
+ // var(--_ctm-tab-rep-dn-rr-wt-bd-cr, var(--_ctm-rep-dn-rr-wt-bd-cr))
87
+ // );
88
+ // background-image: var(
89
+ // --_ctm-mob-rep-dn-rr-wt-bd-ie,
90
+ // var(--_ctm-tab-rep-dn-rr-wt-bd-ie, var(--_ctm-rep-dn-rr-wt-bd-ie))
91
+ // );
92
+ // background-attachment: var(
93
+ // --_ctm-mob-rep-dn-rr-wt-bd-at,
94
+ // var(--_ctm-tab-rep-dn-rr-wt-bd-at, var(--_ctm-rep-dn-rr-wt-bd-at))
95
+ // );
96
+ // background-position: var(
97
+ // --_ctm-mob-rep-dn-rr-wt-bd-pn,
98
+ // var(--_ctm-tab-rep-dn-rr-wt-bd-pn, var(--_ctm-rep-dn-rr-wt-bd-pn))
99
+ // );
100
+ // background-repeat: var(
101
+ // --_ctm-mob-rep-dn-rr-wt-bd-rt,
102
+ // var(--_ctm-tab-rep-dn-rr-wt-bd-rt, var(--_ctm-rep-dn-rr-wt-bd-rt))
103
+ // );
104
+ // background-size: var(
105
+ // --_ctm-mob-rep-dn-rr-wt-bd-se,
106
+ // var(--_ctm-tab-rep-dn-rr-wt-bd-se, var(--_ctm-rep-dn-rr-wt-bd-se))
107
+ // );
59
108
  border-radius: var(
60
109
  --_ctm-mob-rep-dn-rr-wt-br-rs,
61
110
  var(--_ctm-tab-rep-dn-rr-wt-br-rs, var(--_ctm-rep-dn-rr-wt-br-rs))
package/dist/section.scss CHANGED
@@ -107,17 +107,54 @@ section {
107
107
  prepareMediaVariable(--_ctm-sec-dn-sw-ae) prepareMediaVariable(--_ctm-sec-dn-sw-br)
108
108
  prepareMediaVariable(--_ctm-sec-dn-sw-sd) prepareMediaVariable(--_ctm-sec-dn-sw-cr)
109
109
  );
110
- background-color: prepareMediaVariable(--_ctm-sec-dn-bd-cr);
111
- background-image: prepareMediaVariable(--_ctm-sec-dn-bd-ie);
112
- background-attachment: prepareMediaVariable(--_ctm-sec-dn-bd-at);
113
- background-position: prepareMediaVariable(--_ctm-sec-dn-bd-pn);
114
- background-position-y: prepareMediaVariable(--_ctm-sec-dn-bd-pn-y);
115
- background-repeat: prepareMediaVariable(--_ctm-sec-dn-bd-rt);
116
- background-size: prepareMediaVariable(--_ctm-sec-dn-bd-se);
117
110
  border-radius: prepareMediaVariable(--_ctm-sec-dn-br-rs) !important;
111
+
112
+ &[data-background-type="color"] {
113
+ background-color: prepareMediaVariable(--_ctm-sec-dn-bd-cr);
114
+ }
115
+
116
+ &[data-background-type="gradient"] {
117
+ --_sf-sec-gradient-angle: calc(#{prepareMediaVariable(--_ctm-sec-dn-gt-ae, 90)} * 1deg);
118
+ --_sf-sec-gradient-start-color: #{prepareMediaVariable(--_ctm-sec-dn-gt-st-cr, transparent)};
119
+ --_sf-sec-gradient-start-position: calc(
120
+ #{prepareMediaVariable(--_ctm-sec-dn-gt-st-pn, 0)} * 1%
121
+ );
122
+ --_sf-sec-gradient-end-color: #{prepareMediaVariable(--_ctm-sec-dn-gt-ed-cr, transparent)};
123
+ --_sf-sec-gradient-end-position: calc(
124
+ #{prepareMediaVariable(--_ctm-sec-dn-gt-ed-pn, 100)} * 1%
125
+ );
126
+ --_sf-sec-gradient-position: #{prepareMediaVariable(--_ctm-sec-dn-gt-pn, center)};
127
+
128
+ &[data-gradient-type="Linear Gradient"] {
129
+ background-image: linear-gradient(
130
+ var(--_sf-sec-gradient-angle),
131
+ var(--_sf-sec-gradient-start-color) var(--_sf-sec-gradient-start-position),
132
+ var(--_sf-sec-gradient-end-color) var(--_sf-sec-gradient-end-position)
133
+ );
134
+ }
135
+
136
+ &[data-gradient-type="Radial Gradient"] {
137
+ background-image: radial-gradient(
138
+ circle at var(--_sf-sec-gradient-position),
139
+ var(--_sf-sec-gradient-start-color) var(--_sf-sec-gradient-start-position),
140
+ var(--_sf-sec-gradient-end-color) var(--_sf-sec-gradient-end-position)
141
+ );
142
+ }
143
+ }
144
+
145
+ &[data-background-type="image"] {
146
+ background-image: prepareMediaVariable(--_ctm-sec-dn-bd-ie);
147
+ background-attachment: prepareMediaVariable(--_ctm-sec-dn-bd-at);
148
+ background-position: prepareMediaVariable(--_ctm-sec-dn-bd-pn);
149
+ background-position-y: prepareMediaVariable(--_ctm-sec-dn-bd-pn-y);
150
+ background-repeat: prepareMediaVariable(--_ctm-sec-dn-bd-rt);
151
+ background-size: prepareMediaVariable(--_ctm-sec-dn-bd-se);
152
+ }
153
+
118
154
  &[data-show-shadow="false"] {
119
155
  --_hide-section-shadow: none;
120
156
  }
157
+
121
158
  &[data-show-border="false"] {
122
159
  --_hide-section-border: none;
123
160
  }
@@ -125,6 +162,7 @@ section {
125
162
  &:not(.#{$dp}, .#{$tb}, .#{$mb}) {
126
163
  display: var(--_d-flex) !important;
127
164
  }
165
+
128
166
  & > div {
129
167
  &[data-type="wrapper-layer"] {
130
168
  display: var(--_d-flex) !important;
@@ -141,6 +179,7 @@ section {
141
179
  border-width: var(--_hide-section-border, prepareMediaVariable(--_ctm-sec-dn-br-wh));
142
180
  border-radius: var(--_hide-section-border, prepareMediaVariable(--_ctm-sec-dn-br-rs));
143
181
  }
182
+
144
183
  &[data-div-type="cms-section-wrapper"] {
145
184
  // max-width: var(--_sf-wp-mx-wt);
146
185
  max-width: var(
@@ -164,31 +203,37 @@ section {
164
203
  }
165
204
  }
166
205
  }
206
+
167
207
  div[data-div-type="element"] {
168
208
  position: var(--_p-relative);
209
+
169
210
  & > .wrapper {
170
211
  grid-area: 1/1/2/2 !important;
171
212
 
172
213
  a {
173
214
  color: inherit;
174
215
  text-decoration: none;
216
+
175
217
  &.disabled {
176
218
  opacity: 0.5;
177
219
  pointer-events: none;
178
220
  }
179
221
  }
180
222
  }
223
+
181
224
  &[data-view-state="full"] {
182
225
  width: auto;
183
226
  margin: 0;
184
227
  cursor: auto;
185
228
  justify-self: stretch !important;
186
229
  align-self: stretch !important;
230
+
187
231
  // &:not(#{$repeterLElement}) {
188
232
  // }
189
233
  &:is(#{$isFlexboxElementChild}) {
190
234
  width: 100%;
191
235
  }
236
+
192
237
  &:is(#{$activeElementSelector}) {
193
238
  & > div {
194
239
  &[data-div-type="wrapper__layer"] {
@@ -203,6 +248,7 @@ div[data-div-type="element"] {
203
248
  width: 100%;
204
249
  }
205
250
  }
251
+
206
252
  // &:is([data-element-type="stack"].hrz > .wrapper > [data-div-type="element"]) {
207
253
  // &:is([data-element-type="stack"]) {
208
254
  // width: max(
package/dist/stack.scss CHANGED
@@ -1,129 +1,171 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./functions.scss" as *;
4
- $es: '[data-div-type="element"]';
5
- $ss: '[data-element-type="stack"]';
6
- $dp: "dp_d_none";
7
- $tb: "tb_d_none";
8
- $mb: "mb_d_none";
9
-
10
- $rp: (
11
- "#{$es}#{$ss}:not(.#{$mb})": (
12
- mobile: (
13
- display: var(--_d-grid),
14
- ),
15
- ),
16
- "#{$es}#{$ss}:not(.#{$tb})": (
17
- tablet: (
18
- display: var(--_d-grid),
19
- ),
20
- ),
21
- "#{$es}#{$ss}:not(.#{$dp})": (
22
- desktop: (
23
- display: var(--_d-grid),
24
- ),
25
- ),
26
- );
27
-
28
- body {
29
- @include prepareCustomClassCSSProps($rp);
30
- }
31
-
32
- #{$es} {
33
- &#{$ss} {
34
- // min-width: var(--_sf-sta-nw-wh) !important;
35
- // min-height: var(--_ctm-sta-lt-ht, 100px) !important;
36
- min-width: 30px;
37
- // min-height: 100px;
38
- margin: prepareMediaVariable(--_ctm-sta-lt-mn);
39
- // display: var(--_d-grid);
40
- background-color: prepareMediaVariable(--_ctm-sta-dn-bd-cr);
41
- background-image: prepareMediaVariable(--_ctm-sta-dn-bd-ie);
42
- background-attachment: prepareMediaVariable(--_ctm-sta-dn-bd-at);
43
- background-position: prepareMediaVariable(--_ctm-sta-dn-bd-pn);
44
- background-repeat: prepareMediaVariable(--_ctm-sta-dn-bd-rt);
45
- background-size: prepareMediaVariable(--_ctm-sta-dn-bd-se);
46
-
47
- &[data-show-border="true"] {
48
- border-color: var(--_hide-grid-border, prepareMediaVariable(--_ctm-sta-dn-br-cr));
49
- border-style: var(--_hide-grid-border, prepareMediaVariable(--_ctm-sta-dn-br-se));
50
- border-width: var(--_hide-grid-border, prepareMediaVariable(--_ctm-sta-dn-br-wh));
51
- }
52
-
53
- &[data-show-boxshadow="true"] {
54
- box-shadow: var(
55
- --_hide-grid-shadow,
56
- prepareMediaVariable(--_ctm-sta-dn-sw-ae) prepareMediaVariable(--_ctm-sta-dn-sw-br)
57
- prepareMediaVariable(--_ctm-sta-dn-sw-sd) prepareMediaVariable(--_ctm-sta-dn-sw-cr)
58
- );
59
- }
60
- border-radius: prepareMediaVariable(--_ctm-sta-dn-br-rs);
61
- grid-template-columns: 100%;
62
-
63
- // &:not(.#{$dp}, .#{$tb}, .#{$mb}) {
64
- // display: var(--_d-grid);
65
- // }
66
-
67
- &.vtl {
68
- // width: var(--_sf-sta-nw-wh, auto);
69
- min-height: 30px;
70
- width: calc(1% * #{prepareMediaVariable(--_ctm-sta-ele-nw-wh-vl)});
71
- min-width: 30px;
72
- & > .wrapper {
73
- flex-direction: column;
74
- width: 100%;
75
- // height: 100%;
76
- // justify-content: var(--_ctm-sta-lt-jy-ct);
77
- // align-items: var(--_ctm-sta-lt-an-is);
78
- align-items: prepareMediaVariable(--_ctm-sta-lt-jy-ct);
79
- }
80
- }
81
- &.hrz {
82
- width: calc(1% * #{prepareMediaVariable(--_ctm-sta-ele-nw-wh-vl)});
83
- // width: max-content;
84
- // min-width: var(--_sf-sta-nw-wh) !important;
85
- // min-width: 100px !important;
86
- // width: max-content;
87
- &.hsc {
88
- min-height: 10px;
89
- }
90
- &.dnhsc {
91
- min-height: 25px;
92
- }
93
- // height: var(--_ctm-sta-lt-ht, 100px);
94
- // width: var(--_sf-sta-nw-wh, auto);
95
- & > .wrapper {
96
- width: 100%;
97
- // width: 100%;
98
- height: 100%;
99
- flex-direction: row;
100
- // justify-content: var(--_ctm-sta-lt-an-is);
101
- align-items: prepareMediaVariable(--_ctm-sta-lt-an-is);
102
- justify-content: prepareMediaVariable(--_ctm-sta-lt-jy-ct);
103
- }
104
- }
105
-
106
- & > div {
107
- &.wrapper {
108
- // width: 100%;
109
- padding: prepareMediaVariable(--_ctm-sta-lt-pg);
110
- display: var(--_d-flex);
111
- gap: prepareMediaVariable(--_ctm-sta-lt-im-gp);
112
-
113
- // border-color: var(
114
- // --_hide-grid-border,
115
- // var(--_ctm-sta-dn-br-cr, var(--_tst-dn-dt-se-br-cr))
116
- // );
117
- // border-style: var(
118
- // --_hide-grid-border,
119
- // var(--_ctm-sta-dn-br-se, var(--_tst-dn-dt-se-br-se))
120
- // );
121
- // border-width: var(
122
- // --_hide-grid-border,
123
- // var(--_ctm-sta-dn-br-wh, var(--_tst-dn-dt-se-br-wh))
124
- // );
125
- // border-radius: var(--_ctm-sta-dn-br-rs, var(--_tst-dn-dt-se-br-rs));
126
- }
127
- }
128
- }
129
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+ $es: '[data-div-type="element"]';
5
+ $ss: '[data-element-type="stack"]';
6
+ $dp: "dp_d_none";
7
+ $tb: "tb_d_none";
8
+ $mb: "mb_d_none";
9
+
10
+ $rp: (
11
+ "#{$es}#{$ss}:not(.#{$mb})": (
12
+ mobile: (
13
+ display: var(--_d-grid),
14
+ ),
15
+ ),
16
+ "#{$es}#{$ss}:not(.#{$tb})": (
17
+ tablet: (
18
+ display: var(--_d-grid),
19
+ ),
20
+ ),
21
+ "#{$es}#{$ss}:not(.#{$dp})": (
22
+ desktop: (
23
+ display: var(--_d-grid),
24
+ ),
25
+ ),
26
+ );
27
+
28
+ body {
29
+ @include prepareCustomClassCSSProps($rp);
30
+ }
31
+
32
+ #{$es} {
33
+ &#{$ss} {
34
+ // min-width: var(--_sf-sta-nw-wh) !important;
35
+ // min-height: var(--_ctm-sta-lt-ht, 100px) !important;
36
+ min-width: 30px;
37
+ // min-height: 100px;
38
+ margin: prepareMediaVariable(--_ctm-sta-lt-mn);
39
+ // display: var(--_d-grid);
40
+ // background-color: prepareMediaVariable(--_ctm-sta-dn-bd-cr);
41
+ // background-image: prepareMediaVariable(--_ctm-sta-dn-bd-ie);
42
+ // background-attachment: prepareMediaVariable(--_ctm-sta-dn-bd-at);
43
+ // background-position: prepareMediaVariable(--_ctm-sta-dn-bd-pn);
44
+ // background-repeat: prepareMediaVariable(--_ctm-sta-dn-bd-rt);
45
+ // background-size: prepareMediaVariable(--_ctm-sta-dn-bd-se);
46
+
47
+ &[data-background-type="color"] {
48
+ background-color: prepareMediaVariable(--_ctm-sta-dn-bd-cr);
49
+ }
50
+
51
+ &[data-background-type="gradient"] {
52
+ --_sf-sta-gradient-angle: calc(#{prepareMediaVariable(--_ctm-sta-dn-gt-ae, 90)} * 1deg);
53
+ --_sf-sta-gradient-start-color: #{prepareMediaVariable(--_ctm-sta-dn-gt-st-cr, transparent)};
54
+ --_sf-sta-gradient-start-position: calc(
55
+ #{prepareMediaVariable(--_ctm-sta-dn-gt-st-pn, 0)} * 1%
56
+ );
57
+ --_sf-sta-gradient-end-color: #{prepareMediaVariable(--_ctm-sta-dn-gt-ed-cr, transparent)};
58
+ --_sf-sta-gradient-end-position: calc(
59
+ #{prepareMediaVariable(--_ctm-sta-dn-gt-ed-pn, 100)} * 1%
60
+ );
61
+ --_sf-sta-gradient-position: #{prepareMediaVariable(--_ctm-sta-dn-gt-pn, center)};
62
+
63
+ &[data-gradient-type="Linear Gradient"] {
64
+ background-image: linear-gradient(
65
+ var(--_sf-sta-gradient-angle),
66
+ var(--_sf-sta-gradient-start-color) var(--_sf-sta-gradient-start-position),
67
+ var(--_sf-sta-gradient-end-color) var(--_sf-sta-gradient-end-position)
68
+ );
69
+ }
70
+
71
+ &[data-gradient-type="Radial Gradient"] {
72
+ background-image: radial-gradient(
73
+ circle at var(--_sf-sta-gradient-position),
74
+ var(--_sf-sta-gradient-start-color) var(--_sf-sta-gradient-start-position),
75
+ var(--_sf-sta-gradient-end-color) var(--_sf-sta-gradient-end-position)
76
+ );
77
+ }
78
+ }
79
+
80
+ &[data-background-type="image"] {
81
+ background-image: prepareMediaVariable(--_ctm-sta-dn-bd-ie);
82
+ background-attachment: prepareMediaVariable(--_ctm-sta-dn-bd-at);
83
+ background-position: prepareMediaVariable(--_ctm-sta-dn-bd-pn);
84
+ background-position-y: prepareMediaVariable(--_ctm-sta-dn-bd-pn-y);
85
+ background-repeat: prepareMediaVariable(--_ctm-sta-dn-bd-rt);
86
+ background-size: prepareMediaVariable(--_ctm-sta-dn-bd-se);
87
+ }
88
+
89
+ &[data-show-border="true"] {
90
+ border-color: var(--_hide-grid-border, prepareMediaVariable(--_ctm-sta-dn-br-cr));
91
+ border-style: var(--_hide-grid-border, prepareMediaVariable(--_ctm-sta-dn-br-se));
92
+ border-width: var(--_hide-grid-border, prepareMediaVariable(--_ctm-sta-dn-br-wh));
93
+ }
94
+
95
+ &[data-show-boxshadow="true"] {
96
+ box-shadow: var(
97
+ --_hide-grid-shadow,
98
+ prepareMediaVariable(--_ctm-sta-dn-sw-ae) prepareMediaVariable(--_ctm-sta-dn-sw-br)
99
+ prepareMediaVariable(--_ctm-sta-dn-sw-sd) prepareMediaVariable(--_ctm-sta-dn-sw-cr)
100
+ );
101
+ }
102
+ border-radius: prepareMediaVariable(--_ctm-sta-dn-br-rs);
103
+ grid-template-columns: 100%;
104
+
105
+ // &:not(.#{$dp}, .#{$tb}, .#{$mb}) {
106
+ // display: var(--_d-grid);
107
+ // }
108
+
109
+ &.vtl {
110
+ // width: var(--_sf-sta-nw-wh, auto);
111
+ min-height: 30px;
112
+ width: calc(1% * #{prepareMediaVariable(--_ctm-sta-ele-nw-wh-vl)});
113
+ min-width: 30px;
114
+ & > .wrapper {
115
+ flex-direction: column;
116
+ width: 100%;
117
+ // height: 100%;
118
+ // justify-content: var(--_ctm-sta-lt-jy-ct);
119
+ // align-items: var(--_ctm-sta-lt-an-is);
120
+ align-items: prepareMediaVariable(--_ctm-sta-lt-jy-ct);
121
+ }
122
+ }
123
+ &.hrz {
124
+ width: calc(1% * #{prepareMediaVariable(--_ctm-sta-ele-nw-wh-vl)});
125
+ // width: max-content;
126
+ // min-width: var(--_sf-sta-nw-wh) !important;
127
+ // min-width: 100px !important;
128
+ // width: max-content;
129
+ &.hsc {
130
+ min-height: 10px;
131
+ }
132
+ &.dnhsc {
133
+ min-height: 25px;
134
+ }
135
+ // height: var(--_ctm-sta-lt-ht, 100px);
136
+ // width: var(--_sf-sta-nw-wh, auto);
137
+ & > .wrapper {
138
+ width: 100%;
139
+ // width: 100%;
140
+ height: 100%;
141
+ flex-direction: row;
142
+ // justify-content: var(--_ctm-sta-lt-an-is);
143
+ align-items: prepareMediaVariable(--_ctm-sta-lt-an-is);
144
+ justify-content: prepareMediaVariable(--_ctm-sta-lt-jy-ct);
145
+ }
146
+ }
147
+
148
+ & > div {
149
+ &.wrapper {
150
+ // width: 100%;
151
+ padding: prepareMediaVariable(--_ctm-sta-lt-pg);
152
+ display: var(--_d-flex);
153
+ gap: prepareMediaVariable(--_ctm-sta-lt-im-gp);
154
+
155
+ // border-color: var(
156
+ // --_hide-grid-border,
157
+ // var(--_ctm-sta-dn-br-cr, var(--_tst-dn-dt-se-br-cr))
158
+ // );
159
+ // border-style: var(
160
+ // --_hide-grid-border,
161
+ // var(--_ctm-sta-dn-br-se, var(--_tst-dn-dt-se-br-se))
162
+ // );
163
+ // border-width: var(
164
+ // --_hide-grid-border,
165
+ // var(--_ctm-sta-dn-br-wh, var(--_tst-dn-dt-se-br-wh))
166
+ // );
167
+ // border-radius: var(--_ctm-sta-dn-br-rs, var(--_tst-dn-dt-se-br-rs));
168
+ }
169
+ }
170
+ }
171
+ }