@sc-360-v2/storefront-cms-library 0.4.27 → 0.4.28

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.
@@ -521,17 +521,17 @@ $resizeActive: '[data-cms-element-resizer="true"]';
521
521
  }
522
522
  // button styles for primary
523
523
  .primary__btn {
524
- color: var(--_thm-py-bs-dt-se-tt-cr);
525
- background-color: var(--_thm-py-bs-dt-se-bd-cr);
526
- color: var(--_thm-py-bs-dt-se-tt-cr);
527
- text-align: center;
528
- border-radius: var(--_thm-py-bs-hr-se-br-rs);
524
+ // color: var(--_thm-py-bs-dt-se-tt-cr);
525
+ // background-color: var(--_thm-py-bs-dt-se-bd-cr);
526
+ // color: var(--_thm-py-bs-dt-se-tt-cr);
527
+ // text-align: center;
528
+ // border-radius: var(--_thm-py-bs-hr-se-br-rs);
529
529
  padding: 10px 16px;
530
- height: 40px;
531
- &:hover {
532
- background-color: var(--_thm-py-bs-hr-se-bd-cr);
533
- color: var(--_thm-py-bs-hr-se-tt-cr);
534
- }
530
+ // height: 40px;
531
+ // &:hover {
532
+ // background-color: var(--_thm-py-bs-hr-se-bd-cr);
533
+ // color: var(--_thm-py-bs-hr-se-tt-cr);
534
+ // }
535
535
  }
536
536
  }
537
537
 
@@ -48,6 +48,7 @@
48
48
  }
49
49
 
50
50
  h2 {
51
+ color: var(--_thm-ty-p1-tt-cr);
51
52
  font-size: 18px;
52
53
  font-weight: normal;
53
54
  margin: 0;
@@ -91,55 +92,56 @@
91
92
 
92
93
  button {
93
94
  padding: 10px 16px;
94
- border-radius: 6px;
95
- font-size: 14px;
96
- font-weight: 500;
97
- cursor: pointer;
98
- border: none;
99
- transition: background 0.2s ease;
100
- display: flex;
101
- align-items: center;
102
- &[aria-label="Discard"] {
103
- &:hover {
104
- background-color: var(--_gray-100);
105
- color: var(--_gray-900);
106
- }
107
- }
108
-
109
- &:first-child {
110
- // background: #f3f3f3;
111
- color: #333;
112
-
113
- &:hover {
114
- // background: #e0e0e0;
115
- }
116
- }
95
+ // border-radius: 6px;
96
+ // font-size: 14px;
97
+ // font-weight: 500;
98
+ // cursor: pointer;
99
+ // border: none;
100
+ // transition: background 0.2s ease;
101
+ // display: flex;
102
+ // align-items: center;
103
+ // &[aria-label="Discard"] {
104
+ // &:hover {
105
+ // background-color: var(--_gray-100);
106
+ // color: var(--_gray-900);
107
+ // }
108
+ // }
109
+
110
+ // &:first-child {
111
+ // // background: #f3f3f3;
112
+ // color: #333;
113
+
114
+ // &:hover {
115
+ // // background: #e0e0e0;
116
+ // }
117
+ // }
117
118
 
118
119
  &.proceed_button {
119
- background: var(--_primary-400);
120
- color: #fff;
121
- display: flex;
122
- gap: 10px;
123
-
124
- span {
125
- svg {
126
- width: 18px;
127
- height: 18px;
128
-
129
- path {
130
- stroke: #ffffff;
131
- }
132
- }
133
- }
120
+ // background: var(--_primary-400);
121
+ // color: #fff;
122
+ // display: flex;
123
+ // gap: 10px;
124
+
125
+ // span {
126
+ // svg {
127
+ // width: 18px;
128
+ // height: 18px;
129
+
130
+ // path {
131
+ // stroke: #ffffff;
132
+ // }
133
+ // }
134
+ // }
134
135
 
135
136
  &:disabled {
136
- background: var(--_primary-100);
137
+ background: var(--_sf-hr-bd-cr, var(--_thm-py-bs-dt-se-bd-cr));
137
138
  cursor: not-allowed;
139
+ opacity: 0.7;
138
140
  }
139
141
 
140
- &:not(:disabled):hover {
141
- background: #0069d9;
142
- }
142
+ // &:not(:disabled):hover {
143
+ // background: #0069d9;
144
+ // }
143
145
  }
144
146
  }
145
147
  }
