@sc-360-v2/storefront-cms-library 0.2.100 → 0.3.1

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 (14) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/bulk-order-pad.scss +119 -64
  3. package/dist/buyForHeaders.scss +94 -29
  4. package/dist/cart-details.scss +5 -3
  5. package/dist/dropdownTemplate.scss +141 -0
  6. package/dist/functions.scss +53 -18
  7. package/dist/modal.scss +15 -7
  8. package/dist/quick-order-pad.scss +26 -285
  9. package/dist/quotes.scss +8 -0
  10. package/dist/rfqs.scss +8 -0
  11. package/dist/types/builder/tools/element-edit/buyForWithTab.d.ts +287 -4
  12. package/dist/types/builder/tools/element-edit/cartDetails.d.ts +1 -1
  13. package/dist/widget.scss +1 -0
  14. package/package.json +1 -1
package/dist/bulk-order-pad.scss CHANGED
@@ -15,7 +15,7 @@
15
15
  display: flex;
16
16
  flex-direction: column;
17
17
  font-family: "Segoe UI", sans-serif;
18
-
18
+ overflow: auto;
19
19
  .select-product-dropdown {
20
20
  padding: 16px 24px;
21
21
  border-bottom: 1px solid #e0e0e0;
@@ -28,7 +28,10 @@
28
28
  align-items: center;
29
29
  padding: 16px 24px;
30
30
  border-bottom: 1px solid #e0e0e0;
31
-
31
+ position: sticky;
32
+ top: 0;
33
+ z-index: 999;
34
+ background: #fff;
32
35
  .title {
33
36
  display: flex;
34
37
  align-items: center;
@@ -64,71 +67,107 @@
64
67
  }
65
68
  }
66
69
 
