@sc-360-v2/storefront-cms-library 0.4.39 → 0.4.42

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.
@@ -4366,5 +4366,236 @@ $resizeActive: '[data-cms-element-resizer="true"]';
4366
4366
  }
4367
4367
  }
4368
4368
  }
4369
+ .popover-container {
4370
+ position: relative;
4371
+ display: inline-block;
4372
+ .popover-trigger {
4373
+ cursor: pointer;
4374
+ font-weight: 500;
4375
+ color: #2b6cb0;
4376
+ }
4377
+
4378
+ .popover-box {
4379
+ // position: absolute;
4380
+ // top: calc(100% + 10px);
4381
+ // right: 0;
4382
+ // background: white;
4383
+ // padding: 12px 16px;
4384
+ // box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
4385
+ // border-radius: 8px;
4386
+ // min-width: 150px;
4387
+ // z-index: 10;
4388
+ position: absolute;
4389
+ // border: 1px solid #ccc;
4390
+ min-width: 150px;
4391
+ max-width: 300px;
4392
+ z-index: 1000;
4393
+ left: 30px;
4394
+ top: 0;
4395
+ padding: 8px;
4396
+ border-radius: 4px;
4397
+ max-height: 150px;
4398
+ overflow-y: auto;
4399
+ }
4400
+
4401
+ .popover-box {
4402
+ display: flex;
4403
+ flex-direction: column;
4404
+
4405
+ // width: 100%;
4406
+ gap: prepareMediaVariable(--_ctm-dn-pr-se-im-gp);
4407
+ background-color: var(
4408
+ --_ctm-mob-dn-pr-se-bd-cr,
4409
+ var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
4410
+ );
4411
+
4412
+ border-color: var(
4413
+ --_ctm-mob-dn-pr-se-br-cr,
4414
+ var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
4415
+ );
4416
+
4417
+ border-style: var(
4418
+ --_ctm-mob-dn-pr-se-br-se,
4419
+ var(--_ctm-tab-dn-pr-se-br-se, var(--_ctm-dn-pr-se-br-se))
4420
+ );
4421
+
4422
+ border-width: var(
4423
+ --_ctm-mob-dn-pr-se-br-wh,
4424
+ var(--_ctm-tab-dn-pr-se-br-wh, var(--_ctm-dn-pr-se-br-wh))
4425
+ );
4426
+
4427
+ border-radius: var(
4428
+ --_ctm-mob-dn-pr-se-br-rs,
4429
+ var(--_ctm-tab-dn-pr-se-br-rs, var(--_ctm-dn-pr-se-br-rs))
4430
+ );
4431
+
4432
+ box-shadow: var(
4433
+ --_show-shadow,
4434
+ var(--_ctm-mob-dn-pr-se-sw-ae, var(--_ctm-tab-dn-pr-se-sw-ae, var(--_ctm-dn-pr-se-sw-ae)))
4435
+ var(
4436
+ --_ctm-mob-dn-pr-se-sw-br,
4437
+ var(--_ctm-tab-dn-pr-se-sw-br, var(--_ctm-dn-pr-se-sw-br))
4438
+ )
4439
+ var(
4440
+ --_ctm-mob-dn-pr-se-sw-sd,
4441
+ var(--_ctm-tab-dn-pr-se-sw-sd, var(--_ctm-dn-pr-se-sw-sd))
4442
+ )
4443
+ var(
4444
+ --_ctm-mob-dn-pr-se-sw-cr,
4445
+ var(--_ctm-tab-dn-pr-se-sw-cr, var(--_ctm-dn-pr-se-sw-cr))
4446
+ )
4447
+ );
4448
+
4449
+ padding: var(--_ctm-mob-dn-pr-se-pg, var(--_ctm-tab-dn-pr-se-pg, var(--_ctm-dn-pr-se-pg)));
4450
+ }
4451
+
4452
+ .popover-box strong {
4453
+ display: block;
4454
+ margin-bottom: 6px;
4455
+ font-weight: bold;
4456
+ }
4457
+
4458
+ .popover-arrow {
4459
+ position: absolute;
4460
+ top: 8px;
4461
+ left: -5px;
4462
+ width: 12px;
4463
+ height: 12px;
4464
+ // background-color: var(
4465
+ // --_ctm-mob-dn-pr-se-bd-cr,
4466
+ // var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
4467
+ // );
4468
+ transform: rotate(-45deg);
4469
+ box-shadow: -1px -1px 0px
4470
+ var(--_ctm-mob-dn-pr-se-br-cr, var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr)));
4471
+ }
4472
+
4473
+ .popover_item {
4474
+ // padding-inline: var(--_sf-cd-gp);
4475
+ color: var(--_ctm-mob-dn-pr-se-cr, var(--_ctm-tab-dn-pr-se-cr, var(--_ctm-dn-pr-se-cr)));
4476
+ font-family: var(
4477
+ --_ctm-mob-dn-pr-se-ft-fy,
4478
+ var(--_ctm-tab-dn-pr-se-ft-fy, var(--_ctm-dn-pr-se-ft-fy))
4479
+ );
4480
+ font-size: var(
4481
+ --_ctm-mob-dn-pr-se-ft-se,
4482
+ var(--_ctm-tab-dn-pr-se-ft-se, var(--_ctm-dn-pr-se-ft-se))
4483
+ );
4484
+ font-weight: var(
4485
+ --_ctm-mob-dn-pr-se-ft-wt,
4486
+ var(--_ctm-tab-dn-pr-se-ft-wt, var(--_ctm-dn-pr-se-ft-wt))
4487
+ );
4488
+ font-style: var(
4489
+ --_ctm-mob-dn-pr-se-ft-se-ic,
4490
+ var(--_ctm-tab-dn-pr-se-ft-se-ic, var(--_ctm-dn-pr-se-ft-se-ic))
4491
+ );
4492
+ text-align: var(
4493
+ --_ctm-mob-dn-pr-se-tt-an,
4494
+ var(--_ctm-tab-dn-pr-se-tt-an, var(--_ctm-dn-pr-se-tt-an))
4495
+ );
4496
+ letter-spacing: var(
4497
+ --_ctm-mob-dn-pr-se-lr-sg,
4498
+ var(--_ctm-tab-dn-pr-se-lr-sg, var(--_ctm-dn-pr-se-lr-sg))
4499
+ );
4500
+ line-height: var(
4501
+ --_ctm-mob-dn-pr-se-le-ht,
4502
+ var(--_ctm-tab-dn-pr-se-le-ht, var(--_ctm-dn-pr-se-le-ht-dc))
4503
+ );
4504
+ text-decoration: var(
4505
+ --_ctm-mob-dn-pr-se-ue,
4506
+ var(--_ctm-tab-dn-pr-se-ue, var(--_ctm-dn-pr-se-ue))
4507
+ );
4508
+ // margin-left: 10px;
4509
+ }
4510
+ }
4511
+
4512
+ .error__message__wraper {
4513
+ background-color: var(
4514
+ --_ctm-mob-dn-er-me-bd-cr,
4515
+ var(--_ctm-tab-dn-er-me-bd-cr, var(--_ctm-dn-er-me-bd-cr))
4516
+ );
4517
+
4518
+ border-color: var(
4519
+ --_ctm-mob-dn-er-me-br-cr,
4520
+ var(--_ctm-tab-dn-er-me-br-cr, var(--_ctm-dn-er-me-br-cr))
4521
+ );
4522
+
4523
+ border-style: var(
4524
+ --_ctm-mob-dn-er-me-br-se,
4525
+ var(--_ctm-tab-dn-er-me-br-se, var(--_ctm-dn-er-me-br-se))
4526
+ );
4527
+
4528
+ border-width: var(
4529
+ --_ctm-mob-dn-er-me-br-wh,
4530
+ var(--_ctm-tab-dn-er-me-br-wh, var(--_ctm-dn-er-me-br-wh))
4531
+ );
4532
+
4533
+ border-radius: var(
4534
+ --_ctm-mob-dn-er-me-br-rs,
4535
+ var(--_ctm-tab-dn-er-me-br-rs, var(--_ctm-dn-er-me-br-rs))
4536
+ );
4537
+
4538
+ box-shadow: var(
4539
+ --_show-shadow,
4540
+ var(--_ctm-mob-dn-er-me-sw-ae, var(--_ctm-tab-dn-er-me-sw-ae, var(--_ctm-dn-er-me-sw-ae)))
4541
+ var(--_ctm-mob-dn-er-me-sw-br, var(--_ctm-tab-dn-er-me-sw-br, var(--_ctm-dn-er-me-sw-br)))
4542
+ var(--_ctm-mob-dn-er-me-sw-sd, var(--_ctm-tab-dn-er-me-sw-sd, var(--_ctm-dn-er-me-sw-sd)))
4543
+ var(--_ctm-mob-dn-er-me-sw-cr, var(--_ctm-tab-dn-er-me-sw-cr, var(--_ctm-dn-er-me-sw-cr)))
4544
+ );
4545
+ white-space: nowrap;
4546
+
4547
+ .error__message {
4548
+ color: var(--_ctm-mob-dn-er-me-cr, var(--_ctm-tab-dn-er-me-cr, var(--_ctm-dn-er-me-cr)));
4549
+ font-family: var(
4550
+ --_ctm-mob-dn-er-me-ft-fy,
4551
+ var(--_ctm-tab-dn-er-me-ft-fy, var(--_ctm-dn-er-me-ft-fy))
4552
+ );
4553
+ font-size: var(
4554
+ --_ctm-mob-dn-er-me-ft-se,
4555
+ var(--_ctm-tab-dn-er-me-ft-se, var(--_ctm-dn-er-me-ft-se))
4556
+ );
4557
+ font-weight: var(
4558
+ --_ctm-mob-dn-er-me-ft-wt,
4559
+ var(--_ctm-tab-dn-er-me-ft-wt, var(--_ctm-dn-er-me-ft-wt))
4560
+ );
4561
+ font-style: var(
4562
+ --_ctm-mob-dn-er-me-ft-se-ic,
4563
+ var(--_ctm-tab-dn-er-me-ft-se-ic, var(--_ctm-dn-er-me-ft-se-ic))
4564
+ );
4565
+ text-align: var(
4566
+ --_ctm-mob-dn-er-me-tt-an,
4567
+ var(--_ctm-tab-dn-er-me-tt-an, var(--_ctm-dn-er-me-tt-an))
4568
+ );
4569
+ letter-spacing: var(
4570
+ --_ctm-mob-dn-er-me-lr-sg,
4571
+ var(--_ctm-tab-dn-er-me-lr-sg, var(--_ctm-dn-er-me-lr-sg))
4572
+ );
4573
+ line-height: var(
4574
+ --_ctm-mob-dn-er-me-le-ht,
4575
+ var(--_ctm-tab-dn-er-me-le-ht, var(--_ctm-dn-er-me-le-ht))
4576
+ );
4577
+ text-decoration: var(
4578
+ --_ctm-mob-dn-er-me-ue,
4579
+ var(--_ctm-tab-dn-er-me-ue, var(--_ctm-dn-er-me-ue))
4580
+ );
4581
+ padding: prepareMediaVariable(--_ctm-dn-er-me-pg);
4582
+ }
4583
+ }
4584
+
4585
+ .icon {
4586
+ cursor: pointer;
4587
+ svg {
4588
+ width: var(--_ctm-dn-er-me-in-se);
4589
+ height: var(--_ctm-dn-er-me-in-se);
4590
+ path {
4591
+ stroke: var(--_ctm-dn-er-me-in-c1);
4592
+ }
4593
+ }
4594
+ }
4595
+ .add_to_cart_wrapper {
4596
+ .error__message {
4597
+ text-align: center;
4598
+ }
4599
+ }
4369
4600
  }
