@sc-360-v2/storefront-cms-library 0.3.96 → 0.3.97

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.
@@ -191,6 +191,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
191
191
  opacity: 0.5;
192
192
  pointer-events: none;
193
193
  }
194
+ span {
195
+ display: flex;
196
+ }
197
+ &:has(span) {
198
+ gap: 4px;
199
+ }
194
200
  }
195
201
  }
196
202
  }
@@ -234,15 +234,16 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
234
234
 
235
235
  .view_cart_btn {
236
236
  padding: 10px 15px;
237
- background-color: #243dc6;
238
- color: var(--_base-white);
237
+ background-color: var(--_thm-py-bs-dt-se-bd-cr);
238
+ color: var(--_thm-py-bs-dt-se-tt-cr);
239
239
  border: none;
240
240
  border-radius: 4px;
241
241
  cursor: pointer;
242
242
  margin-bottom: 12px;
243
243
 
244
244
  &:hover {
245
- background-color: #2237ac;
245
+ background-color: var(--_thm-py-bs-hr-se-bd-cr);
246
+ color: var(--_thm-py-bs-dt-se-tt-cr --_thm-py-bs-hr-se-tt-cr);
246
247
  }
247
248
  }
248
249
  }
@@ -17,6 +17,10 @@ $button-padding: 6px 12px;
17
17
  position: relative;
18
18
  display: inline-block;
19
19
 
20
+ &.push_right {
21
+ margin-left: auto;
22
+ }
23
+
20
24
  .overlay-panel {
21
25
  margin-top: 10px;
22
26
  }
@@ -116,9 +120,10 @@ $button-padding: 6px 12px;
116
120
  }
117
121
  }
118
122
 
119
- .options-container {
120
- min-height: 150px;
121
- max-height: 250px;
123
+ .options-container,
124
+ .menu-container {
125
+ min-height: 200px;
126
+ max-height: 200px;
122
127
  padding: 4px;
123
128
  overflow-y: auto;
124
129
  display: flex;
@@ -129,7 +134,7 @@ $button-padding: 6px 12px;
129
134
  display: flex;
130
135
  justify-content: center;
131
136
  align-items: center;
132
- padding: 24px;
137
+ // padding: 24px;
133
138
  font-size: 16px;
134
139
  font-weight: 500;
135
140
  text-align: center;
@@ -200,7 +205,7 @@ $button-padding: 6px 12px;
200
205
  display: flex;
201
206
  flex-direction: column;
202
207
  font-weight: 400;
203
- margin-top: -3px;
208
+ // margin-top: -3px;
204
209
  &.selected {
205
210
  color: var(--_thm-cs-tt-ls-as);
206
211
  }
@@ -240,6 +245,30 @@ $button-padding: 6px 12px;
240
245
  background-color: var(--_gray-200);
241
246
  }
242
247
  }
248
+
249
+ .menu_dropdown_option {
250
+ a {
251
+ display: block;
252
+ text-decoration: none;
253
+ width: 100%;
254
+ &:hover {
255
+ color: var(--_primary-400);
256
+ }
257
+ }
258
+ button {
259
+ display: block;
260
+ padding: 12px;
261
+ text-align: left;
262
+ width: 100%;
263
+ &:hover {
264
+ background-color: var(--_gray-100);
265
+ color: var(--_primary-400);
266
+ }
267
+ }
268
+ }
269
+ }
270
+ .menu-container {
271
+ min-height: fit-content;
243
272
  }
244
273
 
