@sc-360-v2/storefront-cms-library 0.4.19 → 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.
@@ -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%;
@@ -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))
@@ -332,8 +332,6 @@
332
332
  .crt__btn {
333
333
  display: flex;
334
334
  align-items: center;
335
- padding-inline: 15px;
336
- padding: 6px;
337
335
  cursor: pointer;
338
336
  min-width: 100px;
339
337
  min-height: 50px;
@@ -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 {
@@ -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 {