@sc-360-v2/storefront-cms-library 0.5.16 → 0.5.22

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 (12) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/category-groups-element.scss +185 -25
  3. package/dist/category-groups-product-grid.scss +186 -0
  4. package/dist/icon-list.scss +6 -1
  5. package/dist/line.scss +257 -166
  6. package/dist/simple-list.scss +259 -259
  7. package/dist/styles.css +1 -1
  8. package/dist/types/builder/tools/element-edit/categoryGroups.d.ts +899 -202
  9. package/dist/types/builder/tools/element-edit/icon-list.d.ts +10 -0
  10. package/dist/types/builder/tools/element-edit/line.d.ts +1 -83
  11. package/dist/upload-media.scss +6 -1
  12. package/package.json +1 -1
package/dist/line.scss CHANGED
@@ -1,166 +1,257 @@
1
- [data-div-type="element"][data-element-type="line"] {
2
- // width: 100%;
3
- width: var(
4
- --_sf-el-wh-st-mx,
5
- calc(
6
- 1% *
7
- var(
8
- --_ctm-mob-ele-nw-wh-vl,
9
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
10
- )
11
- )
12
- );
13
- height: var(--_ctm-lt-ht);
14
-
15
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
16
-
17
- aspect-ratio: 1 / var(--_sf-aspect-ratio);
18
-
19
- .wrapper {
20
- width: 100%;
21
- // height: 100%;
22
- height: var(--_ctm-lt-ht);
23
- }
24
-
25
- .line__container {
26
- position: relative;
27
- width: 100%;
28
- height: 100%;
29
- display: flex;
30
- align-items: center;
31
- justify-content: center;
32
-
33
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
34
- background-color: var(
35
- --_ctm-mob-dn-le-wt-bd-cr,
36
- var(--_ctm-tab-dn-le-wt-bd-cr, var(--_ctm-dn-le-wt-bd-cr))
37
- );
38
- border-radius: var(
39
- --_ctm-mob-dn-le-wt-br-rs,
40
- var(--_ctm-tab-dn-le-wt-br-rs, var(--_ctm-dn-le-wt-br-rs))
41
- );
42
-
43
- .line__core {
44
- display: block;
45
- background-color: transparent;
46
- border-top-style: solid;
47
- }
48
- }
49
-
50
- &[data-widget-border="true"] {
51
- .line__container {
52
- border-color: var(
53
- --_ctm-mob-dn-le-wt-br-cr,
54
- var(--_ctm-tab-dn-le-wt-br-cr, var(--_ctm-dn-le-wt-br-cr))
55
- );
56
- border-style: var(
57
- --_ctm-mob-dn-le-wt-br-se,
58
- var(--_ctm-tab-dn-le-wt-br-se, var(--_ctm-dn-le-wt-br-se))
59
- );
60
- border-width: var(
61
- --_ctm-mob-dn-le-wt-br-wh,
62
- var(--_ctm-tab-dn-le-wt-br-wh, var(--_ctm-dn-le-wt-br-wh))
63
- );
64
- }
65
- }
66
-
67
- &[data-widget-shadow="true"] {
68
- .line__container {
69
- box-shadow: var(
70
- --_show-shadow,
71
- var(--_ctm-mob-dn-le-wt-sw-ae, var(--_ctm-tab-dn-le-wt-sw-ae, var(--_ctm-dn-le-wt-sw-ae)))
72
- var(--_ctm-mob-dn-le-wt-sw-br, var(--_ctm-tab-dn-le-wt-sw-br, var(--_ctm-dn-le-wt-sw-br)))
73
- var(--_ctm-mob-dn-le-wt-sw-sd, var(--_ctm-tab-dn-le-wt-sw-sd, var(--_ctm-dn-le-wt-sw-sd)))
74
- var(--_ctm-mob-dn-le-wt-sw-cr, var(--_ctm-tab-dn-le-wt-sw-cr, var(--_ctm-dn-le-wt-sw-cr)))
75
- );
76
- }
77
- }
78
-
79
- // ─── Horizontal Line ─────────────────────
80
- &[data-line-direction="horizontal"] {
81
- .line__core {
82
- width: 100%;
83
- height: 0;
84
- border-top: var(--_ctm-lt-le-ts) solid var(--_ctm-dn-le-cr-ud);
85
- }
86
-
87
- &[data-line-style="solid"] .line__core {
88
- border-top-style: solid;
89
- }
90
-
91
- &[data-line-style="dotted"] .line__core {
92
- border-top-style: dotted;
93
- }
94
-
95
- &[data-show-line-end-points="true"] {
96
- .line__container::before,
97
- .line__container::after {
98
- content: "";
99
- position: absolute;
100
- width: 8px;
101
- height: 8px;
102
- background-color: var(--_ctm-dn-le-cr-ud);
103
- top: 50%;
104
- transform: translateY(-50%);
105
- border-radius: 50%;
106
- }
107
-
108
- .line__container::before {
109
- left: 0;
110
- }
111
-
112
- .line__container::after {
113
- right: 0;
114
- }
115
-
116
- &[data-line-end-points="square"] .line__container::before,
117
- &[data-line-end-points="square"] .line__container::after {
118
- border-radius: 0;
119
- }
120
- }
121
- }
122
-
123
- // ─── Vertical Line ───────────────────────
124
- &[data-line-direction="vertical"] {
125
- .line__core {
126
- width: 0;
127
- height: 100%;
128
- border-left: var(--_ctm-lt-le-ts) solid var(--_ctm-dn-le-cr-ud);
129
- }
130
-
131
- &[data-line-style="solid"] .line__core {
132
- border-left-style: solid;
133
- }
134
-
135
- &[data-line-style="dotted"] .line__core {
136
- border-left-style: dotted;
137
- }
138
-
139
- &[data-show-line-end-points="true"] {
140
- .line__container::before,
141
- .line__container::after {
142
- content: "";
143
- position: absolute;
144
- width: 8px;
145
- height: 8px;
146
- background-color: var(--_ctm-dn-le-cr-ud);
147
- left: 50%;
148
- transform: translateX(-50%);
149
- border-radius: 50%; // Default is circle
150
- }
151
-
152
- .line__container::before {
153
- top: 0;
154
- }
155
-
156
- .line__container::after {
157
- bottom: 0;
158
- }
159
-
160
- &[data-line-end-points="square"] .line__container::before,
161
- &[data-line-end-points="square"] .line__container::after {
162
- border-radius: 0;
163
- }
164
- }
165
- }
166
- }
1
+ [data-div-type="element"][data-element-type="line"] {
2
+ // width: 100%;
3
+ width: var(
4
+ --_sf-el-wh-st-mx,
5
+ calc(
6
+ 1% *
7
+ var(
8
+ --_ctm-mob-ele-nw-wh-vl,
9
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
10
+ )
11
+ )
12
+ );
13
+ height: var(--_ctm-lt-ht);
14
+
15
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
16
+
17
+ aspect-ratio: 1 / var(--_sf-aspect-ratio);
18
+
19
+ .wrapper {
20
+ width: 100%;
21
+ // height: 100%;
22
+ height: var(--_ctm-lt-ht);
23
+ }
24
+
25
+ .line__container {
26
+ position: relative;
27
+ width: 100%;
28
+ height: 100%;
29
+ display: flex;
30
+ align-items: center;
31
+ justify-content: center;
32
+
33
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
34
+ background-color: var(
35
+ --_ctm-mob-dn-le-wt-bd-cr,
36
+ var(--_ctm-tab-dn-le-wt-bd-cr, var(--_ctm-dn-le-wt-bd-cr))
37
+ );
38
+ border-radius: var(
39
+ --_ctm-mob-dn-le-wt-br-rs,
40
+ var(--_ctm-tab-dn-le-wt-br-rs, var(--_ctm-dn-le-wt-br-rs))
41
+ );
42
+
43
+ .line__core {
44
+ display: block;
45
+ background-color: transparent;
46
+ border-top-style: solid;
47
+ }
48
+ }
49
+
50
+ &[data-widget-border="true"] {
51
+ .line__container {
52
+ border-color: var(
53
+ --_ctm-mob-dn-le-wt-br-cr,
54
+ var(--_ctm-tab-dn-le-wt-br-cr, var(--_ctm-dn-le-wt-br-cr))
55
+ );
56
+ border-style: var(
57
+ --_ctm-mob-dn-le-wt-br-se,
58
+ var(--_ctm-tab-dn-le-wt-br-se, var(--_ctm-dn-le-wt-br-se))
59
+ );
60
+ border-width: var(
61
+ --_ctm-mob-dn-le-wt-br-wh,
62
+ var(--_ctm-tab-dn-le-wt-br-wh, var(--_ctm-dn-le-wt-br-wh))
63
+ );
64
+ }
65
+ }
66
+
67
+ &[data-widget-shadow="true"] {
68
+ .line__container {
69
+ box-shadow: var(
70
+ --_show-shadow,
71
+ var(--_ctm-mob-dn-le-wt-sw-ae, var(--_ctm-tab-dn-le-wt-sw-ae, var(--_ctm-dn-le-wt-sw-ae)))
72
+ var(--_ctm-mob-dn-le-wt-sw-br, var(--_ctm-tab-dn-le-wt-sw-br, var(--_ctm-dn-le-wt-sw-br)))
73
+ var(--_ctm-mob-dn-le-wt-sw-sd, var(--_ctm-tab-dn-le-wt-sw-sd, var(--_ctm-dn-le-wt-sw-sd)))
74
+ var(--_ctm-mob-dn-le-wt-sw-cr, var(--_ctm-tab-dn-le-wt-sw-cr, var(--_ctm-dn-le-wt-sw-cr)))
75
+ );
76
+ }
77
+ }
78
+
79
+ // ─── Horizontal Line ─────────────────────
80
+ &[data-line-direction="horizontal"] {
81
+ .line__core {
82
+ width: 100%;
83
+ height: 0;
84
+ border-width: var(--_ctm-lt-le-ts);
85
+ border-color: var(--_ctm-dn-le-cr-bd-cr);
86
+ // border-top: var(--_ctm-lt-le-ts) solid var(--_ctm-dn-le-cr-ud);
87
+ }
88
+
89
+ &[data-line-style="solid"] .line__core {
90
+ border-top-style: solid;
91
+ border-width: var(--_ctm-lt-le-ts);
92
+ border-color: var(--_ctm-dn-le-cr-bd-cr);
93
+ }
94
+
95
+ &[data-line-style="dotted"] .line__core {
96
+ border-top-style: dotted;
97
+ border-width: var(--_ctm-lt-le-ts);
98
+ border-color: var(--_ctm-dn-le-cr-bd-cr);
99
+ }
100
+ &[data-line-style="dashed"] .line__core {
101
+ border-top-style: dashed;
102
+ border-width: var(--_ctm-lt-le-ts);
103
+ border-color: var(--_ctm-dn-le-cr-bd-cr);
104
+ }
105
+ &[data-line-style="double"] .line__core {
106
+ border-top-style: double;
107
+ border-width: var(--_ctm-lt-le-ts);
108
+ border-color: var(--_ctm-dn-le-cr-bd-cr);
109
+ }
110
+
111
+ &[data-line-style="groove"] .line__core {
112
+ border-top-style: groove;
113
+ border-width: var(--_ctm-lt-le-ts);
114
+ border-color: var(--_ctm-dn-le-cr-bd-cr);
115
+ }
116
+
117
+ &[data-line-style="ridge"] .line__core {
118
+ border-top-style: ridge;
119
+ border-width: var(--_ctm-lt-le-ts);
120
+ border-color: var(--_ctm-dn-le-cr-bd-cr);
121
+ }
122
+
123
+ &[data-line-style="inset"] .line__core {
124
+ border-top-style: inset;
125
+ border-width: var(--_ctm-lt-le-ts);
126
+ border-color: var(--_ctm-dn-le-cr-bd-cr);
127
+ }
128
+
129
+ &[data-line-style="outset"] .line__core {
130
+ border-top-style: outset;
131
+ border-width: var(--_ctm-lt-le-ts);
132
+ border-color: var(--_ctm-dn-le-cr-bd-cr);
133
+ }
134
+
135
+ &[data-line-style="none"] .line__core {
136
+ border-top-style: none;
137
+ }
138
+
139
+ &[data-line-style="hidden"] .line__core {
140
+ border-top-style: hidden;
141
+ }
142
+ &[data-show-line-end-points="true"] {
143
+ .line__container::before,
144
+ .line__container::after {
145
+ content: "";
146
+ position: absolute;
147
+ width: 8px;
148
+ height: 8px;
149
+ background-color: var(--_ctm-dn-le-cr-ud);
150
+ top: 50%;
151
+ transform: translateY(-50%);
152
+ border-radius: 50%;
153
+ }
154
+
155
+ .line__container::before {
156
+ left: 0;
157
+ }
158
+
159
+ .line__container::after {
160
+ right: 0;
161
+ }
162
+
163
+ &[data-line-end-points="square"] .line__container::before,
164
+ &[data-line-end-points="square"] .line__container::after {
165
+ border-radius: 0;
166
+ }
167
+ }
168
+ }
169
+
170
+ // ─── Vertical Line ───────────────────────
171
+ &[data-line-direction="vertical"] {
172
+ .line__core {
173
+ width: 0;
174
+ height: 100%;
175
+ border-width: var(--_ctm-lt-le-ts);
176
+ border-color: var(--_ctm-dn-le-cr-bd-cr);
177
+ // border-left: var(--_ctm-lt-le-ts) solid var(--_ctm-dn-le-cr-ud);
178
+ }
179
+
180
+ &[data-line-style="solid"] .line__core {
181
+ border-left-style: solid;
182
+ border-width: var(--_ctm-lt-le-ts);
183
+ border-color: var(--_ctm-dn-le-cr-bd-cr);
184
+ }
185
+
186
+ &[data-line-style="dotted"] .line__core {
187
+ border-left-style: dotted;
188
+ border-width: var(--_ctm-lt-le-ts);
189
+ border-color: var(--_ctm-dn-le-cr-bd-cr);
190
+ }
191
+ &[data-line-style="dashed"] .line__core {
192
+ border-left-style: dashed;
193
+ border-width: var(--_ctm-lt-le-ts);
194
+ border-color: var(--_ctm-dn-le-cr-bd-cr);
195
+ }
196
+ &[data-line-style="double"] .line__core {
197
+ border-left-style: double;
198
+ border-width: var(--_ctm-lt-le-ts);
199
+ border-color: var(--_ctm-dn-le-cr-bd-cr);
200
+ }
201
+
202
+ &[data-line-style="groove"] .line__core {
203
+ border-left-style: groove;
204
+ border-width: var(--_ctm-lt-le-ts);
205
+ border-color: var(--_ctm-dn-le-cr-bd-cr);
206
+ }
207
+
208
+ &[data-line-style="ridge"] .line__core {
209
+ border-left-style: ridge;
210
+ border-width: var(--_ctm-lt-le-ts);
211
+ border-color: var(--_ctm-dn-le-cr-bd-cr);
212
+ }
213
+
214
+ &[data-line-style="inset"] .line__core {
215
+ border-left-style: inset;
216
+ border-width: var(--_ctm-lt-le-ts);
217
+ border-color: var(--_ctm-dn-le-cr-bd-cr);
218
+ }
219
+
220
+ &[data-line-style="outset"] .line__core {
221
+ border-left-style: outset;
222
+ border-width: var(--_ctm-lt-le-ts);
223
+ border-color: var(--_ctm-dn-le-cr-bd-cr);
224
+ }
225
+
226
+ &[data-line-style="none"] .line__core {
227
+ border-left-style: none;
228
+ }
229
+
230
+ &[data-show-line-end-points="true"] {
231
+ .line__container::before,
232
+ .line__container::after {
233
+ content: "";
234
+ position: absolute;
235
+ width: 8px;
236
+ height: 8px;
237
+ background-color: var(--_ctm-dn-le-cr-ud);
238
+ left: 50%;
239
+ transform: translateX(-50%);
240
+ border-radius: 50%; // Default is circle
241
+ }
242
+
243
+ .line__container::before {
244
+ top: 0;
245
+ }
246
+
247
+ .line__container::after {
248
+ bottom: 0;
249
+ }
250
+
251
+ &[data-line-end-points="square"] .line__container::before,
252
+ &[data-line-end-points="square"] .line__container::after {
253
+ border-radius: 0;
254
+ }
255
+ }
256
+ }
257
+ }