4370
4601
  }
@@ -31,7 +31,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
31
31
  align-items: center;
32
32
  align-self: stretch;
33
33
  border-radius: 4px;
34
- border: 0.5px solid #d0d5dd;
34
+ border: 0.5px solid var(--_thm-cs-be-se-3);
35
35
  background: #fff;
36
36
  // gap: var(--_ctm-lt-im-gp);
37
37
  padding: var(--_ctm-lt-pg);
@@ -48,26 +48,25 @@ $resizeActive: '[data-cms-element-resizer="true"]';
48
48
  --_ctm-mob-dn-hr-cr-bd-cr,
49
49
  var(--_ctm-tab-dn-hr-cr-bd-cr, var(--_ctm-dn-hr-cr-bd-cr))
50
50
  );
51
- border-bottom: 0.5px solid #d0d5dd;
52
- // border-color: var(
51
+ // border-bottom: 0.5px solid var(--_thm-cs-be-se-3);
52
+ border-color: prepareMediaVariable(--_ctm-dn-hr-cr-br-cr);
53
+ // var(
53
54
  // --_ctm-mob-dn-hr-cr-br-cr,
54
55
  // var(--_ctm-tab-dn-hr-cr-br-cr, var(--_ctm-dn-hr-cr-br-cr))
55
56
  // );
