@sc-360-v2/storefront-cms-library 0.4.20 → 0.4.21

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 (13) hide show
  1. package/dist/cart-summary.scss +124 -120
  2. package/dist/cartAttributes.scss +20 -6
  3. package/dist/confirmationModal.scss +4 -3
  4. package/dist/dropdownTemplate.scss +13 -0
  5. package/dist/embroidery.scss +14 -0
  6. package/dist/icons.js +1 -1
  7. package/dist/index.js +1 -1
  8. package/dist/light-box-v2.scss +5 -1
  9. package/dist/order-status.scss +4 -4
  10. package/dist/product-price.scss +166 -0
  11. package/dist/product-sizechart.scss +2 -1
  12. package/dist/store-locations.scss +162 -54
  13. package/package.json +1 -1
package/dist/light-box-v2.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
+ @use "./functions.scss" as *;
3
4
 
4
5
  $lbMain: "#cms_lt_bx_mn";
5
6
  $mnwr: ".cms_lt_wr";
@@ -77,7 +78,10 @@ $activeElementSelector: "[data-has-clicked='true']";
77
78
  --_ctm-mob-lig-dn-bd-se,
78
79
  var(--_ctm-tab-lig-dn-bd-se, var(--_ctm-lig-dn-bd-se))
79
80
  );
80
- border-radius: 10px;
81
+ border-radius: prepareMediaVariable(--_ctm-lig-dn-br-rs, 0px);
82
+ border-width: prepareMediaVariable(--_ctm-lig-dn-br-wh);
83
+ border-style: prepareMediaVariable(--_ctm-lig-dn-br-se);
84
+ border-color: prepareMediaVariable(--_ctm-lig-dn-br-cr);
81
85
  position: var(--_p-relative);
82
86
 
83
87
  // margin-inline-start: 35%;
package/dist/order-status.scss CHANGED
@@ -1304,10 +1304,10 @@
1304
1304
  // font-weight: 600;
1305
1305
  // color: var(--_gray-900);
1306
1306
  // line-height: 20px;
1307
- padding: var(
1308
- --_ctm-mob-dn-pt-wt-pt-ne-pg,
1309
- var(--_ctm-tab-dn-pt-wt-pt-ne-im-pg, var(--_ctm-dn-pt-wt-pt-ne-pg))
1310
- );
1307
+ // padding: var(
1308
+ // --_ctm-mob-dn-pt-wt-pt-ne-pg,
1309
+ // var(--_ctm-tab-dn-pt-wt-pt-ne-im-pg, var(--_ctm-dn-pt-wt-pt-ne-pg))
1310
+ // );
1311
1311
  font-family: var(
1312
1312
  --_ctm-mob-dn-pt-wt-pt-ne-ft-fy,
1313
1313
  var(--_ctm-tab-dn-pt-wt-pt-ne-ft-fy, var(--_ctm-dn-pt-wt-pt-ne-ft-fy))
package/dist/product-price.scss CHANGED
@@ -427,6 +427,172 @@
427
427
  )
428
428
  );
429
429
  }