67
- .dropdown-with-input-section {
68
- display: grid;
69
- gap: 2px;
70
+ // .dropdown-with-input-section {
71
+ // display: grid;
72
+ // gap: 2px;
70
73
 
71
- .dropdow-input-section {
72
- position: relative;
73
- display: flex;
74
- justify-content: flex-end;
75
- padding: 8px 12px;
76
- border: 1px solid #ccc;
77
- border-radius: 4px;
78
- width: 240px;
79
- .input-field {
80
- flex: 1;
81
- font-size: 14px;
82
- }
83
- .readonly-input,
84
- .dropdown__clear__icon,
85
- .dropdown__icon {
86
- cursor: pointer;
87
- }
88
- .dropdown__clear__icon {
89
- position: absolute;
90
- right: 32px;
91
- }
92
- .dropdown-menu {
93
- position: absolute;
94
- width: 100%;
95
- top: 35px;
96
- left: 0px;
97
- right: 24px;
98
- background: white;
99
- border: 1px solid #ddd;
100
- border-radius: 4px;
101
- max-height: 200px;
102
- overflow-y: auto;
103
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
104
- z-index: 10;
74
+ // .dropdow-input-section {
75
+ // position: relative;
76
+ // display: flex;
77
+ // justify-content: flex-end;
78
+ // padding: 8px 12px;
79
+ // border: 1px solid #ccc;
80
+ // border-radius: 4px;
81
+ // width: 240px;
82
+ // .dropdown-chips {
83
+ // display: flex;
84
+ // flex-wrap: wrap;
85
+ // gap: 4px;
86
+ // margin-bottom: 4px;
87
+ // }
105
88
 
106
- li {
107
- font-size: 14px;
108
- cursor: pointer;
89
+ // .dropdown-chip {
90
+ // background: #e2e2e2;
91
+ // padding: 4px 8px;
92
+ // border-radius: 12px;
93
+ // font-size: 12px;
94
+ // display: flex;
95
+ // align-items: center;
109
96
 
110
- &:hover {
111
- background-color: #f4f4f4;
112
- }
97
+ // .remove-chip {
98
+ // margin-left: 6px;
99
+ // cursor: pointer;
100
+ // font-weight: bold;
101
+ // }
102
+ // }
113
103
 
114
- &.no-result {
115
- color: #aaa;
116
- cursor: default;
117
- }
104
+ // .input-field {
105
+ // flex: 1;
106
+ // font-size: 14px;
107
+ // }
108
+ // .readonly-input,
109
+ // .dropdown__clear__icon,
110
+ // .dropdown__icon {
111
+ // cursor: pointer;
112
+ // }
113
+ // .dropdown__clear__icon {
114
+ // position: absolute;
115
+ // right: 32px;
116
+ // }
117
+ // .dropdown-menu {
118
+ // position: absolute;
119
+ // width: 100%;
120
+ // top: 35px;
121
+ // left: 0px;
122
+ // right: 24px;
123
+ // background: white;
124
+ // border: 1px solid #ddd;
125
+ // border-radius: 4px;
126
+ // max-height: 200px;
127
+ // overflow-y: auto;
128
+ // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
129
+ // z-index: 10;
118
130
 
119
- .dropdown-item {
120
- width: 100%;
121
- height: 100%;
122
- padding: 8px 12px;
123
- text-align: left;
124
- }
125
- }
126
- }
127
- }
128
- .dropdow-input-section.full-width {
129
- width: 100% !important;
130
- }
131
- }
131
+ // li {
132
+ // font-size: 14px;
133
+ // cursor: pointer;
134
+
135
+ // &:hover {
136
+ // background-color: #f4f4f4;
137
+ // }
138
+
139
+ // &.no-result {
140
+ // color: #aaa;
141
+ // cursor: default;
142
+ // }
143
+
144
+ // .dropdown-item {
145
+ // width: 100%;
146
+ // height: 100%;
147
+ // padding: 8px 12px;
148
+ // text-align: left;
149
+ // display: flex;
150
+ // align-items: center;
151
+ // .item-image {
152
+ // background-image: url("");
153
+ // width: 30px;
154
+ // height: 30px;
155
+ // }
156
+ // .item-image-svg {
157
+ // display: flex;
158
+ // align-items: center;
159
+ // justify-content: center;
160
+ // background: #dfdfdf;
161
+ // margin-right: 8px;
162
+ // }
163
+ // }
164
+ // }
165
+ // }
166
+ // }
167
+ // .dropdow-input-section.full-width {
168
+ // width: 100% !important;
169
+ // }
170
+ // }
132
171
 