56
- // border-style: var(
57
+ border-style: prepareMediaVariable(--_ctm-dn-hr-cr-br-se);
58
+ // var(
57
59
  // --_ctm-mob-dn-hr-cr-br-se,
58
60
  // var(--_ctm-tab-dn-hr-cr-br-se, var(--_ctm-dn-hr-cr-br-se))
59
61
  // );
60
- // border-width: var(
62
+ border-width: prepareMediaVariable(--_ctm-dn-hr-cr-br-wh);
63
+ // var(
61
64
  // --_ctm-mob-dn-hr-cr-br-wh,
62
65
  // var(--_ctm-tab-dn-hr-cr-br-wh, var(--_ctm-dn-hr-cr-br-wh))
63
66
  // );
64
- // border-bottom: 1px solid
65
- // var(--_ctm-mob-dn-hr-cr-br-wh, var(--_ctm-tab-dn-hr-cr-br-wh, var(--_ctm-dn-hr-cr-br-wh)));
66
- // border-radius: var(
67
- // --_ctm-mob-dn-hr-cr-br-rs,
68
- // var(--_ctm-tab-dn-hr-cr-br-rs, var(--_ctm-dn-hr-cr-br-rs))
69
- // );
70
- padding: var(--_ctm-mob-dn-hr-cr-pg, var(--_ctm-tab-dn-hr-cr-pg, var(--_ctm-dn-hr-cr-pg)));
67
+ padding: prepareMediaVariable(
68
+ --_ctm-dn-hr-cr-pg
69
+ ); // var(--_ctm-mob-dn-hr-cr-pg, var(--_ctm-tab-dn-hr-cr-pg, var(--_ctm-dn-hr-cr-pg)))
71
70
  box-shadow: var(
72
71
  var(
73
72
  --_ctm-mob-dn-hr-cr-sw-ae,
@@ -167,7 +166,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
167
166
  // padding: calc(var(--_ctm-lt-by-pg) / 2) var(--_ctm-lt-by-pg);
168
167
  // padding: var(--_ctm-lt-by-pg);
169
168
  // gap: var(--_ctm-lt-im-gp);
170
- border-top: 1px solid var(--_gray-300);
169
+ border-top: 1px solid var(--_thm-cs-be-se-3);
171
170
  background-color: var(
172
171
  --_ctm-mob-dn-ct-by-wt-bd-cr,
173
172
  var(--_ctm-tab-dn-ct-by-wt-bd-cr, var(--_ctm-dn-ct-by-wt-bd-cr))
@@ -592,6 +591,86 @@ $resizeActive: '[data-cms-element-resizer="true"]';
592
591
  var(--_ctm-tab-dn-nr-of-is-tt-an-dc, var(--_ctm-dn-nr-of-is-tt-an-dc))
593
592
  );
594
593
  }
594
+ .cart_summary_show_coupon_text {
595
+ // color: var(--_gray-500);
596
+ // font-size: 14px;
597
+ // font-weight: 400;
598
+ font-family: var(
599
+ --_ctm-mob-dn-sw-cn-ce-ft-fy,
600
+ var(--_ctm-tab-dn-sw-cn-ce-ft-fy, var(--_ctm-dn-sw-cn-ce-ft-fy))
601
+ );
602
+ color: var(
603
+ --_ctm-mob-dn-sw-cn-ce-cr,
604
+ var(--_ctm-tab-dn-sw-cn-ce-cr, var(--_ctm-dn-sw-cn-ce-cr))
605
+ );
606
+ font-weight: var(
607
+ --_ctm-mob-dn-sw-cn-ce-ft-wt,
608
+ var(--_ctm-tab-dn-sw-cn-ce-ft-wt, var(--_ctm-dn-sw-cn-ce-ft-wt))
609
+ );
610
+ font-size: var(
611
+ --_ctm-mob-dn-sw-cn-ce-ft-se,
612
+ var(--_ctm-tab-dn-sw-cn-ce-ft-se, var(--_ctm-dn-sw-cn-ce-ft-se))
613
+ );
614
+ // font-size: 14px;
615
+ text-decoration: var(
616
+ --_ctm-mob-dn-sw-cn-ce-ue,
617
+ var(--_ctm-tab-dn-sw-cn-ce-ue, var(--_ctm-dn-sw-cn-ce-ue))
618
+ );
619
+ letter-spacing: var(
620
+ --_ctm-mob-dn-sw-cn-ce-lr-sg,
621
+ var(--_ctm-tab-dn-sw-cn-ce-lr-sg, var(--_ctm-dn-sw-cn-ce-lr-sg))
622
+ );
623
+ line-height: var(
624
+ --_ctm-mob-dn-sw-cn-ce-le-ht,
625
+ var(--_ctm-tab-dn-sw-cn-ce-le-ht, var(--_ctm-dn-sw-cn-ce-le-ht))
626
+ );
627
+ font-style: var(
628
+ --_ctm-mob-dn-sw-cn-ce-ft-se-ic,
629
+ var(--_ctm-tab-dn-sw-cn-ce-ft-se-ic, var(--_ctm-dn-sw-cn-ce-ft-se-ic))
630
+ );
631
+ text-align: var(
632
+ --_ctm-mob-dn-sw-cn-ce-tt-an,
633
+ var(--_ctm-tab-dn-sw-cn-ce-tt-an, var(--_ctm-dn-sw-cn-ce-tt-an))
634
+ );
635
+ }
636
+ .cart_summary_show_coupon_value {
637
+ font-family: var(
638
+ --_ctm-mob-dn-sw-cn-ce-ft-fy-dc,
639
+ var(--_ctm-tab-dn-sw-cn-ce-ft-fy-dc, var(--_ctm-dn-sw-cn-ce-ft-fy-dc))
640
+ );
641
+ color: var(
642
+ --_ctm-mob-dn-sw-cn-ce-cr-dc,
643
+ var(--_ctm-tab-dn-sw-cn-ce-cr-dc, var(--_ctm-dn-sw-cn-ce-cr-dc))
644
+ );
645
+ font-weight: var(
646
+ --_ctm-mob-dn-sw-cn-ce-ft-wt-dc,
647
+ var(--_ctm-tab-dn-sw-cn-ce-ft-wt-dc, var(--_ctm-dn-sw-cn-ce-ft-wt-dc))
648
+ );
649
+ font-size: var(
650
+ --_ctm-mob-dn-sw-cn-ce-ft-se-dc,
651
+ var(--_ctm-tab-dn-sw-cn-ce-ft-se-dc, var(--_ctm-dn-sw-cn-ce-ft-se-dc))
652
+ );
653
+ text-decoration: var(
654
+ --_ctm-mob-dn-sw-cn-ce-ue-dc,
655
+ var(--_ctm-tab-dn-sw-cn-ce-ue-dc, var(--_ctm-dn-sw-cn-ce-ue-dc))
656
+ );
657
+ letter-spacing: var(
658
+ --_ctm-mob-dn-sw-cn-ce-lr-sg-dc,
659
+ var(--_ctm-tab-dn-sw-cn-ce-lr-sg-dc, var(--_ctm-dn-sw-cn-ce-lr-sg-dc))
660
+ );
661
+ line-height: var(
662
+ --_ctm-mob-dn-sw-cn-ce-le-ht-dc,
663
+ var(--_ctm-tab-dn-sw-cn-ce-le-ht-dc, var(--_ctm-dn-sw-cn-ce-le-ht-dc))
664
+ );
665
+ font-style: var(
666
+ --_ctm-mob-dn-sw-cn-ce-ft-se-ic-dc,
667
+ var(--_ctm-tab-dn-sw-cn-ce-ft-se-ic-dc, var(--_ctm-dn-sw-cn-ce-ft-se-ic-dc))
668
+ );
669
+ text-align: var(
670
+ --_ctm-mob-dn-sw-cn-ce-tt-an-dc,
671
+ var(--_ctm-tab-dn-sw-cn-ce-tt-an-dc, var(--_ctm-dn-sw-cn-ce-tt-an-dc))
672
+ );
673
+ }
595
674
  }
