@sc-360-v2/storefront-cms-library 0.5.15 → 0.5.16
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/dist/add-existing-form.scss +68 -66
- package/dist/builder.js +1 -1
- package/dist/cart-summary.scss +12 -8
- package/dist/category-groups-element.scss +514 -94
- package/dist/category-groups-product-image.scss +2226 -0
- package/dist/category-groups-product-options.scss +826 -0
- package/dist/category-groups-product-price.scss +4944 -0
- package/dist/coupon.scss +91 -4
- package/dist/gallery-slider-temp.scss +5 -5
- package/dist/global-styles.scss +175 -86
- package/dist/login.scss +2 -1
- package/dist/product-image.scss +5 -5
- package/dist/quota-details.scss +2 -2
- package/dist/social.scss +277 -276
- package/dist/types/builder/tools/element-edit/cartSummary.d.ts +11 -0
- package/dist/types/builder/tools/element-edit/categoryGroups.d.ts +2062 -7
- package/dist/types/builder/tools/element-edit/social.d.ts +7 -1
- package/package.json +1 -1
package/dist/global-styles.scss
CHANGED
|
@@ -1,86 +1,175 @@
|
|
|
1
|
-
@use "sass:map";
|
|
2
|
-
@use "sass:list";
|
|
3
|
-
@use "./functions.scss" as *;
|
|
4
|
-
|
|
5
|
-
.custom-upload {
|
|
6
|
-
display: flex;
|
|
7
|
-
&:has(.preview_image_container) {
|
|
8
|
-
justify-content: space-between;
|
|
9
|
-
}
|
|
10
|
-
align-items: center;
|
|
11
|
-
border: 1px solid var(--_gray-300);
|
|
12
|
-
background-color: var(--_base-white);
|
|
13
|
-
padding: 16px;
|
|
14
|
-
border-radius: 4px;
|
|
15
|
-
gap: 12px;
|
|
16
|
-
.preview_image_container {
|
|
17
|
-
width: 100%;
|
|
18
|
-
display: flex;
|
|
19
|
-
align-items: center;
|
|
20
|
-
gap: 12px;
|
|
21
|
-
.image_title {
|
|
22
|
-
font-size: 14px;
|
|
23
|
-
margin-top: 3px;
|
|
24
|
-
.label {
|
|
25
|
-
color: var(--_thm-cs-at-sy);
|
|
26
|
-
@include restrictToLinesShow(1);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
.preview_image {
|
|
30
|
-
height: 36px;
|
|
31
|
-
width: 36px;
|
|
32
|
-
border-radius: 50%;
|
|
33
|
-
padding: 4px;
|
|
34
|
-
background: var(--_base-white);
|
|
35
|
-
border: 1px solid var(--_gray-300);
|
|
36
|
-
img {
|
|
37
|
-
width: 100%;
|
|
38
|
-
width: 100%;
|
|
39
|
-
object-fit: contain;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
.clear_upload_icon {
|
|
44
|
-
svg {
|
|
45
|
-
width: 18px;
|
|
46
|
-
height: 18px;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
.uploadicon {
|
|
50
|
-
padding: 8px;
|
|
51
|
-
display: flex;
|
|
52
|
-
justify-content: center;
|
|
53
|
-
align-items: center;
|
|
54
|
-
background: var(--_gray-200);
|
|
55
|
-
outline: 6px solid var(--_gray-100);
|
|
56
|
-
border-radius: 50%;
|
|
57
|
-
height: 36px;
|
|
58
|
-
width: 36px;
|
|
59
|
-
.svg_icon {
|
|
60
|
-
svg {
|
|
61
|
-
width: 20px;
|
|
62
|
-
height: 20px;
|
|
63
|
-
path {
|
|
64
|
-
stroke: var(--_gray-700);
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.file_upload_text {
|
|
71
|
-
display: flex;
|
|
72
|
-
flex-direction: column;
|
|
73
|
-
gap: 8px;
|
|
74
|
-
.label {
|
|
75
|
-
@include restrictToLinesShow(1);
|
|
76
|
-
}
|
|
77
|
-
p {
|
|
78
|
-
color: var(--_thm-cs-at-py);
|
|
79
|
-
font-weight: 600;
|
|
80
|
-
}
|
|
81
|
-
span {
|
|
82
|
-
color: var(--_thm-cs-at-sy);
|
|
83
|
-
font-size: 14px;
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
}
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
@use "sass:list";
|
|
3
|
+
@use "./functions.scss" as *;
|
|
4
|
+
|
|
5
|
+
.custom-upload {
|
|
6
|
+
display: flex;
|
|
7
|
+
&:has(.preview_image_container) {
|
|
8
|
+
justify-content: space-between;
|
|
9
|
+
}
|
|
10
|
+
align-items: center;
|
|
11
|
+
border: 1px solid var(--_gray-300);
|
|
12
|
+
background-color: var(--_base-white);
|
|
13
|
+
padding: 16px;
|
|
14
|
+
border-radius: 4px;
|
|
15
|
+
gap: 12px;
|
|
16
|
+
.preview_image_container {
|
|
17
|
+
width: 100%;
|
|
18
|
+
display: flex;
|
|
19
|
+
align-items: center;
|
|
20
|
+
gap: 12px;
|
|
21
|
+
.image_title {
|
|
22
|
+
font-size: 14px;
|
|
23
|
+
margin-top: 3px;
|
|
24
|
+
.label {
|
|
25
|
+
color: var(--_thm-cs-at-sy);
|
|
26
|
+
@include restrictToLinesShow(1);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
.preview_image {
|
|
30
|
+
height: 36px;
|
|
31
|
+
width: 36px;
|
|
32
|
+
border-radius: 50%;
|
|
33
|
+
padding: 4px;
|
|
34
|
+
background: var(--_base-white);
|
|
35
|
+
border: 1px solid var(--_gray-300);
|
|
36
|
+
img {
|
|
37
|
+
width: 100%;
|
|
38
|
+
width: 100%;
|
|
39
|
+
object-fit: contain;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
.clear_upload_icon {
|
|
44
|
+
svg {
|
|
45
|
+
width: 18px;
|
|
46
|
+
height: 18px;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
.uploadicon {
|
|
50
|
+
padding: 8px;
|
|
51
|
+
display: flex;
|
|
52
|
+
justify-content: center;
|
|
53
|
+
align-items: center;
|
|
54
|
+
background: var(--_gray-200);
|
|
55
|
+
outline: 6px solid var(--_gray-100);
|
|
56
|
+
border-radius: 50%;
|
|
57
|
+
height: 36px;
|
|
58
|
+
width: 36px;
|
|
59
|
+
.svg_icon {
|
|
60
|
+
svg {
|
|
61
|
+
width: 20px;
|
|
62
|
+
height: 20px;
|
|
63
|
+
path {
|
|
64
|
+
stroke: var(--_gray-700);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.file_upload_text {
|
|
71
|
+
display: flex;
|
|
72
|
+
flex-direction: column;
|
|
73
|
+
gap: 8px;
|
|
74
|
+
.label {
|
|
75
|
+
@include restrictToLinesShow(1);
|
|
76
|
+
}
|
|
77
|
+
p {
|
|
78
|
+
color: var(--_thm-cs-at-py);
|
|
79
|
+
font-weight: 600;
|
|
80
|
+
}
|
|
81
|
+
span {
|
|
82
|
+
color: var(--_thm-cs-at-sy);
|
|
83
|
+
font-size: 14px;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
// Skeleton for the reused ProductOptions swatches (rendered inside the CMS
|
|
89
|
+
// builder/preview, e.g. the Category Groups product cards). Mirrors the website
|
|
90
|
+
// globals so the swatch placeholders keep their spacing here too.
|
|
91
|
+
.product_options_skeleton {
|
|
92
|
+
width: 100%;
|
|
93
|
+
.sklts_swatch {
|
|
94
|
+
display: flex;
|
|
95
|
+
gap: 8px;
|
|
96
|
+
margin-bottom: 8px;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
// Skeleton base styles (mirrored from storefront-websites globals so reused
|
|
101
|
+
// element skeletons render identically inside the CMS builder/preview).
|
|
102
|
+
.skeleton {
|
|
103
|
+
background-color: #e5e7eb !important;
|
|
104
|
+
border: none !important;
|
|
105
|
+
min-height: 8px;
|
|
106
|
+
position: relative;
|
|
107
|
+
overflow: hidden;
|
|
108
|
+
display: block;
|
|
109
|
+
|
|
110
|
+
&--rectangular {
|
|
111
|
+
width: 100%;
|
|
112
|
+
height: 100%;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
&--circular {
|
|
116
|
+
border-radius: 50%;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
&--text {
|
|
120
|
+
transform-origin: 0 55%;
|
|
121
|
+
transform: scale(1, 0.6);
|
|
122
|
+
border-radius: 4px;
|
|
123
|
+
|
|
124
|
+
&::before {
|
|
125
|
+
content: "\00a0";
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
&--shimmer {
|
|
130
|
+
&::after {
|
|
131
|
+
content: "";
|
|
132
|
+
position: absolute;
|
|
133
|
+
top: 0;
|
|
134
|
+
left: 0;
|
|
135
|
+
right: 0;
|
|
136
|
+
bottom: 0;
|
|
137
|
+
background: linear-gradient(
|
|
138
|
+
90deg,
|
|
139
|
+
transparent 0%,
|
|
140
|
+
rgba(255, 255, 255, 0.4) 50%,
|
|
141
|
+
transparent 100%
|
|
142
|
+
);
|
|
143
|
+
animation: skeleton-shimmer 1.5s infinite;
|
|
144
|
+
transform: translateX(-100%);
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
&--pulse {
|
|
149
|
+
animation: skeleton-pulse 1.5s ease-in-out infinite;
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
@keyframes skeleton-shimmer {
|
|
154
|
+
0% {
|
|
155
|
+
transform: translateX(-100%);
|
|
156
|
+
}
|
|
157
|
+
100% {
|
|
158
|
+
transform: translateX(100%);
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
@keyframes skeleton-pulse {
|
|
163
|
+
0%,
|
|
164
|
+
100% {
|
|
165
|
+
opacity: 1;
|
|
166
|
+
}
|
|
167
|
+
50% {
|
|
168
|
+
opacity: 0.5;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.skeleton__element {
|
|
173
|
+
@extend .skeleton;
|
|
174
|
+
@extend .skeleton--shimmer;
|
|
175
|
+
}
|
package/dist/login.scss
CHANGED
package/dist/product-image.scss
CHANGED
|
@@ -645,18 +645,18 @@ $defaultValues: (
|
|
|
645
645
|
}
|
|
646
646
|
|
|
647
647
|
.embla__container {
|
|
648
|
-
overflow: hidden;
|
|
648
|
+
// overflow: hidden;
|
|
649
649
|
height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
|
|
650
650
|
|
|
651
651
|
// min-height: var(--_ctm-height);
|
|
652
652
|
|
|
653
|
-
grid-template-columns: repeat(
|
|
654
|
-
var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
|
|
655
|
-
1fr
|
|
656
|
-
);
|
|
653
|
+
grid-template-columns: repeat(1, 1fr);
|
|
657
654
|
grid-template-rows: unset;
|
|
658
655
|
|
|
659
656
|
grid-auto-flow: row;
|
|
657
|
+
.embla__slide {
|
|
658
|
+
aspect-ratio: 7 / 2;
|
|
659
|
+
}
|
|
660
660
|
}
|
|
661
661
|
}
|
|
662
662
|
}
|
package/dist/quota-details.scss
CHANGED
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
|
|
43
43
|
& > .wrapper {
|
|
44
44
|
width: 100%;
|
|
45
|
-
height:
|
|
45
|
+
height: auto;
|
|
46
46
|
}
|
|
47
47
|
&[data-show-shadow="false"] {
|
|
48
48
|
--_show-shadow: none;
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
--_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
|
|
64
64
|
row-gap: var(--_sf-gp);
|
|
65
65
|
width: 100%;
|
|
66
|
-
height:
|
|
66
|
+
height: auto;
|
|
67
67
|
border-color: var(
|
|
68
68
|
--_ctm-mob-dn-wt-se-br-cr,
|
|
69
69
|
var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
|