@sc-360-v2/storefront-cms-library 0.2.43 → 0.2.45
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.
- package/README.md +12 -12
- package/dist/allocations.scss +106 -0
- package/dist/amount-estimator.scss +27 -15
- package/dist/builder.js +1 -1
- package/dist/button.scss +4 -1
- package/dist/cart.scss +45 -0
- package/dist/container.scss +41 -0
- package/dist/countdown.scss +11 -3
- package/dist/custom-fonts.scss +41 -0
- package/dist/globals.scss +94 -94
- package/dist/hotspot.scss +5 -5
- package/dist/image-temp.scss +7 -1
- package/dist/layouter-item.scss +65 -0
- package/dist/layouter.scss +259 -0
- package/dist/light-box-v2.scss +71 -0
- package/dist/product-basic-elements.scss +20 -8
- package/dist/product-highlights.scss +38 -5
- package/dist/product-image copy.scss +788 -0
- package/dist/product-image.scss +529 -444
- package/dist/productDetails.scss +15 -2
- package/dist/profile.scss +14 -0
- package/dist/quantity-selector.scss +2 -0
- package/dist/repeater-item.scss +44 -3
- package/dist/repeater.scss +38 -0
- package/dist/search.scss +61 -21
- package/dist/section.scss +69 -54
- package/dist/static-text.scss +53 -0
- package/dist/text-temp.scss +24 -13
- package/dist/types/builder/elements/category-details/index.d.ts +68 -0
- package/dist/types/builder/enums/index.d.ts +3 -0
- package/dist/types/builder/index.d.ts +2 -1
- package/dist/types/builder/tools/element-edit/categoryDetails.d.ts +17 -0
- package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
- package/dist/uom-selector.scss +280 -4
- package/dist/variant-picker.scss +71 -0
- package/dist/volume-pricing.scss +8 -0
- package/dist/widget.scss +5 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
# @sc-360-v2/storefront-cms-library
|
|
2
|
-
|
|
3
|
-
`@sc-360-v2/storefront-cms-library` is a versatile library that provides styling and property components for other modules in your projects. This package is designed to streamline the creation of consistent and customizable storefront layouts.
|
|
4
|
-
|
|
5
|
-
## Installation
|
|
6
|
-
|
|
7
|
-
You can install the package using npm or yarn:
|
|
8
|
-
|
|
9
|
-
```bash
|
|
10
|
-
npm install @sc-360-v2/storefront-cms-library
|
|
11
|
-
# or
|
|
12
|
-
yarn add @sc-360-v2/storefront-cms-library
|
|
1
|
+
# @sc-360-v2/storefront-cms-library
|
|
2
|
+
|
|
3
|
+
`@sc-360-v2/storefront-cms-library` is a versatile library that provides styling and property components for other modules in your projects. This package is designed to streamline the creation of consistent and customizable storefront layouts.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
You can install the package using npm or yarn:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @sc-360-v2/storefront-cms-library
|
|
11
|
+
# or
|
|
12
|
+
yarn add @sc-360-v2/storefront-cms-library
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
@use "sass:list";
|
|
3
|
+
|
|
4
|
+
$resizerId: "[data-cms-tool='cms-element-resizer']";
|
|
5
|
+
$resizeActive: '[data-cms-element-resizer="true"]';
|
|
6
|
+
[data-div-type="element"] {
|
|
7
|
+
&[data-element-type="allocations"] {
|
|
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);
|
|
10
|
+
|
|
11
|
+
& > div {
|
|
12
|
+
&.wrapper {
|
|
13
|
+
width: 100%;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.allocations_table_wrapper {
|
|
18
|
+
display: flex;
|
|
19
|
+
flex-direction: column;
|
|
20
|
+
align-self: stretch;
|
|
21
|
+
align-items: center;
|
|
22
|
+
overflow-x: auto;
|
|
23
|
+
|
|
24
|
+
.allocations_table {
|
|
25
|
+
width: 100%;
|
|
26
|
+
border: 1px solid var(--_gray-200);
|
|
27
|
+
border-collapse: collapse;
|
|
28
|
+
|
|
29
|
+
th {
|
|
30
|
+
height: 44px;
|
|
31
|
+
padding: 12px 24px;
|
|
32
|
+
gap: 12px;
|
|
33
|
+
border-right: 1px solid var(--_gray-200);
|
|
34
|
+
border-bottom: 1px solid var(--_gray-200);
|
|
35
|
+
background: var(--_gray-25);
|
|
36
|
+
color: var(--_gray-600,);
|
|
37
|
+
font-size: 11px;
|
|
38
|
+
font-weight: 600;
|
|
39
|
+
line-height: 18px;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
tbody {
|
|
43
|
+
td {
|
|
44
|
+
height: 67px;
|
|
45
|
+
background-color: #fff;
|
|
46
|
+
padding: var(--_ctm-lt-sg-bn-is, 16px 16px 16px 24px);
|
|
47
|
+
border-bottom: 1px solid var(--_gray-200);
|
|
48
|
+
color: var(--_gray-900);
|
|
49
|
+
font-size: 14px;
|
|
50
|
+
font-weight: 400;
|
|
51
|
+
line-height: 20px;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.note_wrapper {
|
|
57
|
+
display: flex;
|
|
58
|
+
width: 100%;
|
|
59
|
+
padding: 0px 16px;
|
|
60
|
+
flex-direction: column;
|
|
61
|
+
justify-content: center;
|
|
62
|
+
align-items: center;
|
|
63
|
+
gap: 8px;
|
|
64
|
+
border-top: 1px solid var(--_gray-200);
|
|
65
|
+
background: var(--_gray-50);
|
|
66
|
+
min-height: 76px;
|
|
67
|
+
|
|
68
|
+
.note {
|
|
69
|
+
color: var(--_gray-600);
|
|
70
|
+
font-weight: 400;
|
|
71
|
+
line-height: 24px;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.redeem_now_wrapper {
|
|
75
|
+
display: flex;
|
|
76
|
+
justify-content: center;
|
|
77
|
+
align-items: center;
|
|
78
|
+
gap: 24px;
|
|
79
|
+
|
|
80
|
+
.redeem_now_btn {
|
|
81
|
+
display: flex;
|
|
82
|
+
justify-content: center;
|
|
83
|
+
align-items: center;
|
|
84
|
+
gap: 8px;
|
|
85
|
+
color: var(--_primary-400);
|
|
86
|
+
font-size: 14px;
|
|
87
|
+
font-weight: 600;
|
|
88
|
+
line-height: 20px;
|
|
89
|
+
|
|
90
|
+
&:hover {
|
|
91
|
+
color: #53389e;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
&:focus {
|
|
95
|
+
color: #162578;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
&:disabled {
|
|
99
|
+
color: #d0d5dd;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
@@ -151,8 +151,11 @@
|
|
|
151
151
|
line-height: var(--_ctm-dn-vw-os-bn-dt-se-le-ht);
|
|
152
152
|
text-decoration: var(--_ctm-dn-vw-os-bn-dt-se-ue);
|
|
153
153
|
svg {
|
|
154
|
-
width: var(--_ctm-dn-vw-os-bn-dt-se-in-se);
|
|
155
|
-
height: var(
|
|
154
|
+
width: var(--_ctm-dn-vw-os-bn-dt-se-in-se, var(--_ctm-dn-vw-os-bn-dt-se-in-ad-tt-sg));
|
|
155
|
+
height: var(
|
|
156
|
+
--_ctm-dn-vw-os-bn-dt-se-in-se,
|
|
157
|
+
var(--_ctm-dn-vw-os-bn-dt-se-in-ad-tt-sg)
|
|
158
|
+
);
|
|
156
159
|
path {
|
|
157
160
|
stroke: var(--_ctm-dn-vw-os-bn-dt-se-in-c1);
|
|
158
161
|
}
|
|
@@ -264,15 +267,15 @@
|
|
|
264
267
|
padding-bottom: 10px;
|
|
265
268
|
margin-bottom: 0px;
|
|
266
269
|
color: var(--_primary-400);
|
|
267
|
-
color: var(--_ctm-dn-
|
|
268
|
-
font-family: var(--_ctm-dn-
|
|
269
|
-
font-size: var(--_ctm-dn-
|
|
270
|
-
font-weight: var(--_ctm-dn-
|
|
271
|
-
font-style: var(--_ctm-dn-
|
|
272
|
-
text-align: var(--_ctm-dn-
|
|
273
|
-
letter-spacing: var(--_ctm-dn-
|
|
274
|
-
line-height: var(--_ctm-dn-
|
|
275
|
-
text-decoration: var(--_ctm-dn-wt-tt-ss-ue);
|
|
270
|
+
color: var(--_ctm-dn-sg-ne-cr);
|
|
271
|
+
font-family: var(--_ctm-dn-sg-ne-ft-fy), sans-serif;
|
|
272
|
+
font-size: var(--_ctm-dn-sg-ne-ft-se);
|
|
273
|
+
font-weight: var(--_ctm-dn-sg-ne-ft-wt);
|
|
274
|
+
font-style: var(--_ctm-dn-it-se-ft-se-ic);
|
|
275
|
+
text-align: var(--_ctm-dn-sg-ne-tt-an);
|
|
276
|
+
letter-spacing: var(--_ctm-dn-it-se-lr-sg);
|
|
277
|
+
line-height: var(--_ctm-dn-sg-ne-le-ht);
|
|
278
|
+
text-decoration: var(--_ctm-dn-wt-tt-ss-ue-dc);
|
|
276
279
|
}
|
|
277
280
|
.stack {
|
|
278
281
|
display: grid;
|
|
@@ -294,8 +297,6 @@
|
|
|
294
297
|
// grid-template-columns: repeat(2, minmax(auto, 1fr));
|
|
295
298
|
gap: var(--_ctm-lt-im-sg);
|
|
296
299
|
padding: var(--_ctm-lt-im-pg);
|
|
297
|
-
gap: 12px;
|
|
298
|
-
padding: 12px;
|
|
299
300
|
}
|
|
300
301
|
.item {
|
|
301
302
|
display: flex;
|
|
@@ -343,6 +344,8 @@
|
|
|
343
344
|
gap: 16px;
|
|
344
345
|
font-weight: 500;
|
|
345
346
|
flex-wrap: wrap;
|
|
347
|
+
justify-content: var(--_ctm-dn-im-se-ct-at);
|
|
348
|
+
|
|
346
349
|
span {
|
|
347
350
|
line-height: 12px;
|
|
348
351
|
}
|
|
@@ -350,8 +353,17 @@
|
|
|
350
353
|
.card {
|
|
351
354
|
width: 60px;
|
|
352
355
|
height: 50px;
|
|
353
|
-
background-color:
|
|
354
|
-
border-
|
|
356
|
+
background-color: var(--_ctm-dn-sg-md-lo-bd-cr);
|
|
357
|
+
border-color: var(--_ctm-dn-sg-md-lo-br-cr);
|
|
358
|
+
border-style: var(--_ctm-dn-sg-md-lo-br-se);
|
|
359
|
+
border-width: var(--_ctm-dn-sg-md-lo-br-wh);
|
|
360
|
+
border-radius: var(--_ctm-dn-sg-md-lo-br-rs);
|
|
361
|
+
box-shadow: var(
|
|
362
|
+
var(--_ctm-dn-sg-md-lo-sw-ae, var(--_tst-dn-sw-ae))
|
|
363
|
+
var(--_ctm-dn-sg-md-lo-sw-br, var(--_tst-dn-sw-br))
|
|
364
|
+
var(--_ctm-dn-sg-md-lo-sw-sd, var(--_tst-dn-sw-sd))
|
|
365
|
+
var(--_ctm-dn-sg-md-lo-sw-cr, var(--_tst-dn-sw-cr))
|
|
366
|
+
);
|
|
355
367
|
}
|
|
356
368
|
}
|
|
357
369
|
}
|