@sc-360-v2/storefront-cms-library 0.4.79 → 0.4.81

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 (25) hide show
  1. package/dist/add-order.scss +377 -377
  2. package/dist/allocations.scss +1613 -1603
  3. package/dist/builder.js +1 -1
  4. package/dist/bulk-order-pad.scss +20 -7
  5. package/dist/buyForHeaders.scss +6 -0
  6. package/dist/buyForPopup.scss +12 -3
  7. package/dist/cart.scss +16 -8
  8. package/dist/checkout.scss +7 -0
  9. package/dist/default-dropdown.scss +259 -240
  10. package/dist/dropdownTemplate.scss +24 -17
  11. package/dist/form-preview.scss +328 -481
  12. package/dist/language-selector.scss +2 -2
  13. package/dist/menu-v2.scss +3 -3
  14. package/dist/modal.scss +2 -2
  15. package/dist/multi-select-dropdown.scss +293 -282
  16. package/dist/order-status.scss +28 -7
  17. package/dist/phone-input.scss +167 -0
  18. package/dist/quick-order-pad.scss +15 -1
  19. package/dist/request-for-quotes.scss +827 -746
  20. package/dist/shipping-payments.scss +0 -1
  21. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +152 -1
  22. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +39 -0
  23. package/dist/types/builder/tools/element-edit/userElements.d.ts +10 -0
  24. package/dist/user-elements.scss +29 -0
  25. package/package.json +1 -1