430
+ .denominations_container {
431
+ font-size: 16px;
432
+ display: flex;
433
+ flex-direction: column;
434
+ gap: 6px;
435
+ padding-bottom: 14px;
436
+ .denominations_title {
437
+ margin-bottom: 4px;
438
+ font-size: 16px;
439
+ color: #000000;
440
+ font-weight: 500;
441
+ line-height: 150%;
442
+ }
443
+ .denominations_grid {
444
+ display: flex;
445
+ gap: 8px;
446
+ flex-wrap: wrap;
447
+ margin-bottom: 10px;
448
+ flex-direction: row;
449
+ gap: 12px;
450
+ .amount_btn {
451
+ transition: color 0.3s ease;
452
+ cursor: pointer;
453
+ display: flex;
454
+ align-items: center;
455
+ justify-content: center;
456
+ padding: 4px;
457
+ min-width: 20px;
458
+ min-height: 20px;
459
+ box-sizing: content-box;
460
+ font-size: 16px;
461
+ font-weight: 600;
462
+ line-height: 150%;
463
+ background-color: #ffffff;
464
+ border: 1px solid #d6d6d6;
465
+
466
+ &.active {
467
+ background-color: #f5f5f5;
468
+ border: 1px solid #3e4784;
469
+ color: #000080;
470
+ }
471
+ }
472
+ }
473
+ .custom_amount_input {
474
+ height: 40px;
475
+ display: flex;
476
+ position: relative;
477
+ gap: 6px;
478
+ align-items: center;
479
+ border-radius: 4px;
480
+ background: #fff;
481
+ border: 1px solid #d0d5dd;
482
+ padding: 8px 12px;
483
+ width: 220px;
484
+ transition:
485
+ background-color 0.2s,
486
+ color 0.2s,
487
+ border-color 0.2s,
488
+ box-shadow 0.2s;
489
+ .svg_icon {
490
+ color: var(--_gray-500);
491
+ font-weight: 500;
492
+ font-size: 14px;
493
+ line-height: 24px;
494
+ margin-top: 2px;
495
+ }
496
+ input {
497
+ &::placeholder {
498
+ color: var(--_gray-500);
499
+ font-weight: 500;
500
+ font-size: 14px;
501
+ line-height: 24px;
502
+ }
503
+ }
504
+ &:focus-within {
505
+ outline: 0 none;
506
+ outline-offset: 0;
507
+ border-radius: 4px;
508
+ box-shadow:
509
+ 0px 1px 2px rgba(16, 24, 40, 0.05),
510
+ 0px 0px 0px 2px var(--_primary-100);
511
+ border: 1px solid var(--_primary-300);
512
+ }
513
+ }
514
+ .delivery_details_container {
515
+ .delivery_details_title {
516
+ display: inline-block;
517
+ margin-top: 8px;
518
+ margin-bottom: 4px;
519
+ font-size: 16px;
520
+ color: #000000;
521
+ font-weight: 500;
522
+ line-height: 150%;
523
+ }
524
+ .input_container {
525
+ display: flex;
526
+ flex-direction: column;
527
+ gap: 4px;
528
+ margin-bottom: 12px;
529
+
530
+ &:last-child {
531
+ margin-bottom: 0;
532
+ }
533
+ label {
534
+ display: block;
535
+ color: var(--_gray-700);
536
+ font-weight: 500;
537
+ font-size: 14px;
538
+ line-height: 20px;
539
+ }
540
+ .message_text {
541
+ background-color: var(--_base-white);
542
+ padding: 8px 12px;
543
+ border: 1px solid var(--_gray-300);
544
+ border-radius: 4px;
545
+ transition:
546
+ background-color 0.2s,
547
+ color 0.2s,
548
+ border-color 0.2s,
549
+ box-shadow 0.2s;
550
+ &::placeholder {
551
+ color: var(--_gray-500);
552
+ font-weight: 500;
553
+ font-size: 14px;
554
+ line-height: 24px;
555
+ }
556
+ &:focus {
557
+ outline: 0 none;
558
+ outline-offset: 0;
559
+ border-radius: 4px;
560
+ box-shadow:
561
+ 0px 1px 2px rgba(16, 24, 40, 0.05),
562
+ 0px 0px 0px 2px var(--_primary-100);
563
+ border: 1px solid var(--_primary-300);
564
+ }
565
+ }
566
+ input {
567
+ background-color: var(--_base-white);
568
+ padding: 8px 12px;
569
+ border: 1px solid var(--_gray-300);
570
+ border-radius: 4px;
571
+ height: 40px;
572
+ transition:
573
+ background-color 0.2s,
574
+ color 0.2s,
575
+ border-color 0.2s,
576
+ box-shadow 0.2s;
577
+ &::placeholder {
578
+ color: var(--_gray-500);
579
+ font-weight: 500;
580
+ font-size: 14px;
581
+ line-height: 24px;
582
+ }
583
+ &:focus {
584
+ outline: 0 none;
585
+ outline-offset: 0;
586
+ border-radius: 4px;
587
+ box-shadow:
588
+ 0px 1px 2px rgba(16, 24, 40, 0.05),
589
+ 0px 0px 0px 2px var(--_primary-100);
590
+ border: 1px solid var(--_primary-300);
591
+ }
592
+ }
593
+ }
594
+ }
595
+ }
430
596
  }