133
172
  .bulk-order-empty {
134
173
  flex: 1;
@@ -165,7 +204,7 @@
165
204
  padding: 12px;
166
205
  .product-details {
167
206
  display: flex;
168
-
207
+ gap: 10px;
169
208
  .product-image {
170
209
  img {
171
210
  width: 64px;
@@ -174,6 +213,9 @@
174
213
 
175
214
  .details {
176
215
  display: grid;
216
+ .p-before-price {
217
+ text-decoration: line-through;
218
+ }
177
219
  }
178
220
  }
179
221
  .product-entity-info,
@@ -184,7 +226,7 @@
184
226
  }
185
227
  }
186
228
  .bulkOrderPad-content {
187
- padding: 24px;
229
+ padding: 16px;
188
230
  .dropdown-options {
189
231
  display: inline-block;
190
232
  width: 100%;
@@ -209,6 +251,8 @@
209
251
  }
210
252
  .bulkOrderPad-section {
211
253
  display: flex;
254
+ max-height: calc(100vh - 154px);
255
+ overflow: auto;
212
256
  .first-option-title {
213
257
  writing-mode: vertical-rl;
214
258
  transform: rotate(180deg);
@@ -218,6 +262,8 @@
218
262
  display: flex;
219
263
  justify-content: center;
220
264
  overflow: visible;
265
+ position: sticky;
266
+ top: 0;
221
267
  .title {
222
268
  background: #ffffff;
223
269
  height: max-content;
@@ -242,10 +288,19 @@
242
288
  cursor: pointer;
243
289
  }
244
290
  }
291
+ td.option-cell:first-child {
292
+ position: sticky;
293
+ top: 0;
294
+ left: 0px;
295
+ background: #fff;
296
+ }
245
297
 
246
298
  thead {
247
299
  height: 40px;
248
300
  font-weight: bold;
301
+ position: sticky;
302
+ top: 0;
303
+ background: #fff;
249
304
  th {
250
305
  border-bottom: 1px solid #f0f0f0;
251
306
  &:first-child,
package/dist/buyForHeaders.scss CHANGED
@@ -10,10 +10,16 @@
10
10
  margin-bottom: 1rem;
11
11
 
12
12
  h1 {
13
- font-size: 1.5rem;
14
- font-weight: bold;
13
+ font-size: var(--_ctm-buy-dn-pe-te-ss-ft-se);
14
+ font-weight: var(--_ctm-buy-dn-pe-te-ss-ft-wt);
15
15
  display: flex;
16
- align-items: center;
16
+ align-items: var(--_ctm-buy-dn-pe-te-ss-tt-an);
17
+ color: var(--_ctm-buy-dn-pe-te-ss-cr);
18
+ font-family: var(--_ctm-buy-dn-pe-te-ss-ft-fy);
19
+ font-style: var(--_ctm-buy-dn-pe-te-ss-ft-se-ic);
20
+ letter-spacing: var(--_ctm-buy-dn-pe-te-ss-lr-sg);
21
+ line-height: var(--_ctm-buy-dn-pe-te-ss-le-ht);
22
+ text-decoration: var(--_ctm-buy-dn-pe-te-ss-ue);
17
23
 
18
24
  .separator {
19
25
  margin: 0 0.5rem;
@@ -44,12 +50,15 @@
44
50
  }
45
51
 
46
52
  .manage-link {
47
- color: #0056d2;
48
- text-decoration: none;
49
-
50
- &:hover {
51
- text-decoration: underline;
52
- }
53
+ font-size: var(--_ctm-buy-dn-me-es-ll-ss-ft-se);
54
+ font-weight: var(--_ctm-buy-dn-pe-te-ss-ft-wt);
55
+ text-align: var(--_ctm-buy-dn-me-es-ll-ss-tt-an);
56
+ color: var(--_ctm-buy-dn-me-es-ll-ss-cr);
57
+ font-family: var(--_ctm-buy-dn-me-es-ll-ss-ft-wt);
58
+ font-style: var(--_ctm-buy-dn-me-es-ll-ss-ft-se-ic);
59
+ text-decoration: var(--_ctm-buy-dn-me-es-ll-ss-ue);
60
+ letter-spacing: var(--_ctm-buy-dn-me-es-ll-ss-lr-sg);
61
+ line-height: var(--_ctm-buy-dn-me-es-ll-ss-le-ht);
53
62
  }
54
63
 
55
64
  .employee-switch {
@@ -90,10 +99,15 @@
90
99
  flex-wrap: wrap;
91
100
 
92
101
  .employee-name {
93
- font-size: 1.3rem;
94
- font-weight: bold;
95
- display: flex;
96
- align-items: center;
102
+ font-size: var(--_ctm-buy-dn-ee-ne-ss-ft-se);
103
+ color: var(--_ctm-buy-dn-ee-ne-ss-cr);
104
+ font-family: var(--_ctm-buy-dn-ee-ne-ss-ft-fy);
105
+ font-weight: var(--_ctm-buy-dn-ee-ne-ss-ft-wt);
106
+ font-style: var(--_ctm-buy-dn-ee-ne-ss-ft-se-ic);
107
+ text-decoration: var(--_ctm-buy-dn-ee-ne-ss-ue);
108
+ text-align: var(---_ctm-buy-dn-ee-ne-ss-tt-an);
109
+ letter-spacing: var(--_ctm-buy-dn-ee-sn-ss-lr-sg);
110
+ line-height: var(--_ctm-buy-dn-ee-sn-ss-le-ht);
97
111
 
98
112
  .external-link-icon {
99
113
  margin-left: 0.5rem;
@@ -117,10 +131,20 @@
117
131
  align-items: center;
118
132
  margin: 0.8rem 0;
119
133
  flex-wrap: wrap;
134
+ gap: 8px;
120
135
 
121
136
  .meta-item {
122
- font-size: 0.9rem;
123
- color: #555;
137
+ // font-size: 0.9rem;
138
+ // color: #555;
139
+ font-family: var(--_ctm-buy-dn-ee-io-ss-ft-fy);
140
+ font-size: var(--_ctm-buy-dn-ee-io-ss-ft-se);
141
+ color: var(--_ctm-buy-dn-ee-io-ss-cr);
142
+ font-weight: var(--_ctm-buy-dn-ee-io-ss-ft-wt);
143
+ font-style: var(--_ctm-buy-dn-ee-io-ss-ft-se-ic);
144
+ text-decoration: var(--_ctm-buy-dn-ee-io-ss-ue);
145
+ text-align: var(--_ctm-buy-dn-ee-io-ss-tt-an);
146
+ letter-spacing: var(--_ctm-buy-dn-ee-io-ss-lr-sg);
147
+ line-height: var(--_ctm-buy-dn-ee-io-ss-le-ht);
124
148
  }
125
149
 
126
150
  .meta-separator {
@@ -134,20 +158,43 @@
134
158
  flex-wrap: wrap;
135
159
  gap: 1.5rem;
136
160
  margin-top: 1rem;
161
+ position: relative;
137
162
 
138
163
  .info-block {
139
- min-width: 160px;
140
-
141
- h4 {
142
- font-size: 0.95rem;
143
- color: #6c757d;
164
+ min-width: 170px;
165
+ max-width: 226px;
166
+ .title,
167
+ .sub_title {
168
+ width: 100%;
169
+ white-space: nowrap;
170
+ text-overflow: ellipsis;
171
+ overflow: hidden;
172
+ }
173
+ .title {
174
+ // font-size: 0.95rem;
175
+ // color: #6c757d;
176
+ font-family: var(--_ctm-buy-dn-ee-dl-te-ss-ft-fy);
177
+ font-size: var(--_ctm-buy-dn-ee-dl-te-ss-ft-se);
178
+ color: var(--_ctm-buy-dn-ee-dl-te-ss-cr);
179
+ font-weight: var(--_ctm-buy-dn-ee-dl-te-ss-ft-wt);
180
+ font-style: var(--_ctm-buy-dn-ee-dl-te-ss-ft-se-ic);
181
+ text-decoration: var(--_ctm-buy-dn-ee-dl-te-ss-ue);
182
+ text-align: var(--_ctm-buy-dn-ee-io-ss-tt-an);
183
+ letter-spacing: var(--_ctm-buy-dn-ee-dl-te-ss-lr-sg);
184
+ line-height: var(--_ctm-buy-dn-ee-dl-te-ss-le-ht);
144
185
  margin-bottom: 0.2rem;
145
186
  }
146
187
 
147
- p {
148
- font-weight: bold;
149
- font-size: 0.95rem;
150
- color: #222;
188
+ .sub_title {
189
+ font-family: var(--_ctm-buy-dn-ee-dl-sb-te-ss-ft-fy);
190
+ font-size: var(--_ctm-buy-dn-ee-dl-sb-te-ss-ft-se);
191
+ color: var(--_ctm-buy-dn-ee-dl-sb-te-ss-cr);
192
+ font-weight: var(--_ctm-buy-dn-ee-dl-sb-te-ss-ft-wt);
193
+ font-style: var(--_ctm-buy-dn-ee-dl-sb-te-ss-ft-se-ic);
194
+ text-decoration: var(--_ctm-buy-dn-ee-dl-sb-te-ss-ue);
195
+ text-align: var(--_ctm-buy-dn-ee-dl-sb-te-ss-tt-an);
196
+ letter-spacing: var(--_ctm-buy-dn-ee-dl-sb-te-ss-lr-sg);
197
+ line-height: var(--_ctm-buy-dn-ee-dl-sb-te-ss-le-ht);
151
198
  }
152
199
  }
153
200
 
@@ -155,6 +202,9 @@
155
202
  display: flex;
156
203
  align-items: center;
157
204
  gap: 0.5rem;
205
+ position: absolute;
206
+ right: 0;
207
+ justify-content: right;
158
208
 
159
209
  .cart-icon {
160
210
  position: relative;
@@ -173,14 +223,29 @@
173
223
  }
174
224
 
175
225
  .cart-price {
176
- h4 {
177
- font-size: 0.95rem;
178
- margin-bottom: 0;
226
+ .title {
227
+ font-family: var(--_ctm-buy-dn-ee-dl-te-ss-ft-fy);
228
+ font-size: var(--_ctm-buy-dn-ee-dl-te-ss-ft-se);
229
+ color: var(--_ctm-buy-dn-ee-dl-te-ss-cr);
230
+ font-weight: var(--_ctm-buy-dn-ee-dl-te-ss-ft-wt);
231
+ font-style: var(--_ctm-buy-dn-ee-dl-te-ss-ft-se-ic);
232
+ text-decoration: var(--_ctm-buy-dn-ee-dl-te-ss-ue);
233
+ text-align: var(--_ctm-buy-dn-ee-io-ss-tt-an);
234
+ letter-spacing: var(--_ctm-buy-dn-ee-dl-te-ss-lr-sg);
235
+ line-height: var(--_ctm-buy-dn-ee-dl-te-ss-le-ht);
179
236
  }
180
237
 
181
- p {
238
+ .sub_title {
182
239
  font-weight: bold;
183
- font-size: 1rem;
240
+ font-family: var(--_ctm-buy-dn-ee-dl-sb-te-ss-ft-fy);
241
+ font-size: var(--_ctm-buy-dn-ee-dl-sb-te-ss-ft-se);
242
+ color: var(--_ctm-buy-dn-ee-dl-sb-te-ss-cr);
243
+ // font-weight: var(--_ctm-buy-dn-ee-dl-sb-te-ss-ft-wt);
244
+ font-style: var(--_ctm-buy-dn-ee-dl-sb-te-ss-ft-se-ic);
245
+ text-decoration: var(--_ctm-buy-dn-ee-dl-sb-te-ss-ue);
246
+ text-align: var(--_ctm-buy-dn-ee-dl-sb-te-ss-tt-an);
247
+ letter-spacing: var(--_ctm-buy-dn-ee-dl-sb-te-ss-lr-sg);
248
+ line-height: var(--_ctm-buy-dn-ee-dl-sb-te-ss-le-ht);
184
249
  }
185
250
  }
186
251
  }
package/dist/cart-details.scss CHANGED
@@ -449,11 +449,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
449
449
  textarea {
450
450
  width: 100% !important;
451
451
  padding: 8px 12px !important;
452
- border-radius: 0.5rem;
453
- border: 1px solid #d1d5db !important;
454
- background-color: #f9fafb !important;
452
+ border-radius: 4px;
453
+ border: 1px solid #ccc;
454
+ /* background-color: #f9fafb !important; */
455
455
  outline: none;
456
456
  transition: border-color 0.2s ease-in-out;
457
+ font-size: 14px;
458
+ height: 40px;
457
459
 
458
460
  &:focus {
459
461
  border-color: #3b82f6;
package/dist/dropdownTemplate.scss ADDED
@@ -0,0 +1,141 @@
1
+ .dropdown-with-input-section {
2
+ display: grid;
3
+ gap: 2px;
4
+ width: max-content;
5
+
6
+ .dropdow-input-section {
7
+ position: relative;
8
+ display: flex;
9
+ justify-content: space-between;
10
+ padding: 8px 12px;
11
+ border: 1px solid #ccc;
12
+ border-radius: 4px;
13
+ width: 240px;
14
+ align-items: center;
15
+ .dropdown-chips {
16
+ display: flex;
17
+ // flex-wrap: wrap;
18
+ gap: 4px;
19
+ // margin-bottom: 4px;
20
+ max-width: 88%;
21
+ min-width: 88%;
22
+ overflow: hidden;
23
+ .dropdown-chip {
24
+ background: #e2e2e2;
25
+ padding: 4px 8px;
26
+ border-radius: 12px;
27
+ font-size: 12px;
28
+ display: flex;
29
+ align-items: center;
30
+ min-width: 48px;
31
+ max-width: 60px;
32
+ .chip-lable {
33
+ max-width: 80%;
34
+ text-overflow: ellipsis;
35
+ white-space: nowrap;
36
+ overflow: hidden;
37
+ }
38
+
39
+ .remove-chip {
40
+ margin-left: 6px;
41
+ cursor: pointer;
42
+ font-weight: bold;
43
+ }
44
+ }
45
+
46
+ .dropdown-chip-overflow {
47
+ background-color: #d1d1d1;
48
+ color: #555;
49
+ cursor: default;
50
+ }
51
+ }
52
+
53
+ .input-field {
54
+ flex: 1;
55
+ font-size: 14px;
56
+ }
57
+ .readonly-input,
58
+ .dropdown__clear__icon,
59
+ .dropdown__icon {
60
+ cursor: pointer;
61
+ }
62
+ .dropdown__clear__icon {
63
+ position: absolute;
64
+ right: 32px;
65
+ }
66
+ .dropdown-menu {
67
+ position: absolute;
68
+ width: 100%;
69
+ top: 35px;
70
+ left: 0px;
71
+ right: 24px;
72
+ background: white;
73
+ border: 1px solid #ddd;
74
+ border-radius: 4px;
75
+ max-height: 200px;
76
+ overflow-y: auto;
77
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
78
+ z-index: 10;
79
+
80
+ li {
81
+ font-size: 14px;
82
+ cursor: pointer;
83
+ height: 40px;
84
+
85
+ &:hover {
86
+ background-color: #f4f4f4;
87
+ }
88
+
89
+ &.no-result {
90
+ color: #aaa;
91
+ cursor: default;
92
+ }
93
+
94
+ .dropdown-item {
95
+ width: 100%;
96
+ height: 100%;
97
+ padding: 8px 12px;
98
+ text-align: left;
99
+ display: flex;
100
+ align-items: center;
101
+ .item-image {
102
+ background-image: url("");
103
+ width: 30px;
104
+ height: 30px;
105
+ }
106
+ .item-image-svg {
107
+ display: flex;
108
+ align-items: center;
109
+ justify-content: center;
110
+ background: #dfdfdf;
111
+ margin-right: 8px;
112
+ }
113
+ }
114
+ .selected {
115
+ background-color: #e6f0ff;
116
+ font-weight: bold;
117
+ }
118
+ }
119
+ }
120
+ .dropdown_template_panel_search {
121
+ background: none;
122
+ padding: 12px;
123
+ border-bottom: 1px solid #dddddd;
124
+ height: max-content !important;
125
+ &:hover {
126
+ background: none !important;
127
+ }
128
+ input {
129
+ padding: 10px 8px;
130
+ border-radius: 4px;
131
+ border: 1px solid #dddddd;
132
+ }
133
+ }
134
+ }
135
+ }
136
+ .dropdown-with-input-section.full-width {
137
+ width: auto;
138
+ .dropdow-input-section {
139
+ width: 100% !important;
140
+ }
141
+ }