@sc-360-v2/storefront-cms-library 0.3.12 → 0.3.14

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.
@@ -5,7 +5,13 @@ $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="allocationDetails"] {
8
- width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
8
+ // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
9
+ width: var(
10
+ --_sf-el-wh-st-mx,
11
+ calc(
12
+ 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
13
+ )
14
+ );
9
15
  margin: var(--_ctm-lt-mn, --_tst-lt-mn);
10
16
 
11
17
  & > div {
@@ -0,0 +1,382 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @function ctm-var($base) {
4
+ @return unquote("var(--_ctm-mob-#{$base}, var(--_ctm-tab-#{$base}, var(--_ctm-#{$base})))");
5
+ }
6
+
7
+ $resizerId: "[data-cms-tool='cms-element-resizer']";
8
+ $resizeActive: '[data-cms-element-resizer="true"]';
9
+ [data-div-type="element"] {
10
+ &[data-element-type="badge"] {
11
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
12
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
13
+ min-width: 100px;
14
+ &.vtl {
15
+ min-height: 100px !important;
16
+ min-width: 30px;
17
+ height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
18
+ width: auto;
19
+ .badge__wrapper {
20
+ flex-direction: column;
21
+ justify-content: center;
22
+ align-items: center;
23
+ width: fit-content;
24
+
25
+ .status_badge {
26
+ flex-direction: column;
27
+ align-items: center;
28
+ justify-content: center;
29
+ width: 26px;
30
+ padding: 0px 24px 24px;
31
+ &[data-styletag="style1"] {
32
+ border-radius: 12px;
33
+ font-weight: bold;
34
+ white-space: nowrap;
35
+ border: 2px solid #fff;
36
+ text-transform: uppercase;
37
+ }
38
+ &[data-styletag="style2"] {
39
+ text-transform: uppercase;
40
+ //clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
41
+ clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 90%, 0% 100%);
42
+ }
43
+
44
+ &[data-styletag="style3"] {
45
+ clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 90%, 0% 100%);
46
+ }
47
+ &[data-styletag="style4"] {
48
+ clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
49
+ }
50
+ &[data-styletag="style5"] {
51
+ clip-path: polygon(0% 10%, 50% 0%, 100% 10%, 100% 90%, 50% 100%, 0% 90%);
52
+ }
53
+
54
+ .product_tag {
55
+ //writing-mode: vertical-rl;
56
+ //transform: rotate(180deg); // top-to-bottom vertical text
57
+ }
58
+
59
+ .icon {
60
+ margin-bottom: 4px;
61
+ }
62
+ }
63
+ }
64
+ }
65
+ &.hrz {
66
+ min-height: 30px !important;
67
+ min-width: 100px !important;
68
+ height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
69
+ .badge__wrapper {
70
+ flex-direction: row;
71
+ justify-content: center;
72
+ align-items: center;
73
+
74
+ .status_badge {
75
+ flex-direction: row;
76
+ align-items: center;
77
+ justify-content: center;
78
+ padding: 8px 12px;
79
+ &[data-styletag="style1"] {
80
+ border-radius: 12px;
81
+ font-weight: bold;
82
+ white-space: nowrap;
83
+ border: 2px solid #fff;
84
+ text-transform: uppercase;
85
+ }
86
+ &[data-styletag="style2"] {
87
+ text-transform: uppercase;
88
+ white-space: nowrap;
89
+ clip-path: polygon(0 0, 80% 0, 80% 100%, 0% 100%, 10% 50%);
90
+ }
91
+
92
+ &[data-styletag="style3"] {
93
+ clip-path: polygon(20% 0, 100% 0, 90% 50%, 100% 100%, 20% 100%);
94
+ }
95
+
96
+ &[data-styletag="style4"] {
97
+ clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
98
+ }
99
+ &[data-styletag="style5"] {
100
+ clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
101
+ }
102
+
103
+ .product_tag {
104
+ white-space: nowrap;
105
+ text-align: center;
106
+ }
107
+
108
+ .icon {
109
+ margin-right: 6px;
110
+ }
111
+ }
112
+ }
113
+ }
114
+ & > div {
115
+ &.wrapper {
116
+ //width: 100%;
117
+ height: 100%;
118
+ }
119
+ }
120
+ .badge__wrapper {
121
+ display: flex;
122
+ align-items: center;
123
+ align-self: stretch;
124
+ justify-content: var(--_sf-hr-at, ctm-var(dn-be-ct-dt-se-at));
125
+ gap: ctm-var(lt-im-gp);
126
+ // width: 100%;
127
+ // height: 100%;
128
+
129
+ .status_badge {
130
+ display: flex;
131
+ align-items: center;
132
+ gap: ctm-var(lt-sg-bn-is);
133
+ width: 100%;
134
+ height: 100%;
135
+ mix-blend-mode: multiply;
136
+
137
+ // &[data-styletag="style7"] {
138
+ // clip-path: polygon(0 0, 80% 0, 85% 50%, 80% 100%, 0 100%, 5% 50%);
139
+ // display: flex;
140
+ // justify-content: space-evenly;
141
+ // align-items: center;
142
+ // }
143
+ // &[data-styletag="style6"] {
144
+ // clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
145
+ // line-height: 1.3;
146
+ // }
147
+
148
+ &[data-producttag="New"] {
149
+ background-color: ctm-var(dn-be-nw-se-bd-cr);
150
+ border-width: ctm-var(dn-be-nw-se-br-wh);
151
+ border-color: ctm-var(dn-be-nw-se-br-cr);
152
+ border-style: ctm-var(dn-be-nw-se-br-se);
153
+ border-radius: ctm-var(dn-be-nw-se-br-rs);
154
+ box-shadow: ctm-var(dn-be-nw-se-sw-ae) ctm-var(dn-be-nw-se-sw-br)
155
+ ctm-var(dn-be-nw-se-sw-sd) ctm-var(dn-be-nw-se-sw-cr);
156
+ .icon {
157
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
158
+ svg {
159
+ width: ctm-var(dn-be-nw-se-in-se);
160
+ height: ctm-var(dn-be-nw-se-in-se);
161
+ path {
162
+ stroke: ctm-var(dn-be-nw-se-in-c1);
163
+ }
164
+ }
165
+ }
166
+ }
167
+ &[data-producttag="Bestseller"] {
168
+ //background-color: #f57c00;
169
+ background-color: ctm-var(dn-be-br-se-bd-cr);
170
+ border-width: ctm-var(dn-be-br-se-br-wh);
171
+ border-color: ctm-var(dn-be-br-se-br-cr);
172
+ border-style: ctm-var(dn-be-br-se-br-se);
173
+ border-radius: ctm-var(dn-be-br-se-br-rs);
174
+ box-shadow: ctm-var(dn-be-br-se-sw-ae) ctm-var(dn-be-br-se-sw-br)
175
+ ctm-var(dn-be-br-se-sw-sd) ctm-var(dn-be-br-se-sw-cr);
176
+ .icon {
177
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
178
+ svg {
179
+ width: ctm-var(dn-be-br-se-in-se);
180
+ height: ctm-var(dn-be-br-se-in-se);
181
+
182
+ path {
183
+ stroke: ctm-var(dn-be-br-se-in-c1);
184
+ }
185
+ }
186
+ }
187
+ }
188
+ &[data-producttag="Limited"] {
189
+ //background-color: #6a1b9a;
190
+ background-color: ctm-var(dn-be-ld-se-bd-cr);
191
+ border-width: ctm-var(dn-be-ld-se-br-wh);
192
+ border-color: ctm-var(dn-be-ld-se-br-cr);
193
+ border-style: ctm-var(dn-be-ld-se-br-se);
194
+ border-radius: ctm-var(dn-be-ld-se-br-rs);
195
+ box-shadow: ctm-var(dn-be-ld-se-sw-ae) ctm-var(dn-be-ld-se-sw-br)
196
+ ctm-var(dn-be-ld-se-sw-sd) ctm-var(dn-be-ld-se-sw-cr);
197
+ .icon {
198
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
199
+ svg {
200
+ width: ctm-var(dn-be-ld-se-in-se);
201
+ height: ctm-var(dn-be-ld-se-in-se);
202
+
203
+ path {
204
+ stroke: ctm-var(dn-be-ld-se-in-c1);
205
+ }
206
+ }
207
+ }
208
+ }
209
+ &[data-producttag="Exclusive"] {
210
+ //background-color: #1976d2;
211
+ background-color: ctm-var(dn-be-ee-se-bd-cr);
212
+ border-width: ctm-var(dn-be-ee-se-br-wh);
213
+ border-color: ctm-var(dn-be-ee-se-br-cr);
214
+ border-style: ctm-var(dn-be-ee-se-br-se);
215
+ border-radius: ctm-var(dn-be-ee-se-br-rs);
216
+ box-shadow: ctm-var(dn-be-ee-se-sw-ae) ctm-var(dn-be-ee-se-sw-br)
217
+ ctm-var(dn-be-ee-se-sw-sd) ctm-var(dn-be-ee-se-sw-cr);
218
+ .icon {
219
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
220
+ svg {
221
+ width: ctm-var(dn-be-ee-se-in-se);
222
+ height: ctm-var(dn-be-ee-se-in-se);
223
+
224
+ path {
225
+ stroke: ctm-var(dn-be-ee-se-in-c1);
226
+ }
227
+ }
228
+ }
229
+ }
230
+
231
+ .product_tag {
232
+ &[data-producttag="New"] {
233
+ font-family: ctm-var(dn-be-nw-se-ft-fy);
234
+ font-size: ctm-var(dn-be-nw-se-ft-se);
235
+ color: ctm-var(dn-be-nw-se-cr);
236
+ font-weight: ctm-var(dn-be-nw-se-ft-wt);
237
+ font-style: ctm-var(dn-be-nw-se-ft-se-ic);
238
+ text-decoration: ctm-var(dn-be-nw-se-ue);
239
+ text-align: ctm-var(dn-be-nw-se-tt-an);
240
+ letter-spacing: ctm-var(dn-be-nw-se-lr-sg);
241
+ line-height: ctm-var(dn-be-nw-se-le-ht);
242
+ }
243
+ &[data-producttag="Bestseller"] {
244
+ font-family: ctm-var(dn-be-br-se-ft-fy);
245
+ font-size: ctm-var(dn-be-br-se-ft-se);
246
+ color: ctm-var(dn-be-br-se-cr);
247
+ font-weight: ctm-var(dn-be-br-se-ft-wt);
248
+ font-style: ctm-var(dn-be-br-se-ft-se-ic);
249
+ text-decoration: ctm-var(dn-be-br-se-ue);
250
+ text-align: ctm-var(dn-be-br-se-tt-an);
251
+ letter-spacing: ctm-var(dn-be-br-se-lr-sg);
252
+ line-height: ctm-var(dn-be-br-se-le-ht);
253
+ }
254
+ &[data-producttag="Limited"] {
255
+ font-family: ctm-var(dn-be-ld-se-ft-fy);
256
+ font-size: ctm-var(dn-be-ld-se-ft-se);
257
+ color: ctm-var(dn-be-ld-se-cr);
258
+ font-weight: ctm-var(dn-be-ld-se-ft-wt);
259
+ font-style: ctm-var(dn-be-ld-se-ft-se-ic);
260
+ text-decoration: ctm-var(dn-be-ld-se-ue);
261
+ text-align: ctm-var(dn-be-ld-se-tt-an);
262
+ letter-spacing: ctm-var(dn-be-ld-se-lr-sg);
263
+ line-height: ctm-var(dn-be-ld-se-le-ht);
264
+ }
265
+ &[data-producttag="Exclusive"] {
266
+ font-family: ctm-var(dn-be-ee-se-ft-fy);
267
+ font-size: ctm-var(dn-be-ee-se-ft-se);
268
+ color: ctm-var(dn-be-ee-se-cr);
269
+ font-weight: ctm-var(dn-be-ee-se-ft-wt);
270
+ font-style: ctm-var(dn-be-ee-se-ft-se-ic);
271
+ text-decoration: ctm-var(dn-be-ee-se-ue);
272
+ text-align: ctm-var(dn-be-ee-se-tt-an);
273
+ letter-spacing: ctm-var(dn-be-ee-se-lr-sg);
274
+ line-height: ctm-var(dn-be-ee-se-le-ht);
275
+ }
276
+ }
277
+ }
278
+ .badge_vertical_pill {
279
+ background-color: #4caf50;
280
+ color: #fff;
281
+ padding: 10px 8px;
282
+ border-radius: 12px;
283
+ font-weight: bold;
284
+ writing-mode: vertical-rl;
285
+ text-align: center;
286
+ font-size: 16px;
287
+ white-space: nowrap;
288
+ border: 2px solid #fff;
289
+ }
290
+ .badge_big_sale {
291
+ background-color: #ffa726;
292
+ color: #fff;
293
+ display: flex;
294
+ align-items: center;
295
+ font-weight: bold;
296
+ font-size: 14px;
297
+ text-transform: uppercase;
298
+ padding: 6px 12px;
299
+ white-space: nowrap;
300
+ clip-path: polygon(0 0, 80% 0, 80% 100%, 0% 100%, 10% 50%);
301
+ gap: 8px;
302
+
303
+ .left {
304
+ font-size: 16px;
305
+ }
306
+
307
+ .right {
308
+ font-size: 12px;
309
+ font-weight: normal;
310
+ }
311
+ }
312
+ .badge_bogo {
313
+ background-color: #d5a373;
314
+ color: #fff;
315
+ padding: 6px 16px;
316
+ clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
317
+ font-weight: bold;
318
+ font-size: 14px;
319
+ display: inline-block;
320
+ text-transform: uppercase;
321
+ white-space: nowrap;
322
+ border: 2px dashed #fff;
323
+ }
324
+ .badgerightarrow {
325
+ background-color: #c49b6c;
326
+ color: white;
327
+ padding: 6px 12px;
328
+ clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
329
+ font-weight: bold;
330
+ font-size: 14px;
331
+ }
332
+ .badgebigsale {
333
+ background-color: #ff9800;
334
+ color: white;
335
+ padding: 6px 14px;
336
+ clip-path: polygon(0 0, 80% 0, 85% 50%, 80% 100%, 0 100%, 5% 50%);
337
+ display: flex;
338
+ justify-content: space-between;
339
+ align-items: center;
340
+ font-weight: bold;
341
+
342
+ .label {
343
+ font-size: 16px;
344
+ }
345
+
346
+ .offer {
347
+ font-size: 12px;
348
+ }
349
+ }
350
+ .badge_verticalpill {
351
+ writing-mode: vertical-rl;
352
+ text-align: center;
353
+ background-color: #4caf50;
354
+ color: white;
355
+ padding: 12px 4px;
356
+ border-radius: 10px;
357
+ font-weight: bold;
358
+ font-size: 14px;
359
+ }
360
+ .badge_tail_down {
361
+ background-color: #8bc34a;
362
+ color: white;
363
+ padding: 10px 8px;
364
+ clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
365
+ text-align: center;
366
+ font-weight: bold;
367
+ font-size: 14px;
368
+ line-height: 1.3;
369
+ }
370
+ .badge_ribbon {
371
+ background-color: #d2b48c;
372
+ color: white;
373
+ font-weight: bold;
374
+ font-size: 14px;
375
+ padding: 6px 12px;
376
+ clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
377
+ transform: rotate(-5deg);
378
+ text-align: center;
379
+ }
380
+ }
381
+ }
382
+ }