@sc-360-v2/storefront-cms-library 0.4.25 → 0.4.26
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/bundle.scss +3 -1
- package/dist/functions.js +1 -1
- package/dist/global-styles.scss +86 -0
- package/dist/multi-select-dropdown.scss +229 -0
- package/dist/product-price.scss +11 -4
- package/dist/text-temp-v2.scss +1 -2
- package/dist/widget.scss +2 -0
- package/package.json +1 -1
|
@@ -0,0 +1,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
|
+
}
|
|
@@ -0,0 +1,229 @@
|
|
|
1
|
+
/* ----------------------------------------------
|
|
2
|
+
File: MultiSelect.scss
|
|
3
|
+
Place this in the same folder. This file contains styles only.
|
|
4
|
+
------------------------------------------------*/
|
|
5
|
+
@use "sass:map";
|
|
6
|
+
@use "sass:list";
|
|
7
|
+
|
|
8
|
+
$msd-bg: #fff;
|
|
9
|
+
$msd-border: #dcdfe4;
|
|
10
|
+
$msd-border-focus: #6b9cff;
|
|
11
|
+
$msd-text: #1f2937;
|
|
12
|
+
$msd-muted: #6b7280;
|
|
13
|
+
$msd-chip-bg: #f3f4f6;
|
|
14
|
+
$msd-chip-text: #111827;
|
|
15
|
+
$msd-chip-remove: #9ca3af;
|
|
16
|
+
$msd-chip-remove-hover: #4b5563;
|
|
17
|
+
$msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
|
|
18
|
+
|
|
19
|
+
.msd {
|
|
20
|
+
position: relative;
|
|
21
|
+
font-family:
|
|
22
|
+
ui-sans-serif,
|
|
23
|
+
system-ui,
|
|
24
|
+
-apple-system,
|
|
25
|
+
Segoe UI,
|
|
26
|
+
Roboto,
|
|
27
|
+
"Helvetica Neue",
|
|
28
|
+
Arial,
|
|
29
|
+
"Noto Sans",
|
|
30
|
+
"Apple Color Emoji",
|
|
31
|
+
"Segoe UI Emoji";
|
|
32
|
+
color: $msd-text;
|
|
33
|
+
&--disabled {
|
|
34
|
+
opacity: 0.6;
|
|
35
|
+
pointer-events: none;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.msd__control {
|
|
40
|
+
position: relative; // anchor for ellipsis
|
|
41
|
+
display: flex;
|
|
42
|
+
align-items: center;
|
|
43
|
+
gap: 8px;
|
|
44
|
+
min-height: 42px;
|
|
45
|
+
border: 1px solid $msd-border;
|
|
46
|
+
background: $msd-bg;
|
|
47
|
+
border-radius: 10px;
|
|
48
|
+
padding: 6px 8px;
|
|
49
|
+
cursor: text;
|
|
50
|
+
transition:
|
|
51
|
+
border-color 0.15s ease,
|
|
52
|
+
box-shadow 0.15s ease;
|
|
53
|
+
|
|
54
|
+
&--open {
|
|
55
|
+
box-shadow: $msd-shadow;
|
|
56
|
+
border-color: lighten($msd-border, 5%);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&:focus-within {
|
|
60
|
+
border-color: $msd-border-focus;
|
|
61
|
+
box-shadow: 0 0 0 3px rgba($msd-border-focus, 0.25);
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.msd__chips {
|
|
66
|
+
display: flex;
|
|
67
|
+
align-items: center;
|
|
68
|
+
flex-wrap: nowrap; // single line only
|
|
69
|
+
overflow: hidden; // hide overflowed chips
|
|
70
|
+
white-space: nowrap; // prevent wrapping
|
|
71
|
+
gap: 6px;
|
|
72
|
+
min-height: 28px;
|
|
73
|
+
flex: 1 1 auto;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.msd__chip {
|
|
77
|
+
// ensure chips do not wrap individually
|
|
78
|
+
flex: 0 0 auto;
|
|
79
|
+
display: inline-flex;
|
|
80
|
+
align-items: center;
|
|
81
|
+
gap: 6px;
|
|
82
|
+
padding: 4px 8px;
|
|
83
|
+
background: $msd-chip-bg;
|
|
84
|
+
border-radius: 999px;
|
|
85
|
+
line-height: 1;
|
|
86
|
+
border: 1px solid lighten($msd-border, 6%);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.msd__chipLabel {
|
|
90
|
+
font-size: 12px;
|
|
91
|
+
color: $msd-chip-text;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.msd__chipRemove {
|
|
95
|
+
border: 0;
|
|
96
|
+
background: transparent;
|
|
97
|
+
cursor: pointer;
|
|
98
|
+
color: $msd-chip-remove;
|
|
99
|
+
font-size: 14px;
|
|
100
|
+
line-height: 1;
|
|
101
|
+
padding: 0;
|
|
102
|
+
margin: 0;
|
|
103
|
+
&:hover {
|
|
104
|
+
color: $msd-chip-remove-hover;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.msd__input {
|
|
109
|
+
border: 0;
|
|
110
|
+
outline: 0;
|
|
111
|
+
flex: 0 0 auto;
|
|
112
|
+
min-width: 100px; // keep single line
|
|
113
|
+
max-width: 40%; // avoid pushing actions off-screen
|
|
114
|
+
font-size: 14px;
|
|
115
|
+
background: transparent;
|
|
116
|
+
color: $msd-text;
|
|
117
|
+
&::placeholder {
|
|
118
|
+
color: $msd-muted;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
.msd__clear {
|
|
122
|
+
svg {
|
|
123
|
+
width: 16px;
|
|
124
|
+
height: 16px;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
.msd__clear,
|
|
128
|
+
.msd__arrow {
|
|
129
|
+
border: 0;
|
|
130
|
+
background: transparent;
|
|
131
|
+
cursor: pointer;
|
|
132
|
+
font-size: 12px;
|
|
133
|
+
color: $msd-muted;
|
|
134
|
+
padding: 4px 6px;
|
|
135
|
+
border-radius: 6px;
|
|
136
|
+
&:hover {
|
|
137
|
+
background: #f8fafc;
|
|
138
|
+
color: #374151;
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.msd__ellipsis {
|
|
143
|
+
position: absolute;
|
|
144
|
+
right: 30px; // leave room for the arrow
|
|
145
|
+
top: 50%;
|
|
146
|
+
transform: translateY(-50%);
|
|
147
|
+
pointer-events: none;
|
|
148
|
+
background: $msd-bg;
|
|
149
|
+
padding-left: 6px;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.msd__menu {
|
|
153
|
+
position: absolute;
|
|
154
|
+
z-index: 20;
|
|
155
|
+
top: 100%;
|
|
156
|
+
left: 0;
|
|
157
|
+
right: 0;
|
|
158
|
+
background: $msd-bg;
|
|
159
|
+
border: 1px solid $msd-border;
|
|
160
|
+
border-radius: 10px;
|
|
161
|
+
box-shadow: $msd-shadow;
|
|
162
|
+
overflow: auto;
|
|
163
|
+
padding: 6px;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.msd__empty {
|
|
167
|
+
padding: 10px;
|
|
168
|
+
text-align: center;
|
|
169
|
+
color: $msd-muted;
|
|
170
|
+
font-size: 13px;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.msd__menu--up {
|
|
174
|
+
top: auto;
|
|
175
|
+
bottom: 100%;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.msd__option {
|
|
179
|
+
display: grid;
|
|
180
|
+
grid-template-columns: 16px 1fr;
|
|
181
|
+
align-items: center;
|
|
182
|
+
gap: 10px;
|
|
183
|
+
padding: 8px 10px;
|
|
184
|
+
border-radius: 8px;
|
|
185
|
+
cursor: pointer;
|
|
186
|
+
font-size: 14px;
|
|
187
|
+
|
|
188
|
+
&:not(.is-disabled):hover {
|
|
189
|
+
background: #f8fafc;
|
|
190
|
+
}
|
|
191
|
+
&.is-active {
|
|
192
|
+
background: #f1f5f9;
|
|
193
|
+
}
|
|
194
|
+
&.is-selected {
|
|
195
|
+
font-weight: 600;
|
|
196
|
+
}
|
|
197
|
+
&.is-disabled {
|
|
198
|
+
opacity: 0.5;
|
|
199
|
+
pointer-events: none;
|
|
200
|
+
}
|
|
201
|
+
&--selectAll {
|
|
202
|
+
font-weight: 600;
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.msd__checkbox {
|
|
207
|
+
width: 16px;
|
|
208
|
+
height: 16px;
|
|
209
|
+
border-radius: 4px;
|
|
210
|
+
border: 1.5px solid $msd-border;
|
|
211
|
+
background: #fff;
|
|
212
|
+
position: relative;
|
|
213
|
+
|
|
214
|
+
&.is-checked {
|
|
215
|
+
border-color: $msd-border-focus;
|
|
216
|
+
background: $msd-border-focus;
|
|
217
|
+
&::after {
|
|
218
|
+
content: "";
|
|
219
|
+
position: absolute;
|
|
220
|
+
inset: 0;
|
|
221
|
+
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M7.629 13.296L3.7 9.367l1.414-1.414 2.515 2.515L14.886 3.21l1.414 1.415z"/></svg>')
|
|
222
|
+
center/12px 12px no-repeat;
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
&.is-disabled {
|
|
227
|
+
opacity: 0.6;
|
|
228
|
+
}
|
|
229
|
+
}
|
package/dist/product-price.scss
CHANGED
|
@@ -96,9 +96,12 @@
|
|
|
96
96
|
align-items: flex-start;
|
|
97
97
|
gap: 10px;
|
|
98
98
|
flex-direction: column;
|
|
99
|
+
width: 100%;
|
|
99
100
|
.product-price {
|
|
100
101
|
display: flex;
|
|
101
102
|
flex-direction: column;
|
|
103
|
+
width: 100%;
|
|
104
|
+
|
|
102
105
|
border-color: var(
|
|
103
106
|
--_show-border,
|
|
104
107
|
var(
|
|
@@ -487,13 +490,15 @@
|
|
|
487
490
|
border-color 0.2s,
|
|
488
491
|
box-shadow 0.2s;
|
|
489
492
|
.svg_icon {
|
|
490
|
-
color: var(--_gray-
|
|
493
|
+
color: var(--_gray-700);
|
|
491
494
|
font-weight: 500;
|
|
492
495
|
font-size: 14px;
|
|
493
496
|
line-height: 24px;
|
|
494
|
-
|
|
497
|
+
white-space: nowrap;
|
|
495
498
|
}
|
|
496
499
|
input {
|
|
500
|
+
color: var(--_gray-700);
|
|
501
|
+
margin-top: 2px;
|
|
497
502
|
&::placeholder {
|
|
498
503
|
color: var(--_gray-500);
|
|
499
504
|
font-weight: 500;
|
|
@@ -533,13 +538,14 @@
|
|
|
533
538
|
label {
|
|
534
539
|
display: block;
|
|
535
540
|
color: var(--_gray-700);
|
|
536
|
-
font-weight:
|
|
541
|
+
font-weight: 400;
|
|
537
542
|
font-size: 14px;
|
|
538
543
|
line-height: 20px;
|
|
539
544
|
}
|
|
540
545
|
.message_text {
|
|
546
|
+
resize: none;
|
|
541
547
|
background-color: var(--_base-white);
|
|
542
|
-
padding:
|
|
548
|
+
padding: 5px 12px;
|
|
543
549
|
border: 1px solid var(--_gray-300);
|
|
544
550
|
border-radius: 4px;
|
|
545
551
|
transition:
|
|
@@ -547,6 +553,7 @@
|
|
|
547
553
|
color 0.2s,
|
|
548
554
|
border-color 0.2s,
|
|
549
555
|
box-shadow 0.2s;
|
|
556
|
+
height: 90px;
|
|
550
557
|
&::placeholder {
|
|
551
558
|
color: var(--_gray-500);
|
|
552
559
|
font-weight: 500;
|
package/dist/text-temp-v2.scss
CHANGED
|
@@ -120,8 +120,7 @@ $dblclk: '[data-cms-tt-ee-dbl-clkd="true"]';
|
|
|
120
120
|
&,
|
|
121
121
|
* {
|
|
122
122
|
color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
|
|
123
|
-
font-family:
|
|
124
|
-
var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))), sans-serif;
|
|
123
|
+
font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
|
|
125
124
|
font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
|
|
126
125
|
font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
|
|
127
126
|
font-style: var(
|
package/dist/widget.scss
CHANGED