245
274
  .footer {
@@ -33,329 +33,314 @@
33
33
  // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
34
34
  // }
35
35
 
36
- width: 100%;
37
-
38
- & > .wrapper {
39
- // width: 100%;
40
- // height: 100%;
36
+ .quotes_wrapper {
37
+ display: flex;
38
+ flex-direction: column;
39
+ gap: 24px;
41
40
 
42
- .quotes_wrapper {
41
+ .quotes_header {
42
+ width: 100%;
43
43
  display: flex;
44
- flex-direction: column;
45
- gap: 24px;
46
44
 
47
- .quotes_header {
48
- width: 100%;
49
- display: flex;
50
-
51
- justify-content: space-between;
52
- align-items: center;
53
- h2 {
54
- font-size: 24px;
55
- color: var(--_gray-900);
56
- }
57
- .back_to_cart {
58
- color: var(--_primary-400);
59
- &:hover {
60
- text-decoration: underline;
61
- }
45
+ justify-content: space-between;
46
+ align-items: center;
47
+ h2 {
48
+ font-size: 24px;
49
+ color: var(--_gray-900);
50
+ }
51
+ .back_to_cart {
52
+ color: var(--_primary-400);
53
+ &:hover {
54
+ text-decoration: underline;
62
55
  }
63
56
  }
57
+ }
64
58
 
65
- .quotes_body {
59
+ .quote-items {
60
+ flex: 2;
61
+ .quote-item {
62
+ // padding: 32px 0;
66
63
  display: flex;
67
- gap: 60px;
68
- justify-content: space-between;
69
- .quote-items {
70
- flex: 2;
71
- .quote-item {
72
- // padding: 32px 0;
64
+ gap: 24px;
65
+ &:not(:last-child) {
66
+ border-bottom: 1px dotted var(--_gray-400);
67
+ }
68
+ &:not(:last-child) {
69
+ padding-bottom: 16px;
70
+ }
71
+ &:not(:first-child) {
72
+ padding-top: 16px;
73
+ }
74
+
75
+ .quote-item__image {
76
+ width: 120px;
77
+ height: 120px;
78
+ object-fit: cover;
79
+ border-radius: 4px;
80
+ background-color: #f0f0f0;
81
+ }
82
+
83
+ .quote-item__details {
84
+ flex: 1;
85
+ display: flex;
86
+ flex-direction: column;
87
+
88
+ .quote-item__header {
89
+ margin-bottom: 16px;
90
+ padding-bottom: 16px;
73
91
  display: flex;
74
- gap: 24px;
75
- &:not(:last-child) {
76
- border-bottom: 1px dotted var(--_gray-400);
77
- }
78
- &:not(:last-child) {
79
- padding-bottom: 16px;
80
- }
81
- &:not(:first-child) {
82
- padding-top: 16px;
92
+ border-bottom: 1px dotted #d0d0d0;
93
+ flex-direction: column;
94
+ gap: 8px;
95
+
96
+ .quote-item__title {
97
+ font-size: 16px;
98
+ font-weight: 600;
99
+ // color: #111;
83
100
  }
84
101
 
85
- .quote-item__image {
86
- width: 120px;
87
- height: 120px;
88
- object-fit: cover;
89
- border-radius: 4px;
90
- background-color: #f0f0f0;
102
+ .quote-item__meta {
103
+ display: flex;
104
+ gap: 10px;
105
+ font-size: 14px;
106
+ font-weight: 400;
107
+ // color: var(--_gray-500);
91
108
  }
109
+ }
92
110
 
93
- .quote-item__details {
94
- flex: 1;
111
+ .quote-item__row {
112
+ display: flex;
113
+ gap: 16px;
114
+ align-items: flex-start;
115
+
116
+ .field {
95
117
  display: flex;
96
118
  flex-direction: column;
119
+ font-size: 14px;
120
+ &.price_column {
121
+ padding-right: 40px;
122
+ }
97
123
 
98
- .quote-item__header {
99
- margin-bottom: 16px;
100
- padding-bottom: 16px;
124
+ label {
125
+ margin-bottom: 6px;
126
+ font-weight: 500;
127
+ font-size: 14px;
128
+ // color: #333;
129
+ }
130
+
131
+ .value {
132
+ // font-weight: 600;
133
+ // font-size: 16px;
134
+ // // color: #111;
135
+ font-weight: 600;
136
+ font-size: 16px;
137
+ height: 39px;
101
138
  display: flex;
102
- border-bottom: 1px dotted #d0d0d0;
103
- flex-direction: column;
104
- gap: 8px;
139
+ align-items: center;
140
+ }
141
+
142
+ input {
143
+ height: 40px;
144
+ padding: 8px 12px;
145
+ font-size: 14px;
146
+ border: 1px solid #ccc;
147
+ border-radius: 4px;
148
+ outline: none;
149
+ width: 130px;
150
+
151
+ &:focus {
152
+ border-color: #2563eb;
153
+ box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
154
+ }
155
+ }
105
156
 
106
- .quote-item__title {
107
- font-size: 16px;
108
- font-weight: 600;
109
- // color: #111;
157
+ .input-with-prefix {
158
+ display: flex;
159
+ align-items: center;
160
+ border: 1px solid #ccc;
161
+ border-radius: 4px;
162
+ overflow: hidden;
163
+ width: 130px;
164
+ height: 40px;
165
+ &:focus-within {
166
+ border: 1px solid var(--_primary-300);
167
+ outline: 2px solid var(--_primary-100);
110
168
  }
111
169
 
112
- .quote-item__meta {
170
+ span {
171
+ padding: 0 8px;
172
+ font-size: 15px;
173
+ color: var(--_gray-500);
113
174
  display: flex;
114
- gap: 10px;
115
- font-size: 14px;
116
- font-weight: 400;
117
- // color: var(--_gray-500);
175
+ align-items: center;
176
+ }
177
+
178
+ input {
179
+ border: none;
180
+ width: 100%;
181
+ height: 100%;
182
+ padding-left: 6px;
183
+ &:focus {
184
+ box-shadow: none;
185
+ outline: none;
186
+ }
118
187
  }
119
188
  }
189
+ }
120
190
 
121
- .quote-item__row {
191
+ .quote-item__totals {
192
+ display: flex;
193
+ flex-direction: column;
194
+ gap: 16px;
195
+ text-align: right;
196
+ margin-left: auto;
197
+ min-width: 180px;
198
+
199
+ .quote-total {
122
200
  display: flex;
123
- gap: 16px;
124
- align-items: flex-start;
201
+ flex-direction: column;
202
+ gap: 6px;
125
203
 
126
- .field {
204
+ > div {
127
205
  display: flex;
128
- flex-direction: column;
129
- font-size: 14px;
130
- &.price_column {
131
- padding-right: 40px;
132
- }
206
+ justify-content: flex-end;
207
+ align-items: baseline;
208
+ gap: 4px;
133
209
 
134
- label {
135
- margin-bottom: 6px;
136
- font-weight: 500;
210
+ .label {
137
211
  font-size: 14px;
138
- // color: #333;
212
+ // color: #444;
139
213
  }
140
214
 
141
- .value {
142
- // font-weight: 600;
143
- // font-size: 16px;
144
- // // color: #111;
145
- font-weight: 600;
146
- font-size: 16px;
147
- height: 39px;
148
- display: flex;
149
- align-items: center;
215
+ .amount {
216
+ font-size: 18px;
217
+ font-weight: 700;
218
+ // color: #111;
150
219
  }
220
+ }
151
221
 
152
- input {
153
- height: 40px;
154
- padding: 8px 12px;
155
- font-size: 14px;
156
- border: 1px solid #ccc;
157
- border-radius: 4px;
158
- outline: none;
159
- width: 130px;
222
+ small {
223
+ font-size: 13px;
224
+ // color: #888;
225
+ margin-top: 4px;
226
+ text-align: right;
227
+ display: flex;
228
+ justify-content: end;
229
+ }
160
230
 
161
- &:focus {
162
- border-color: #2563eb;
163
- box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
164
- }
231
+ &.discounted {
232
+ .label {
233
+ color: #039855;
165
234
  }
166
235
 
167
- .input-with-prefix {
168
- display: flex;
169
- align-items: center;
170
- border: 1px solid #ccc;
171
- border-radius: 4px;
172
- overflow: hidden;
173
- width: 130px;
174
- height: 40px;
175
- &:focus-within {
176
- border: 1px solid var(--_primary-300);
177
- outline: 2px solid var(--_primary-100);
178
- }
179
-
180
- span {
181
- padding: 0 8px;
182
- font-size: 15px;
183
- color: var(--_gray-500);
184
- display: flex;
185
- align-items: center;
186
- }
187
-
188
- input {
189
- border: none;
190
- width: 100%;
191
- height: 100%;
192
- padding-left: 6px;
193
- &:focus {
194
- box-shadow: none;
195
- outline: none;
196
- }
197
- }
198
- }
199
- }
200
-
201
- .quote-item__totals {
202
- display: flex;
203
- flex-direction: column;
204
- gap: 16px;
205
- text-align: right;
206
- margin-left: auto;
207
- min-width: 180px;
208
-
209
- .quote-total {
210
- display: flex;
211
- flex-direction: column;
212
- gap: 6px;
213
-
214
- > div {
215
- display: flex;
216
- justify-content: flex-end;
217
- align-items: baseline;
218
- gap: 4px;
219
-
220
- .label {
221
- font-size: 14px;
222
- // color: #444;
223
- }
224
-
225
- .amount {
226
- font-size: 18px;
227
- font-weight: 700;
228
- // color: #111;
229
- }
230
- }
231
-
232
- small {
233
- font-size: 13px;
234
- // color: #888;
235
- margin-top: 4px;
236
- text-align: right;
237
- display: flex;
238
- justify-content: end;
239
- }
240
-
241
- &.discounted {
242
- .label {
243
- color: #039855;
244
- }
245
-
246
- .amount {
247
- color: #039855;
248
- }
249
- }
236
+ .amount {
237
+ color: #039855;
250
238
  }
251
239
  }
252
240
  }
253
241
  }
254
242
  }
255
243
  }
244
+ }
245
+ }
256
246
 
257
- .quote-summary {
258
- background: var(--_base-white);
259
- border: 1px solid var(--_gray-300);
260
- border-radius: 4px;
261
- width: 400px;
262
- overflow: hidden;
263
- height: fit-content;
264
- position: sticky;
265
- top: 10px;
266
-
267
- &__row {
268
- display: flex;
269
- justify-content: space-between;
270
- align-items: center;
271
- padding: 12px 0;
272
- border-bottom: 1px dotted #ccc;
247
+ .quote-summary {
248
+ background: var(--_base-white);
249
+ border: 1px solid var(--_gray-300);
250
+ border-radius: 4px;
251
+ width: 400px;
252
+ overflow: hidden;
253
+ height: fit-content;
254
+ position: sticky;
255
+ top: 10px;
273
256
 
274
- .label {
275
- font-size: 14px;
276
- font-weight: 400;
277
- // color: #666;
278
- }
257
+ &__row {
258
+ display: flex;
259
+ justify-content: space-between;
260
+ align-items: center;
261
+ padding: 12px 0;
262
+ border-bottom: 1px dotted #ccc;
279
263
 
280
- .value {
281
- font-size: 14px;
282
- font-weight: 500;
283
- // color: #333;
264
+ .label {
265
+ font-size: 14px;
266
+ font-weight: 400;
267
+ // color: #666;
268
+ }
284
269
 
285
- &.highlight {
286
- font-size: 14px;
287
- font-weight: 500;
288
- // color: #000;
289
- }
290
- }
270
+ .value {
271
+ font-size: 14px;
272
+ font-weight: 500;
273
+ // color: #333;
291
274
 
292
- &--quoted {
293
- margin-bottom: 20px;
294
- }
295
- .label-quote {
296
- font-size: 14px;
297
- font-weight: 400;
298
- // font-weight: 600;
299
- }
275
+ &.highlight {
276
+ font-size: 14px;
277
+ font-weight: 500;
278
+ // color: #000;
300
279
  }
280
+ }
301
281
 
302
- &__notes {
303
- width: 100%;
304
- height: 100px;
305
- padding: 12px;
306
- border: 1px solid #ddd;
307
- border-radius: 4px;
308
- resize: none;
309
- font-size: 14px;
310
- font-family: inherit;
311
- margin-bottom: 20px;
312
- box-sizing: border-box;
313
- margin-top: 6px;
282
+ &--quoted {
283
+ margin-bottom: 20px;
284
+ }
285
+ .label-quote {
286
+ font-size: 14px;
287
+ font-weight: 400;
288
+ // font-weight: 600;
289
+ }
290
+ }
314
291
 
315
- &::placeholder {
316
- color: #999;
317
- }
292
+ &__notes {
293
+ width: 100%;
294
+ height: 100px;
295
+ padding: 12px;
296
+ border: 1px solid #ddd;
297
+ border-radius: 4px;
298
+ resize: none;
299
+ font-size: 14px;
300
+ font-family: inherit;
301
+ margin-bottom: 20px;
302
+ box-sizing: border-box;
303
+ margin-top: 6px;
318
304
 
319
- &:focus {
320
- outline: none;
321
- border-color: var(--_primary-500);
322
- }
323
- }
305
+ &::placeholder {
306
+ color: #999;
307
+ }
324
308
 
325
- &__button {
326
- width: 100%;
327
- padding: 12px;
328
- // background-color: var(--_primary-400);
329
- // color: var(--_base-white);
330
- font-size: 16px;
331
- font-weight: 600;
332
- border: none;
333
- border-radius: 4px;
334
- cursor: pointer;
335
- transition: background-color 0.2s ease;
336
-
337
- &:hover {
338
- // background-color: var(--_primary-500);
339
- }
340
- }
341
- & > h3 {
342
- font-size: 16px;
343
- font-weight: 700;
344
- // color: var(--_gray-900);
345
- background-color: #f5f5f5;
346
- padding: 12px;
347
- border-bottom: 1px solid var(--_gray-300);
348
- }
349
- .quote-summary-body {
350
- padding: 0px 16px 16px 16px;
351
- }
309
+ &:focus {
310
+ outline: none;
311
+ border-color: var(--_primary-500);
352
312
  }
353
313
  }
314
+
315
+ &__button {
316
+ width: 100%;
317
+ padding: 12px;
318
+ // background-color: var(--_primary-400);
319
+ // color: var(--_base-white);
320
+ font-size: 16px;
321
+ font-weight: 600;
322
+ border: none;
323
+ border-radius: 4px;
324
+ cursor: pointer;
325
+ transition: background-color 0.2s ease;
326
+
327
+ &:hover {
328
+ // background-color: var(--_primary-500);
329
+ }
330
+ }
331
+ & > h3 {
332
+ font-size: 16px;
333
+ font-weight: 700;
334
+ // color: var(--_gray-900);
335
+ background-color: #f5f5f5;
336
+ padding: 12px;
337
+ border-bottom: 1px solid var(--_gray-300);
338
+ }
339
+ .quote-summary-body {
340
+ padding: 0px 16px 16px 16px;
341
+ }
354
342
  }
355
343
  }
356
- &[data-show-shadow="false"] {
357
- --_show-shadow: none;
358
- }
359
344
 
360
345
  .quotes_address_section {
361
346
  .address_card {
@@ -686,6 +671,16 @@
686
671
  }
687
672
  }
688
673
 
674
+ width: 100%;
675
+
676
+ & > .wrapper {
677
+ // width: 100%;
678
+ // height: 100%;
679
+ }
680
+ &[data-show-shadow="false"] {
681
+ --_show-shadow: none;
682
+ }
683
+
689
684
  // .accordion-element {
690
685
  // background-color: var(
691
686
  // --_ctm-mob-dn-fq-wt-bd-cr,
@@ -1783,22 +1783,31 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1783
1783
  }
1784
1784
 
1785
1785
  .popover-box {
1786
+ // position: absolute;
1787
+ // top: calc(100% + 10px);
1788
+ // right: 0;
1789
+ // background: white;
1790
+ // padding: 12px 16px;
1791
+ // box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
1792
+ // border-radius: 8px;
1793
+ // min-width: 150px;
1794
+ // z-index: 10;
1786
1795
  position: absolute;
1787
- top: calc(100% + 10px);
1788
- right: 0;
1789
- background: white;
1790
- padding: 12px 16px;
1791
- box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
1792
- border-radius: 8px;
1796
+ // border: 1px solid #ccc;
1793
1797
  min-width: 150px;
1794
- z-index: 10;
1798
+ max-width: 200px;
1799
+ z-index: 1000;
1800
+ left: 160%;
1801
+ top: 0;
1802
+ padding: 8px;
1803
+ border-radius: 4px;
1795
1804
  }
1796
1805
 
1797
1806
  .popover-box {
1798
1807
  display: flex;
1799
1808
  flex-direction: column;
1800
1809
 
1801
- width: 100%;
1810
+ // width: 100%;
1802
1811
  gap: prepareMediaVariable(--_ctm-dn-pr-se-im-gp);
1803
1812
  background-color: var(
1804
1813
  --_ctm-mob-dn-pr-se-bd-cr,
@@ -1859,16 +1868,20 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1859
1868
 
1860
1869
  .popover-arrow {
1861
1870
  position: absolute;
1862
- top: -6px;
1863
- right: 10px;
1871
+ top: 8px;
1872
+ left: -5px;
1864
1873
  width: 12px;
1865
1874
  height: 12px;
1866
1875
  background-color: var(
1867
1876
  --_ctm-mob-dn-pr-se-bd-cr,
1868
1877
  var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
1869
1878
  );
1870
- transform: rotate(45deg);
1871
- box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.05);
1879
+ transform: rotate(-45deg);
1880
+ box-shadow: -1px -1px 0px
1881
+ var(
1882
+ --_ctm-mob-dn-pr-se-br-cr,
1883
+ var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
1884
+ );
1872
1885
  }
1873
1886
 
1874
1887
  .popover_item {
package/dist/widget.scss CHANGED
@@ -138,3 +138,5 @@
138
138
  @use "./coupon.scss";
139
139
  @use "./order-processing.scss";
140
140
  @use "./embroidery.scss";
141
+ @use "./error-templates.scss";
142
+ @use "./wishlist-overlay.scss";
@@ -0,0 +1,48 @@
1
+ .wishlist-container {
2
+ position: relative;
3
+ display: inline-block;
4
+
5
+ .wishlist-btn {
6
+ background: #ff4081;
7
+ color: #fff;
8
+ border: none;
9
+ padding: 8px 14px;
10
+ border-radius: 6px;
11
+ cursor: pointer;
12
+ font-size: 14px;
13
+
14
+ &:hover {
15
+ background: #e73370;
16
+ }
17
+ }
18
+
19
+ .wishlist-overlay {
20
+ position: absolute;
21
+ min-width: 220px;
22
+ background: #fff;
23
+ border: 1px solid #ddd;
24
+ border-radius: 8px;
25
+ padding: 12px;
26
+ box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
27
+ z-index: 1000;
28
+
29
+ h4 {
30
+ margin: 0 0 10px;
31
+ font-size: 16px;
32
+ border-bottom: 1px solid #eee;
33
+ padding-bottom: 5px;
34
+ }
35
+
36
+ ul {
37
+ margin: 0;
38
+ padding: 0;
39
+ list-style: none;
40
+
41
+ li {
42
+ padding: 6px 0;
43
+ font-size: 14px;
44
+ color: #333;
45
+ }
46
+ }
47
+ }
48
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sc-360-v2/storefront-cms-library",
3
- "version": "0.3.96",
3
+ "version": "0.3.97",
4
4
  "main": "/dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "exports": {