431
597
  .product-actual-price-container {
432
598
  .product-actual-discount {
package/dist/product-sizechart.scss CHANGED
@@ -31,7 +31,7 @@
31
31
  .sizechart__buttons__wrapper {
32
32
  width: 100%;
33
33
  height: 100%;
34
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
34
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
35
35
 
36
36
  display: flex;
37
37
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
@@ -45,6 +45,7 @@
45
45
 
46
46
  .btn__with__text {
47
47
  white-space: nowrap;
48
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
48
49
  }
49
50
 
50
51
  .show__more__btn__wrapper {
package/dist/store-locations.scss CHANGED
@@ -131,22 +131,79 @@
131
131
  .store__container {
132
132
  .stack {
133
133
  .vertical {
134
- .item:not(:last-child)::after {
135
- content: "";
136
- position: absolute;
137
- left: 0;
138
- right: 0;
139
- bottom: calc(
140
- -1 * (var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2)
141
- );
142
- height: var(
143
- --_ctm-mob-dn-im-se-dr-wt,
144
- var(--_ctm-tab-dn-im-se-dr-wt, var(--_ctm-dn-im-se-dr-wt))
145
- );
146
- background-color: var(
147
- --_ctm-mob-dn-im-se-dr-cr,
148
- var(--_ctm-tab-dn-im-se-dr-cr, var(--_ctm-dn-im-se-dr-cr))
149
- );
134
+ .radio_wrapper {
135
+ position: relative;
136
+
137
+ &:not(:last-child)::after {
138
+ content: "";
139
+ position: absolute;
140
+ left: 0;
141
+ right: 0;
142
+ bottom: calc(
143
+ -1 *
144
+ (var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2)
145
+ );
146
+ height: var(
147
+ --_ctm-mob-dn-im-se-dr-wt,
148
+ var(--_ctm-tab-dn-im-se-dr-wt, var(--_ctm-dn-im-se-dr-wt))
149
+ );
150
+ background-color: var(
151
+ --_ctm-mob-dn-im-se-dr-cr,
152
+ var(--_ctm-tab-dn-im-se-dr-cr, var(--_ctm-dn-im-se-dr-cr))
153
+ );
154
+ }
155
+ }
156
+ }
157
+ // .horizontal {
158
+ // .radio_wrapper {
159
+ // position: relative;
160
+ // background-color: red;
161
+ // &:not(:last-child)::after {
162
+ // content: "";
163
+ // position: absolute;
164
+ // top: 0;
165
+ // bottom: 0;
166
+ // right: calc(
167
+ // -1 *
168
+ // (var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2)
169
+ // );
170
+ // height: var(
171
+ // --_ctm-mob-dn-im-se-dr-wt,
172
+ // var(--_ctm-tab-dn-im-se-dr-wt, var(--_ctm-dn-im-se-dr-wt))
173
+ // );
174
+ // background-color: var(
175
+ // --_ctm-mob-dn-im-se-dr-cr,
176
+ // var(--_ctm-tab-dn-im-se-dr-cr, var(--_ctm-dn-im-se-dr-cr))
177
+ // );
178
+ // }
179
+ // }
180
+ // }
181
+ .horizontal {
182
+ display: flex;
183
+ // align-items: center;
184
+
185
+ .radio_wrapper {
186
+ position: relative;
187
+
188
+ &:not(:last-child)::after {
189
+ content: "";
190
+ position: absolute;
191
+ top: 50%;
192
+ transform: translateY(-50%);
193
+ right: calc(
194
+ -1 *
195
+ (var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2)
196
+ );
197
+ width: var(
198
+ --_ctm-mob-dn-im-se-dr-wt,
199
+ var(--_ctm-tab-dn-im-se-dr-wt, var(--_ctm-dn-im-se-dr-wt))
200
+ );
201
+ height: 85%;
202
+ background-color: var(
203
+ --_ctm-mob-dn-im-se-dr-cr,
204
+ var(--_ctm-tab-dn-im-se-dr-cr, var(--_ctm-dn-im-se-dr-cr, #ccc))
205
+ );
206
+ }
150
207
  }
151
208
  }
152
209
  }
@@ -157,6 +214,7 @@
157
214
  .store__container {
158
215
  .loadmore_conatiner {
159
216
  button {
217
+ width: max-content;
160
218
  box-shadow: var(
161
219
  --_ctm-mob-dn-sw-me-is-bn-sw-ae,
162
220
  var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae))
@@ -240,7 +298,7 @@
240
298
  .store__container {
241
299
  display: flex;
242
300
  flex-direction: column;
243
- align-items: center;
301
+ align-items: flex-start;
244
302
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
245
303
  width: 100%;
246
304
  background-color: var(
@@ -553,22 +611,6 @@
553
611
  --_ctm-mob-dn-se-ls-bn-dt-se-ue,
554
612
  var(--_ctm-tab-dn-se-ls-bn-dt-se-ue, var(--_ctm-dn-se-ls-bn-dt-se-ue))
555
613
  );
556
- svg {
557
- width: var(
558
- --_ctm-mob-dn-se-ls-bn-dt-se-in-se,
559
- var(--_ctm-tab-dn-se-ls-bn-dt-se-in-se, var(--_ctm-dn-se-ls-bn-dt-se-in-se))
560
- );
561
- height: var(
562
- --_ctm-mob-dn-se-ls-bn-dt-se-in-se,
563
- var(--_ctm-tab-dn-se-ls-bn-dt-se-in-se, var(--_ctm-dn-se-ls-bn-dt-se-in-se))
564
- );
565
- path {
566
- stroke: var(
567
- --_ctm-mob-dn-se-ls-bn-dt-se-in-c1,
568
- var(--_ctm-tab-dn-se-ls-bn-dt-se-in-c1, var(--_ctm-dn-se-ls-bn-dt-se-in-c1))
569
- );
570
- }
571
- }
572
614
  &:hover {
573
615
  border-color: var(
574
616
  --_ctm-mob-dn-se-ls-bn-hr-se-br-cr,
@@ -651,8 +693,7 @@
651
693
  --_ctm-mob-dn-se-ls-bn-hr-se-ue,
652
694
  var(--_ctm-tab-dn-se-ls-bn-hr-se-ue, var(--_ctm-dn-se-ls-bn-hr-se-ue))
653
695
  );
654
-
655
- svg {
696
+ .icon {
656
697
  width: var(
657
698
  --_ctm-mob-dn-se-ls-bn-hr-se-in-se,
658
699
  var(--_ctm-tab-dn-se-ls-bn-hr-se-in-se, var(--_ctm-dn-se-ls-bn-hr-se-in-se))
@@ -661,13 +702,64 @@
661
702
  --_ctm-mob-dn-se-ls-bn-hr-se-in-se,
662
703
  var(--_ctm-tab-dn-se-ls-bn-hr-se-in-se, var(--_ctm-dn-se-ls-bn-hr-se-in-se))
663
704
  );
705
+ svg {
706
+ width: var(
707
+ --_ctm-mob-dn-se-ls-bn-hr-se-in-se,
708
+ var(--_ctm-tab-dn-se-ls-bn-hr-se-in-se, var(--_ctm-dn-se-ls-bn-hr-se-in-se))
709
+ );
710
+ height: var(
711
+ --_ctm-mob-dn-se-ls-bn-hr-se-in-se,
712
+ var(--_ctm-tab-dn-se-ls-bn-hr-se-in-se, var(--_ctm-dn-se-ls-bn-hr-se-in-se))
713
+ );
714
+ path {
715
+ stroke: var(
716
+ --_ctm-mob-dn-se-ls-bn-hr-se-in-c1,
717
+ var(--_ctm-tab-dn-se-ls-bn-hr-se-in-c1, var(--_ctm-dn-se-ls-bn-hr-se-in-c1))
718
+ );
719
+ }
720
+ }
721
+ &.open {
722
+ transform: rotate(180deg);
723
+ }
724
+
725
+ &.closed {
726
+ transform: rotate(0deg);
727
+ }
728
+ }
729
+ }
730
+ .icon {
731
+ width: var(
732
+ --_ctm-mob-dn-se-ls-bn-dt-se-in-se,
733
+ var(--_ctm-tab-dn-se-ls-bn-dt-se-in-se, var(--_ctm-dn-se-ls-bn-dt-se-in-se))
734
+ );
735
+ height: var(
736
+ --_ctm-mob-dn-se-ls-bn-dt-se-in-se,
737
+ var(--_ctm-tab-dn-se-ls-bn-dt-se-in-se, var(--_ctm-dn-se-ls-bn-dt-se-in-se))
738
+ );
739
+ svg {
740
+ width: var(
741
+ --_ctm-mob-dn-se-ls-bn-dt-se-in-se,
742
+ var(--_ctm-tab-dn-se-ls-bn-dt-se-in-se, var(--_ctm-dn-se-ls-bn-dt-se-in-se))
743
+ );
744
+ height: var(
745
+ --_ctm-mob-dn-se-ls-bn-dt-se-in-se,
746
+ var(--_ctm-tab-dn-se-ls-bn-dt-se-in-se, var(--_ctm-dn-se-ls-bn-dt-se-in-se))
747
+ );
664
748
  path {
665
749
  stroke: var(
666
- --_ctm-mob-dn-se-ls-bn-hr-se-in-c1,
667
- var(--_ctm-tab-dn-se-ls-bn-hr-se-in-c1, var(--_ctm-dn-se-ls-bn-hr-se-in-c1))
750
+ --_ctm-mob-dn-se-ls-bn-dt-se-in-c1,
751
+ var(--_ctm-tab-dn-se-ls-bn-dt-se-in-c1, var(--_ctm-dn-se-ls-bn-dt-se-in-c1))
668
752
  );
669
753
  }
670
754
  }
755
+
756
+ &.open {
757
+ transform: rotate(180deg);
758
+ }
759
+
760
+ &.closed {
761
+ transform: rotate(0deg);
762
+ }
671
763
  }
672
764
  }
673
765
  }
@@ -777,36 +869,52 @@
777
869
  .horizontal {
778
870
  display: flex;
779
871
  flex-direction: row;
780
- align-items: center;
781
872
  margin-top: 10px;
782
873
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
783
874
  .radio_wrapper {
875
+ display: flex;
784
876
  .custom_radio {
785
877
  position: relative;
878
+ display: flex;
879
+ padding: prepareMediaVariable(--_ctm-dn-ro-bn-pg, 0);
880
+ // align-items: center;
881
+
786
882
  input[type="radio"] {
787
- margin-right: 12px;
788
- width: 16px;
789
- height: 16px;
790
- accent-color: #2563eb;
791
- cursor: pointer;
792
- display: none;
793
- }
794
- .radio-style {
883
+ appearance: none;
795
884
  width: 20px;
796
885
  height: 20px;
797
- border-radius: 50%;
798
886
  border: 1px solid #d0d5dd;
799
- background: white;
800
- display: inline-block;
801
- box-sizing: border-box;
802
- transition: all 0.2s;
887
+ border-radius: 50%;
888
+ background-color: #fff;
889
+ cursor: pointer;
890
+ transition: all 0.2s ease;
891
+ position: relative;
803
892
  }
804
- input[type="radio"]:checked + .radio-style {
805
- background-color: var(--_base-white);
806
- border: 5px solid var(--_primary-400);
893
+
894
+ input[type="radio"]::before {
895
+ content: "";
896
+ position: absolute;
897
+ top: 50%;
898
+ left: 50%;
899
+ width: 10px;
900
+ height: 10px;
901
+ background-color: var(--_primary-400);
902
+ border-radius: 50%;
903
+ transform: translate(-50%, -50%) scale(0);
904
+ transition: transform 0.2s ease;
905
+ }
906
+
907
+ input[type="radio"]:checked::before {
908
+ transform: translate(-50%, -50%) scale(1);
909
+ }
910
+
911
+ input[type="radio"]:focus {
912
+ outline: 2px solid var(--_primary-200);
913
+ outline-offset: 2px;
807
914
  }
808
915
  }
809
916
  .item {
917
+ position: relative;
810
918
  padding: var(
811
919
  --_ctm-mob-dn-im-se-vl-pg,
812
920
  var(--_ctm-tab-dn-im-se-vl-pg, var(--_ctm-dn-im-se-vl-pg))
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sc-360-v2/storefront-cms-library",
3
- "version": "0.4.20",
3
+ "version": "0.4.21",
4
4
  "main": "/dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "exports": {