596
675
  .cart_summary_content_details_wrapper {
597
676
  display: flex;
@@ -2645,5 +2724,5 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2645
2724
  }
2646
2725
 
2647
2726
  .border_dashed {
2648
- border: 1px dashed var(--_gray-300);
2727
+ border: 1px dashed var(--_thm-cs-be-se-3);
2649
2728
  }
@@ -11,13 +11,13 @@
11
11
  display: flex;
12
12
  justify-content: space-between;
13
13
  padding: 0px 12px;
14
- border-radius: 6px;
14
+ border-radius: 4px;
15
15
  width: 100%;
16
16
  align-items: center;
17
17
  height: 40px;
18
18
  line-height: 40px;
19
19
  outline: 2px solid var(--_base-white);
20
- border: 1px solid var(--_gray-300);
20
+ border: 1px solid var(--_thm-cs-be-se-3);
21
21
 
22
22
  .selected-display {
23
23
  .selected-item {
@@ -49,7 +49,7 @@
49
49
  align-items: center;
50
50
  gap: 8px;
51
51
  .selected-item {
52
- border: 1px solid var(--_gray-300);
52
+ border: 1px solid var(--_thm-cs-be-se-3);
53
53
  border-radius: 4px;
54
54
  padding: 2px 4px;
55
55
  font-size: 12px;
@@ -91,7 +91,7 @@
91
91
  user-select: none;
92
92
 
93
93
  input {
94
- background-color: #f5f5f5;
94
+ background-color: var(--_thm-cs-be-se-2);
95
95
  cursor: not-allowed;
96
96
  }
97
97
  }
@@ -106,7 +106,7 @@
106
106
  min-width: 88%;
107
107
  overflow: hidden;
108
108
  .dropdown-chip {
109
- background: #e2e2e2;
109
+ background: var(--_thm-cs-be-se-2);
110
110
  padding: 4px 8px;
111
111
  border-radius: 12px;
112
112
  font-size: 12px;
@@ -142,8 +142,11 @@
142
142
  .readonly-input,
143
143
  .dropdown__clear__icon,
144
144
  .dropdown__icon {
145
+ // transition: transform 0.4s ease-in-out;
145
146
  .icon {
147
+ // transition: transform 0.4s ease-in-out;
146
148
  display: flex;
149
+ // transform: rotate(0deg);
147
150
  &:hover {
148
151
  svg path {
149
152
  stroke: var(--_gray-700);
@@ -153,6 +156,12 @@
153
156
  width: 16px;
154
157
  height: 16px;
155
158
  }
159
+ // &.up {
160
+ // transform: rotate(0deg);
161
+ // }
162
+ // &.down {
163
+ // transform: rotate(180deg);
164
+ // }
156
165
  &.up,
157
166
  &.down {
158
167
  svg {
@@ -200,8 +209,8 @@
200
209
  position: fixed;
201
210
  width: 100%;
202
211
  background: white;
203
- border: 1px solid var(--_gray-200);
204
- border-radius: 6px;
212
+ border: 1px solid var(--_thm-cs-be-se-3);
213
+ border-radius: 4px;
205
214
  max-height: 200px;
206
215
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.1);
207
216
  z-index: 10;
@@ -222,7 +231,7 @@
222
231
  .dropdown_template_panel_search {
223
232
  background: none;
224
233
  padding: 8px;
225
- border-bottom: 1px solid var(--_gray-100);
234
+ border-bottom: 1px solid var(--_thm-cs-be-se-3);
226
235
  height: max-content !important;
227
236
  position: relative;
228
237
  &:hover {
@@ -233,7 +242,7 @@
233
242
  width: 100%;
234
243
  padding-inline: 10px;
235
244
  border-radius: 4px;
236
- border: 1px solid var(--_gray-200);
245
+ border: 1px solid var(--_thm-cs-be-se-3);
237
246
  height: 40px;
238
247
  &:focus {
239
248
  border: 1px solid var(--_gray-300);
@@ -333,7 +342,7 @@
333
342
  height: 32px;
334
343
  border-radius: 50%;
335
344
  overflow: hidden;
336
- background-color: var(--_gray-200);
345
+ background-color: var(--_thm-cs-be-se-3);
337
346
  display: flex;
338
347
  justify-content: center;
339
348
  align-items: center;
@@ -479,7 +488,7 @@
479
488
  // bottom: 0;
480
489
  width: 100%;
481
490
  background: #fff;
482
- border-top: 1px solid var(--_gray-200);
491
+ border-top: 1px solid var(--_thm-cs-be-se-3);
483
492
  .opts_selection_action {
484
493
  width: 50%;
485
494
  height: 100%;
@@ -497,7 +506,7 @@
497
506
  }
498
507
  }
499
508
  &:not(:last-child) {
500
- border-right: 1px solid var(--_gray-200);
509
+ border-right: 1px solid var(--_thm-cs-be-se-3);
501
510
  }
502
511
  &.discard_selection {
503
512
  &:hover {
@@ -17,6 +17,7 @@ $previewMainWrapper: ".emb__preview__me__wrapper";
17
17
  $previewMainOuput: ".output__ele__v1";
18
18
  $maxWidth: "350px";
19
19
  $minWidth: "200px";
20
+ $dataIsSpinningTrue: "[data-is-loading='true']";
20
21
 
21
22
  $defaultValues: (
22
23
  --_sf-plp-flx-drt: getListOfResponsive(row, column),
@@ -24,6 +25,39 @@ $defaultValues: (
24
25
  --_sf-prv-prt-gap: getListOfResponsive(32px, 12px),
25
26
  );
26
27
 
28
+ @mixin spinnerStyles() {
29
+ &#{$dataIsSpinningTrue} {
30
+ --_sf-sv-sp-vs: hidden;
31
+ --_sf-sv-sp-op: 0;
32
+ position: var(--_p-relative);
33
+
34
+ &::before {
35
+ content: "";
36
+ position: var(--_p-absolute);
37
+ --_sz-vl: 10px;
38
+ width: var(--_sz-vl);
39
+ height: var(--_sz-vl);
40
+ display: var(--_d-flex);
41
+ left: 50%;
42
+ top: 50%;
43
+ border-radius: 50%;
44
+ border: 0.25rem solid var(--_br-bm-red-col-afsjkdfkj-ff, rgba(255, 255, 255, 0.2));
45
+ // border: 0.25rem solid var(--_primary-400);
46
+ border-top-color: #fff;
47
+ animation: circlerotate 2s ease-in-out infinite forwards;
48
+ }
49
+
50
+ @keyframes circlerotate {
51
+ from {
52
+ transform: translate(-50%, -50%) rotate(0deg);
53
+ }
54
+ to {
55
+ transform: translate(-50%, -50%) rotate(360deg);
56
+ }
57
+ }
58
+ }
59
+ }
60
+
27
61
  @mixin EmbroideryTemplate1StylesV2() {
28
62
  & > #{$tmpWrapper} {
29
63
  @include prepareMediaQueries($defaultValues);
@@ -435,6 +469,7 @@ $defaultValues: (
435
469
  inset: 0 0 0 0;
436
470
  opacity: 0;
437
471
  height: 100%;
472
+ cursor: pointer;
438
473
  }
439
474
  }
440
475
  }
@@ -480,6 +515,29 @@ $defaultValues: (
480
515
  }
481
516
  }
482
517
  }
518
+ & > .color__div {
519
+ display: var(--_d-flex);
520
+ flex-wrap: wrap;
521
+ gap: 12px;
522
+
523
+ & > div {
524
+ &.color__box {
525
+ display: var(--_d-flex);
526
+ width: 24px;
527
+ height: 24px;
528
+ border-radius: 50%;
529
+ background: var(--_sf-clr);
530
+ border: 1px solid #f2f4f7;
531
+ cursor: pointer;
532
+
533
+ &.act {
534
+ box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
535
+ width: 36px;
536
+ border-radius: 16px;
537
+ }
538
+ }
539
+ }
540
+ }
483
541
 
484
542
  & > .config__div__v2 {
485
543
  display: var(--_d-flex);
@@ -799,6 +857,21 @@ $defaultValues: (
799
857
  border: 1px solid #555;
800
858
  border-radius: 50%;
801
859
  cursor: pointer;
860
+
861
+ &[title="no-color"] {
862
+ position: relative;
863
+ background: #555;
864
+ &::before {
865
+ content: "";
866
+ position: absolute;
867
+ left: 50%;
868
+ top: 50%;
869
+ width: 100%;
870
+ height: 1px;
871
+ background: #fff;
872
+ transform: translate(-50%, -50%) rotate(-45deg);
873
+ }
874
+ }
802
875
  }
803
876
  }
804
877
  }
@@ -841,6 +914,14 @@ $defaultValues: (
841
914
  background: var(--_sf-prm-clr);
842
915
  color: var(--_sf-scd-clr);
843
916
  border: 1px solid var(--_sf-prm-clr);
917
+ justify-content: center;
918
+ @include spinnerStyles();
919
+
920
+ & > span {
921
+ display: var(--_d-flex);
922
+ visibility: var(--_sf-sv-sp-vs, visible);
923
+ opacity: var(--_sf-sv-sp-op, 1);
924
+ }
844
925
  }
845
926
 
846
927
  &.emb__cancel {
package/dist/filters.scss CHANGED
@@ -2099,7 +2099,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2099
2099
  // padding: 20px;
2100
2100
  width: 100%;
2101
2101
  max-width: 300px;
2102
- margin: auto;
2102
+ // margin: auto;
2103
2103
  }
2104
2104
 
2105
2105
  .range-slider {