@@ -205,6 +207,13 @@
205
207
  justify-content: center;
206
208
  align-items: center;
207
209
  height: 210px;
210
+ p {
211
+ color: var(--_thm-ty-p1-tt-cr);
212
+ font-size: 18px;
213
+ font-weight: normal;
214
+ margin: 0;
215
+ line-height: 28px;
216
+ }
208
217
  }
209
218
  }
210
219
 
@@ -260,12 +269,16 @@
260
269
  flex-direction: column;
261
270
 
262
271
  .user_name {
272
+ color: var(--_thm-ty-p1-tt-cr);
263
273
  font-weight: 500;
274
+ font-size: 18px;
275
+ margin: 0;
276
+ line-height: 28px;
264
277
  }
265
278
 
266
279
  .user_id {
267
280
  font-size: 12px;
268
- color: #666;
281
+ color: var(--_thm-ty-p3-tt-cr);
269
282
  display: flex;
270
283
  gap: 4px;
271
284
  margin-top: 6px;
@@ -1585,7 +1585,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1585
1585
  }
1586
1586
 
1587
1587
  &:hover {
1588
- --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-bd-cr)};
1588
+ // --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-bd-cr)};
1589
+ @include BgColorLighter(var(--_sf-hr-cr), 5%);
1589
1590
  --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-br-cr)};
1590
1591
  --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-br-se)};
1591
1592
  --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-br-wh)};
package/dist/coupon.scss CHANGED
@@ -295,6 +295,91 @@ $resizeActive: '[data-cms-element-resizer="true"]';
295
295
  white-space: nowrap;
296
296
  }
297
297
  }
298
+ .coupon_code_apply_section {
299
+ display: flex;
300
+ flex-direction: column;
301
+ gap: 16px;
302
+ .coupon_code_fields_wrapper {
303
+ display: flex;
304
+ align-items: center;
305
+ justify-content: space-between;
306
+ gap: 12px;
307
+ input {
308
+ border: 1px solid #d0d5dd;
309
+ padding: 12px;
310
+ width: 100%;
311
+ border-radius: 4px;
312
+ }
313
+ .coupon-search-btn {
314
+ width: 93px;
315
+ height: 48px;
316
+ white-space: nowrap;
317
+ }
318
+ }
319
+ .couponCode_divider {
320
+ border: 1px dashed #d0d5dd;
321
+ }
322
+ .coupon-list {
323
+ display: flex;
324
+ flex-direction: column;
325
+ gap: 24px;
326
+ .coupon-item {
327
+ display: flex;
328
+ flex-direction: row;
329
+ gap: 12px;
330
+ input {
331
+ width: 18px;
332
+ display: flex;
333
+ flex-direction: column;
334
+ position: relative;
335
+ top: -9px;
336
+ }
337
+ input[type="checkbox"] {
338
+ accent-color: rgb(36 61 198);
339
+ }
340
+ .coupon-info {
341
+ display: flex;
342
+ flex-direction: column;
343
+ gap: 6px;
344
+ .coupon-title {
345
+ font-size: 16px;
346
+ font-weight: 700;
347
+ line-height: 24px;
348
+ color: #101828;
349
+ }
350
+ .coupon-desc {
351
+ font-size: 14px;
352
+ font-weight: 400;
353
+ line-height: 20px;
354
+ color: #667085;
355
+ }
356
+ }
357
+ }
358
+ }
359
+ .coupon-footer-section {
360
+ display: flex;
361
+ justify-content: space-between;
362
+ .coupon-savings {
363
+ .title {
364
+ font-size: 14px;
365
+ font-weight: 400;
366
+ line-height: 20px;
367
+ color: #344054;
368
+ }
369
+ .price {
370
+ font-size: 16px;
371
+ font-weight: 700;
372
+ line-height: 24px;
373
+ color: #101828;
374
+ }
375
+ }
376
+ .apply-coupon-primary-btn {
377
+ width: 158px;
378
+ height: 48px;
379
+ white-space: nowrap;
380
+ }
381
+ }
382
+ }
298
383
  }
299
384
  }
300
385
  }