package/dist/default-dropdown.scss CHANGED
@@ -1,240 +1,259 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./functions.scss" as *;
4
-
5
- .default__dropdown {
6
- position: relative;
7
- width: 100%;
8
-
9
- .bo-dropdown__container {
10
- padding: 8px 12px;
11
- display: flex;
12
- align-items: center;
13
- align-self: stretch;
14
- justify-content: space-between;
15
- border: 1px solid var(--_gray-300);
16
- border-radius: 4px;
17
- background-color: var(--_base-white);
18
- min-height: 40px;
19
- cursor: pointer;
20
- transition: 0.2s ease;
21
- padding-inline: 12px !important;
22
- // .bod-trigger-left {
23
- // padding-left: 12px;
24
- // }
25
- .bo-dropdown__actions {
26
- // padding-right: 12px;
27
- .bo-dropdown__clear-btn {
28
- span {
29
- display: flex;
30
- }
31
- }
32
- }
33
- .bod-trigger-left {
34
- width: -webkit-fill-available;
35
- }
36
- }
37
-
38
- .bo-dropdown__container--search {
39
- padding: 0;
40
- cursor: text;
41
- }
42
-
43
- .bo-dropdown__container--disabled {
44
- cursor: not-allowed;
45
- opacity: 0.6;
46
- }
47
-
48
- .bo-dropdown__value-wrapper {
49
- flex: 1;
50
- min-width: 0;
51
- }
52
-
53
- .bo-dropdown__placeholder {
54
- color: #9ca3af;
55
- font-size: 14px;
56
- white-space: nowrap;
57
- overflow: hidden;
58
- text-overflow: ellipsis;
59
- }
60
-
61
- .bo-dropdown__selected {
62
- display: flex;
63
- align-items: center;
64
- gap: 8px;
65
- }
66
-
67
- .bo-dropdown__selected-info {
68
- display: flex;
69
- flex-direction: column;
70
- min-width: 0;
71
- }
72
-
73
- .bo-dropdown__selected-name {
74
- font-weight: normal;
75
- color: #111827;
76
- white-space: nowrap;
77
- overflow: hidden;
78
- text-overflow: ellipsis;
79
- }
80
-
81
- .bo-dropdown__selected-code {
82
- font-size: 12px;
83
- color: #6b7280;
84
- white-space: nowrap;
85
- overflow: hidden;
86
- text-overflow: ellipsis;
87
- }
88
-
89
- .bo-dropdown__actions {
90
- display: flex;
91
- align-items: center;
92
- gap: 4px;
93
- flex-shrink: 0;
94
- }
95
-
96
- .bo-dropdown__clear-btn,
97
- .bo-dropdown__toggle-btn {
98
- display: flex;
99
- align-items: center;
100
- justify-content: center;
101
- width: 20px;
102
- height: 20px;
103
- border: none;
104
- background: none;
105
- cursor: pointer;
106
- border-radius: 4px;
107
- }
108
-
109
- .bo-dropdown__chevron {
110
- transition: transform 0.2s ease;
111
- }
112
-
113
- .bo-dropdown__chevron--open {
114
- transform: rotate(180deg);
115
- }
116
-
117
- .bo-dropdown__panel {
118
- position: absolute;
119
- top: 100%;
120
- left: 0;
121
- right: 0;
122
- z-index: 1000;
123
- margin-top: 4px;
124
- background-color: #ffffff;
125
- border: 1px solid #d1d5db;
126
- border-radius: 8px;
127
- box-shadow:
128
- 0 10px 15px -3px rgba(0, 0, 0, 0.1),
129
- 0 4px 6px -2px rgba(0, 0, 0, 0.05);
130
- max-height: 320px;
131
- overflow: hidden;
132
- }
133
-
134
- .bo-dropdown__list {
135
- max-height: 240px;
136
- overflow-y: auto;
137
- margin: 0;
138
- padding: 0;
139
- list-style: none;
140
- padding: 4px;
141
- display: flex;
142
- flex-direction: column;
143
- gap: 2px;
144
- }
145
-
146
- .bo-dropdown__option {
147
- display: flex;
148
- align-items: center;
149
- gap: 8px;
150
- padding: 8px 12px;
151
- cursor: pointer;
152
- .variant__img {
153
- border: 1px solid var(--_gray-200);
154
- border-radius: 4px;
155
- overflow: hidden;
156
- display: flex;
157
- justify-content: center;
158
- align-items: center;
159
- img {
160
- max-height: 100%;
161
- max-width: 100%;
162
- }
163
- }
164
- }
165
-
166
- .bo-dropdown__option:last-child {
167
- border-bottom: none;
168
- }
169
-
170
- .bo-dropdown__option--highlighted {
171
- @include BgColorLighter(var(--_thm-cs-at-py), 10%);
172
- color: var(--_thm-cs-at-py);
173
- border-radius: 4px;
174
- }
175
-
176
- .bo-dropdown__option--selected {
177
- // background-color: var(--_base-white);
178
- border-radius: 4px;
179
- @include BgColorLighter(var(--_thm-cs-at-py), 10%);
180
- }
181
-
182
- .bo-dropdown__check {
183
- svg path {
184
- stroke: var(--_thm-cs-at-py);
185
- }
186
- }
187
-
188
- .bo-dropdown__option-text {
189
- flex: 1;
190
- min-width: 0;
191
- }
192
-
193
- .bo-dropdown__option-name {
194
- font-weight: 500;
195
- color: #111827;
196
- font-size: 13px;
197
- line-height: 1.2;
198
- margin-bottom: 1px;
199
- white-space: nowrap;
200
- overflow: hidden;
201
- text-overflow: ellipsis;
202
- }
203
-
204
- .bo-dropdown__option-code {
205
- font-size: 11px;
206
- color: #6b7280;
207
- line-height: 1.2;
208
- white-space: nowrap;
209
- overflow: hidden;
210
- text-overflow: ellipsis;
211
- }
212
-
213
- .bo-dropdown__empty,
214
- .bo-dropdown__loading {
215
- padding: 24px 12px;
216
- text-align: center;
217
- color: #6b7280;
218
- }
219
-
220
- .bo-dropdown__empty-title {
221
- display: block;
222
- font-weight: 500;
223
- margin-bottom: 4px;
224
- }
225
-
226
- .bo-dropdown__empty-sub {
227
- font-size: 12px;
228
- color: #9ca3af;
229
- }
230
-
231
- @keyframes pulse {
232
- 0%,
233
- 100% {
234
- opacity: 0.4;
235
- }
236
- 50% {
237
- opacity: 1;
238
- }
239
- }
240
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+
5
+ .default__dropdown {
6
+ position: relative;
7
+ width: 100%;
8
+ &:focus-within {
9
+ box-shadow: 0px 0px 0px 2px var(--_gray-100);
10
+ border-radius: 4px;
11
+ }
12
+
13
+ .bo-dropdown__container {
14
+ padding: 8px 12px;
15
+ display: flex;
16
+ align-items: center;
17
+ align-self: stretch;
18
+ justify-content: space-between;
19
+ border: 1px solid var(--_gray-300);
20
+ border-radius: 4px;
21
+ background-color: var(--_base-white);
22
+ min-height: 40px;
23
+ cursor: pointer;
24
+ transition: 0.2s ease;
25
+ padding-inline: 12px !important;
26
+ // .bod-trigger-left {
27
+ // padding-left: 12px;
28
+ // }
29
+ .bo-dropdown__actions {
30
+ // padding-right: 12px;
31
+ .bo-dropdown__clear-btn {
32
+ span {
33
+ display: flex;
34
+ }
35
+ }
36
+ }
37
+ .bod-trigger-left {
38
+ width: -webkit-fill-available;
39
+ }
40
+ }
41
+
42
+ .bo-dropdown__container--search {
43
+ padding: 0;
44
+ cursor: text;
45
+ line-height: 125%;
46
+ }
47
+
48
+ .bo-dropdown__container--disabled {
49
+ cursor: not-allowed;
50
+ opacity: 0.6;
51
+ }
52
+
53
+ .bo-dropdown__value-wrapper {
54
+ flex: 1;
55
+ min-width: 0;
56
+ }
57
+
58
+ .bo-dropdown__placeholder {
59
+ color: #9ca3af;
60
+ font-size: 14px;
61
+ white-space: nowrap;
62
+ overflow: hidden;
63
+ text-overflow: ellipsis;
64
+ }
65
+
66
+ .bo-dropdown__selected {
67
+ display: flex;
68
+ align-items: center;
69
+ gap: 8px;
70
+ }
71
+
72
+ .bo-dropdown__selected-info {
73
+ display: flex;
74
+ flex-direction: column;
75
+ min-width: 0;
76
+ }
77
+
78
+ .bo-dropdown__selected-name {
79
+ font-weight: normal;
80
+ color: #111827;
81
+ white-space: nowrap;
82
+ overflow: hidden;
83
+ text-overflow: ellipsis;
84
+ }
85
+
86
+ .bo-dropdown__selected-code {
87
+ font-size: 12px;
88
+ color: #6b7280;
89
+ white-space: nowrap;
90
+ overflow: hidden;
91
+ text-overflow: ellipsis;
92
+ }
93
+
94
+ .bo-dropdown__actions {
95
+ display: flex;
96
+ align-items: center;
97
+ gap: 4px;
98
+ flex-shrink: 0;
99
+ }
100
+
101
+ .bo-dropdown__clear-btn,
102
+ .bo-dropdown__toggle-btn {
103
+ display: flex;
104
+ align-items: center;
105
+ justify-content: center;
106
+ width: 20px;
107
+ height: 20px;
108
+ border: none;
109
+ background: none;
110
+ cursor: pointer;
111
+ border-radius: 4px;
112
+ }
113
+
114
+ .bo-dropdown__chevron {
115
+ transition: transform 0.2s ease;
116
+ }
117
+
118
+ .bo-dropdown__chevron--open {
119
+ transform: rotate(180deg);
120
+ }
121
+
122
+ .bo-dropdown__panel {
123
+ position: absolute;
124
+ top: 100%;
125
+ left: 0;
126
+ right: 0;
127
+ z-index: 1000;
128
+ margin-top: 4px;
129
+ background-color: #ffffff;
130
+ border: 1px solid #d1d5db;
131
+ border-radius: 8px;
132
+ box-shadow:
133
+ 0 10px 15px -3px rgba(0, 0, 0, 0.1),
134
+ 0 4px 6px -2px rgba(0, 0, 0, 0.05);
135
+ max-height: 320px;
136
+ overflow: hidden;
137
+ }
138
+
139
+ .bo-dropdown__list {
140
+ max-height: 240px;
141
+ overflow-y: auto;
142
+ margin: 0;
143
+ padding: 0;
144
+ list-style: none;
145
+ padding: 4px;
146
+ display: flex;
147
+ flex-direction: column;
148
+ gap: 2px;
149
+ }
150
+
151
+ .bo-dropdown__option {
152
+ display: flex;
153
+ align-items: center;
154
+ gap: 8px;
155
+ padding: 8px 12px;
156
+ cursor: pointer;
157
+ .variant__img {
158
+ border: 1px solid var(--_gray-200);
159
+ border-radius: 4px;
160
+ overflow: hidden;
161
+ display: flex;
162
+ justify-content: center;
163
+ align-items: center;
164
+ img {
165
+ max-height: 100%;
166
+ max-width: 100%;
167
+ object-fit: contain;
168
+ }
169
+ }
170
+ }
171
+
172
+ .bo-dropdown__option:last-child {
173
+ border-bottom: none;
174
+ }
175
+
176
+ .bo-dropdown__option--highlighted {
177
+ // @include BgColorLighter(var(--_thm-cs-at-py), 10%);
178
+ background-color: var(--_gray-50);
179
+ color: var(--_thm-cs-at-py);
180
+ border-radius: 4px;
181
+ }
182
+
183
+ .bo-dropdown__option--selected {
184
+ // background-color: var(--_base-white);
185
+ border-radius: 4px;
186
+ // @include BgColorLighter(var(--_thm-cs-at-py), 10%);
187
+ background-color: var(--_gray-100);
188
+ .bo-dropdown__option-name {
189
+ color: var(--_gray-900);
190
+ }
191
+ .bo-dropdown__option-code {
192
+ color: var(--_gray-700);
193
+ }
194
+ }
195
+
196
+ .bo-dropdown__check {
197
+ svg path {
198
+ stroke: var(--_gray-900);
199
+ }
200
+ }
201
+
202
+ .bo-dropdown__option-text {
203
+ flex: 1;
204
+ min-width: 0;
205
+ }
206
+
207
+ .bo-dropdown__option-name {
208
+ font-weight: 500;
209
+ color: var(--_gray-700);
210
+ font-size: 13px;
211
+ line-height: 1.2;
212
+ margin-bottom: 1px;
213
+ white-space: nowrap;
214
+ overflow: hidden;
215
+ text-overflow: ellipsis;
216
+ }
217
+
218
+ .bo-dropdown__option-code {
219
+ font-size: 11px;
220
+ color: var(--_gray-500);
221
+ line-height: 1.2;
222
+ white-space: nowrap;
223
+ overflow: hidden;
224
+ text-overflow: ellipsis;
225
+ .code__icon {
226
+ display: flex;
227
+ gap: 4px;
228
+ margin-top: 4px;
229
+ }
230
+ }
231
+
232
+ .bo-dropdown__empty,
233
+ .bo-dropdown__loading {
234
+ padding: 24px 12px;
235
+ text-align: center;
236
+ color: #6b7280;
237
+ }
238
+
239
+ .bo-dropdown__empty-title {
240
+ display: block;
241
+ font-weight: 500;
242
+ margin-bottom: 4px;
243
+ }
244
+
245
+ .bo-dropdown__empty-sub {
246
+ font-size: 12px;
247
+ color: #9ca3af;
248
+ }
249
+
250
+ @keyframes pulse {
251
+ 0%,
252
+ 100% {
253
+ opacity: 0.4;
254
+ }
255
+ 50% {
256
+ opacity: 1;
257
+ }
258
+ }
259
+ }
package/dist/dropdownTemplate.scss CHANGED
@@ -1,6 +1,11 @@
1
1
  .dropdown-with-input-section {
2
2
  width: 100%;
3
3
  background-color: var(--_base-white);
4
+
5
+ &:focus-within {
6
+ box-shadow: 0px 0px 0px 2px var(--_gray-100);
7
+ }
8
+
4
9
  .dropdown-label {
5
10
  display: block;
6
11
  margin-bottom: 6px;
@@ -16,8 +21,11 @@
16
21
  align-items: center;
17
22
  height: 40px;
18
23
  line-height: 40px;
19
- outline: 2px solid var(--_base-white);
20
- border: 1px solid var(--_thm-cs-be-se-3);
24
+ // outline: 2px solid var(--_base-white);
25
+ border: 1px solid var(--_gray-300);
26
+ &:focus-within {
27
+ box-shadow: 0px 0px 0px 2px var(--_gray-100);
28
+ }
21
29
 
22
30
  .selected-display {
23
31
  .selected-item {
@@ -97,9 +105,9 @@
97
105
  }
98
106
  }
99
107
  }
108
+
100
109
  &:focus-within {
101
- outline: 2px solid var(--_primary-400);
102
- outline-offset: 0;
110
+ box-shadow: 0px 0px 0px 3px var(--_gray-100);
103
111
  }
104
112
  cursor: pointer;
105
113
  .selected-display {
@@ -119,8 +127,7 @@
119
127
  visibility: hidden;
120
128
  }
121
129
  &:focus-within {
122
- border: 1px solid var(--_primary-300);
123
- outline: 2px solid var(--_primary-100);
130
+ box-shadow: 0px 0px 0px 3px var(--_gray-100);
124
131
  }
125
132
  &.w-full {
126
133
  width: 100%;
@@ -261,10 +268,10 @@
261
268
  flex-direction: column;
262
269
  // margin-left: -6px;
263
270
  &.open_dropdown {
264
- animation: open_dropdown 300ms ease-in-out;
271
+ animation: open_dropdown 300ms cubic-bezier(0.16, 1, 0.3, 1);
265
272
  }
266
273
  &.close_dropdown {
267
- animation: close_dropdown 300ms ease-in-out;
274
+ animation: close_dropdown 300ms cubic-bezier(0.4, 0, 1, 1);
268
275
  }
269
276
  &.w-full {
270
277
  width: 100%;
@@ -303,7 +310,7 @@
303
310
  }
304
311
 
305
312
  .dropdown_menu_ul {
306
- min-height: 100px;
313
+ min-height: 40px;
307
314
  max-height: 200px;
308
315
  overflow-y: auto;
309
316
  display: flex;
@@ -389,7 +396,7 @@
389
396
  display: flex;
390
397
  align-items: center;
391
398
  gap: 8px;
392
- height: auto !important;
399
+ // height: auto !important;
393
400
  max-height: 52px;
394
401
  border-radius: 4px;
395
402
  .profile_block {
@@ -443,16 +450,16 @@
443
450
  }
444
451
  }
445
452
  .selected {
446
- background-color: var(--_primary-25);
453
+ background-color: var(--_gray-100);
447
454
  font-weight: normal;
448
- color: var(--_primary-400);
455
+ color: var(--_gray-900);
449
456
  .dropdown-item-details {
450
457
  width: 70% !important;
451
458
  }
452
459
  .check_mark {
453
460
  margin-left: auto;
454
461
  svg path {
455
- stroke: var(--_primary-400);
462
+ stroke: var(--_gray-900);
456
463
  }
457
464
  }
458
465
  }
@@ -669,22 +676,22 @@
669
676
 
670
677
  @keyframes open_dropdown {
671
678
  0% {
672
- transform: translateY(10px);
679
+ transform: translateY(-4px);
673
680
  opacity: 0;
674
681
  }
675
682
  100% {
676
- transform: translateY(-2px);
683
+ transform: translateY(0);
677
684
  opacity: 1;
678
685
  }
679
686
  }
680
687
 
681
688
  @keyframes close_dropdown {
682
689
  0% {
683
- transform: translateY(-2px);
690
+ transform: translateY(0);
684
691
  opacity: 1;
685
692
  }
686
693
  100% {
687
- transform: translateY(10px);
694
+ transform: translateY(-4px);
688
695
  opacity: 0;
689
696
  }
690
697
  }