@sc-360-v2/storefront-cms-library 0.4.2 → 0.4.4

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.
package/dist/button.scss CHANGED
@@ -197,6 +197,24 @@
197
197
  display: inline-block;
198
198
  width: 100%;
199
199
  }
200
+
201
+ .icon--hover {
202
+ // position: absolute;
203
+ // inset: 0;
204
+ // opacity: 0;
205
+ display: none;
206
+ transition: opacity 0.2s ease;
207
+ }
208
+
209
+ &:hover .icon--hover {
210
+ // opacity: 1;
211
+ display: inline;
212
+ }
213
+
214
+ &:hover .icon--default {
215
+ // opacity: 0;
216
+ display: none;
217
+ }
200
218
  }
201
219
  }
202
220
  }
@@ -1387,6 +1387,24 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1387
1387
  display: inline-block;
1388
1388
  width: 100%;
1389
1389
  }
1390
+
1391
+ .icon--hover {
1392
+ // position: absolute;
1393
+ // inset: 0;
1394
+ // opacity: 0;
1395
+ display: none;
1396
+ transition: opacity 0.2s ease;
1397
+ }
1398
+
1399
+ &:hover .icon--hover {
1400
+ // opacity: 1;
1401
+ display: inline;
1402
+ }
1403
+
1404
+ &:hover .icon--default {
1405
+ // opacity: 0;
1406
+ display: none;
1407
+ }
1390
1408
  }
1391
1409
  .btn__with__text[data-btn-name="placeOrder"] {
1392
1410
  width: 100%;
@@ -1530,6 +1548,24 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1530
1548
  display: inline-block;
1531
1549
  width: 100%;
1532
1550
  }
1551
+
1552
+ .icon--hover {
1553
+ // position: absolute;
1554
+ // inset: 0;
1555
+ // opacity: 0;
1556
+ display: none;
1557
+ transition: opacity 0.2s ease;
1558
+ }
1559
+
1560
+ &:hover .icon--hover {
1561
+ // opacity: 1;
1562
+ display: inline;
1563
+ }
1564
+
1565
+ &:hover .icon--default {
1566
+ // opacity: 0;
1567
+ display: none;
1568
+ }
1533
1569
  }
1534
1570
  .btn__with__text[data-btn-name="requestQuote"] {
1535
1571
  width: 100%;
@@ -1672,6 +1708,24 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1672
1708
  display: inline-block;
1673
1709
  width: 100%;
1674
1710
  }
1711
+
1712
+ .icon--hover {
1713
+ // position: absolute;
1714
+ // inset: 0;
1715
+ // opacity: 0;
1716
+ display: none;
1717
+ transition: opacity 0.2s ease;
1718
+ }
1719
+
1720
+ &:hover .icon--hover {
1721
+ // opacity: 1;
1722
+ display: inline;
1723
+ }
1724
+
1725
+ &:hover .icon--default {
1726
+ // opacity: 0;
1727
+ display: none;
1728
+ }
1675
1729
  }
1676
1730
  .btn__with__text[data-btn-name="reviewOrder"] {
1677
1731
  width: 100%;
@@ -1814,6 +1868,24 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1814
1868
  display: inline-block;
1815
1869
  width: 100%;
1816
1870
  }
1871
+
1872
+ .icon--hover {
1873
+ // position: absolute;
1874
+ // inset: 0;
1875
+ // opacity: 0;
1876
+ display: none;
1877
+ transition: opacity 0.2s ease;
1878
+ }
1879
+
1880
+ &:hover .icon--hover {
1881
+ // opacity: 1;
1882
+ display: inline;
1883
+ }
1884
+
1885
+ &:hover .icon--default {
1886
+ // opacity: 0;
1887
+ display: none;
1888
+ }
1817
1889
  }
1818
1890
  .btn__with__text[data-btn-name="createSubOrders"] {
1819
1891
  width: 100%;
@@ -1975,6 +2047,24 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1975
2047
  display: inline-block;
1976
2048
  width: 100%;
1977
2049
  }
2050
+
2051
+ .icon--hover {
2052
+ // position: absolute;
2053
+ // inset: 0;
2054
+ // opacity: 0;
2055
+ display: none;
2056
+ transition: opacity 0.2s ease;
2057
+ }
2058
+
2059
+ &:hover .icon--hover {
2060
+ // opacity: 1;
2061
+ display: inline;
2062
+ }
2063
+
2064
+ &:hover .icon--default {
2065
+ // opacity: 0;
2066
+ display: none;
2067
+ }
1978
2068
  }
1979
2069
  .btn__with__text[data-btn-name="submitQuote"] {
1980
2070
  width: 100%;
@@ -2118,6 +2208,24 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2118
2208
  display: inline-block;
2119
2209
  width: 100%;
2120
2210
  }
2211
+
2212
+ .icon--hover {
2213
+ // position: absolute;
2214
+ // inset: 0;
2215
+ // opacity: 0;
2216
+ display: none;
2217
+ transition: opacity 0.2s ease;
2218
+ }
2219
+
2220
+ &:hover .icon--hover {
2221
+ // opacity: 1;
2222
+ display: inline;
2223
+ }
2224
+
2225
+ &:hover .icon--default {
2226
+ // opacity: 0;
2227
+ display: none;
2228
+ }
2121
2229
  }
2122
2230
 
2123
2231
  .cart_summary_placeOrder_btn_wrapper {
package/dist/faq.scss CHANGED
@@ -120,6 +120,10 @@
120
120
  // var(--_ctm-tab-lt-im-hl-pg, var(--_ctm-lt-im-hl-pg))
121
121
  // );
122
122
 
123
+ padding: var(
124
+ --_ctm-mob-dn-cd-an-im-pg-im,
125
+ var(--_ctm-tab-dn-cd-an-im-pg-im, var(--_ctm-dn-cd-an-im-pg-im))
126
+ );
123
127
  grid-template-rows: var(
124
128
  --_self-active-gtr,
125
129
  minmax(
@@ -194,9 +198,12 @@
194
198
  --_ctm-mob-dn-cd-an-im-bd-cr,
195
199
  var(--_ctm-tab-dn-cd-an-im-bd-cr, var(--_ctm-dn-cd-an-im-bd-cr))
196
200
  );
201
+ padding: var(
202
+ --_ctm-mob-dn-cd-an-im-pg-te,
203
+ var(--_ctm-tab-dn-cd-an-im-pg-te, var(--_ctm-dn-cd-an-im-pg-te))
204
+ );
197
205
 
198
206
  p {
199
- // padding-inline: var(--_sf-cd-gp);
200
207
  color: var(
201
208
  --_ctm-mob-dn-cd-an-im-cr,
202
209
  var(--_ctm-tab-dn-cd-an-im-cr, var(--_ctm-dn-cd-an-im-cr))
@@ -277,6 +284,11 @@
277
284
  &[data-state="open"] {
278
285
  // overflow: inherit;
279
286
  // height: auto;
287
+
288
+ padding: var(
289
+ --_ctm-mob-dn-ed-an-im-pg-im,
290
+ var(--_ctm-tab-dn-ed-an-im-pg-im, var(--_ctm-dn-ed-an-im-pg-im))
291
+ );
280
292
  gap: var(
281
293
  --_ctm-mob-lt-te-ad-dn-sg,
282
294
  var(--_ctm-tab-lt-te-ad-dn-sg, var(--_ctm-lt-te-ad-dn-sg))
@@ -344,6 +356,10 @@
344
356
  --_ctm-mob-dn-ed-an-im-bd-cr,
345
357
  var(--_ctm-tab-dn-ed-an-im-bd-cr, var(--_ctm-dn-ed-an-im-bd-cr))
346
358
  );
359
+ padding: var(
360
+ --_ctm-mob-dn-ed-an-im-pg-te,
361
+ var(--_ctm-tab-dn-ed-an-im-pg-te, var(--_ctm-dn-ed-an-im-pg-te))
362
+ );
347
363
 
348
364
  color: var(
349
365
  --_ctm-mob-dn-ed-an-im-cr,
@@ -414,6 +430,10 @@
414
430
  --_ctm-mob-dn-ed-an-im-bd-cr-dc,
415
431
  var(--_ctm-tab-dn-ed-an-im-bd-cr-dc, var(--_ctm-dn-ed-an-im-bd-cr-dc))
416
432
  );
433
+ padding: var(
434
+ --_ctm-mob-dn-ed-an-im-pg-dc,
435
+ var(--_ctm-tab-dn-ed-an-im-pg-dc, var(--_ctm-dn-ed-an-im-pg-dc))
436
+ );
417
437
 
418
438
  color: var(
419
439
  --_ctm-mob-dn-ed-an-im-cr-dc,
@@ -453,7 +473,58 @@
453
473
  var(--_ctm-tab-dn-ed-an-im-ue-dc, var(--_ctm-dn-ed-an-im-ue-dc))
454
474
  );
455
475
  }
476
+ .accordion-title {
477
+ position: relative;
478
+ }
479
+ &[data-show-divider="true"] {
480
+ .accordion-title:not(:last-child)::before {
481
+ content: "";
482
+ position: absolute;
483
+ left: 0;
484
+ right: 0;
485
+ bottom: calc(
486
+ -1 *
487
+ (
488
+ var(
489
+ --_ctm-mob-lt-te-ad-dn-sg,
490
+ var(--_ctm-tab-lt-te-ad-dn-sg, var(--_ctm-lt-te-ad-dn-sg))
491
+ ) /
492
+ 2
493
+ )
494
+ );
495
+
496
+ height: var(
497
+ --_ctm-mob-dn-ed-an-im-dr-wt,
498
+ var(--_ctm-tab-dn-ed-an-im-dr-wt, var(--_ctm-dn-ed-an-im-dr-wt))
499
+ );
500
+ background-color: var(
501
+ --_ctm-mob-dn-ed-an-im-dr-cr,
502
+ var(--_ctm-tab-dn-ed-an-im-dr-cr, var(--_ctm-dn-ed-an-im-dr-cr))
503
+ );
504
+ }
505
+ }
456
506
  }
457
507
  }
508
+ .divider {
509
+ // height: var(
510
+ // --_ctm-mob-dn-wt-se-dr-wt,
511
+ // var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
512
+ // );
513
+ // background-color: var(
514
+ // --_ctm-mob-dn-wt-se-dr-cr,
515
+ // var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
516
+ // );
517
+ border: none; /* Remove default border */
518
+ height: var(
519
+ --_ctm-mob-dn-dr-dr-wt,
520
+ var(--_ctm-tab-dn-dr-dr-wt, var(--_ctm-dn-dr-dr-wt))
521
+ ); /* Set thickness */
522
+ background-color: var(
523
+ --_ctm-mob-dn-dr-dr-cr,
524
+ var(--_ctm-tab-dn-dr-dr-cr, var(--_ctm-dn-dr-dr-cr))
525
+ ); /* Set color */
526
+ // margin: 20px 0; /* Optional spacing */
527
+ // border-radius: 2px;
528
+ }
458
529
  }
459
530
  }
@@ -420,6 +420,15 @@
420
420
  position: absolute;
421
421
  // top: 10px;
422
422
  right: 5px;
423
+ transition: all 200ms ease-in;
424
+ &.open {
425
+ transform: rotate(180deg);
426
+ transform: all 200ms ease-in;
427
+ }
428
+ &.close {
429
+ transform: rotate(0deg);
430
+ transform: all 200ms ease-in;
431
+ }
423
432
  }
424
433
 
425
434
  .list {
@@ -281,6 +281,24 @@
281
281
  display: inline-block;
282
282
  width: 100%;
283
283
  }
284
+
285
+ .icon--hover {
286
+ // position: absolute;
287
+ // inset: 0;
288
+ // opacity: 0;
289
+ display: none;
290
+ transition: opacity 0.2s ease;
291
+ }
292
+
293
+ &:hover .icon--hover {
294
+ // opacity: 1;
295
+ display: inline;
296
+ }
297
+
298
+ &:hover .icon--default {
299
+ // opacity: 0;
300
+ display: none;
301
+ }
284
302
  }
285
303
 
286
304
  .btn__with__text[data-btn-name="buyNow"] {
@@ -483,6 +501,24 @@
483
501
  display: inline-block;
484
502
  width: 100%;
485
503
  }
504
+
505
+ .icon--hover {
506
+ // position: absolute;
507
+ // inset: 0;
508
+ // opacity: 0;
509
+ display: none;
510
+ transition: opacity 0.2s ease;
511
+ }
512
+
513
+ &:hover .icon--hover {
514
+ // opacity: 1;
515
+ display: inline;
516
+ }
517
+
518
+ &:hover .icon--default {
519
+ // opacity: 0;
520
+ display: none;
521
+ }
486
522
  }
487
523
 
488
524
  .btn__with__text[data-btn-name="wishlist"] {
@@ -682,6 +718,24 @@
682
718
  display: inline-block;
683
719
  width: 100%;
684
720
  }
721
+
722
+ .icon--hover {
723
+ // position: absolute;
724
+ // inset: 0;
725
+ // opacity: 0;
726
+ display: none;
727
+ transition: opacity 0.2s ease;
728
+ }
729
+
730
+ &:hover .icon--hover {
731
+ // opacity: 1;
732
+ display: inline;
733
+ }
734
+
735
+ &:hover .icon--default {
736
+ // opacity: 0;
737
+ display: none;
738
+ }
685
739
  }
686
740
  .btn__with__text[data-btn-name="compare"] {
687
741
  &[data-show-shadow="false"] {
@@ -880,6 +934,24 @@
880
934
  display: inline-block;
881
935
  width: 100%;
882
936
  }
937
+
938
+ .icon--hover {
939
+ // position: absolute;
940
+ // inset: 0;
941
+ // opacity: 0;
942
+ display: none;
943
+ transition: opacity 0.2s ease;
944
+ }
945
+
946
+ &:hover .icon--hover {
947
+ // opacity: 1;
948
+ display: inline;
949
+ }
950
+
951
+ &:hover .icon--default {
952
+ // opacity: 0;
953
+ display: none;
954
+ }
883
955
  }
884
956
  .btn__with__text[data-btn-name="addToQuote"] {
885
957
  &[data-show-shadow="false"] {
@@ -1081,6 +1153,24 @@
1081
1153
  display: inline-block;
1082
1154
  width: 100%;
1083
1155
  }
1156
+
1157
+ .icon--hover {
1158
+ // position: absolute;
1159
+ // inset: 0;
1160
+ // opacity: 0;
1161
+ display: none;
1162
+ transition: opacity 0.2s ease;
1163
+ }
1164
+
1165
+ &:hover .icon--hover {
1166
+ // opacity: 1;
1167
+ display: inline;
1168
+ }
1169
+
1170
+ &:hover .icon--default {
1171
+ // opacity: 0;
1172
+ display: none;
1173
+ }
1084
1174
  }
1085
1175
  .btn__with__text[data-btn-name="addToOrderTemplate"] {
1086
1176
  &[data-show-shadow="false"] {
@@ -1303,6 +1393,24 @@
1303
1393
  display: inline-block;
1304
1394
  width: 100%;
1305
1395
  }
1396
+
1397
+ .icon--hover {
1398
+ // position: absolute;
1399
+ // inset: 0;
1400
+ // opacity: 0;
1401
+ display: none;
1402
+ transition: opacity 0.2s ease;
1403
+ }
1404
+
1405
+ &:hover .icon--hover {
1406
+ // opacity: 1;
1407
+ display: inline;
1408
+ }
1409
+
1410
+ &:hover .icon--default {
1411
+ // opacity: 0;
1412
+ display: none;
1413
+ }
1306
1414
  }
1307
1415
  .btn__with__text[data-btn-name="notifyMe"] {
1308
1416
  &[data-show-shadow="false"] {
@@ -1500,6 +1608,24 @@
1500
1608
  display: inline-block;
1501
1609
  width: 100%;
1502
1610
  }
1611
+
1612
+ .icon--hover {
1613
+ // position: absolute;
1614
+ // inset: 0;
1615
+ // opacity: 0;
1616
+ display: none;
1617
+ transition: opacity 0.2s ease;
1618
+ }
1619
+
1620
+ &:hover .icon--hover {
1621
+ // opacity: 1;
1622
+ display: inline;
1623
+ }
1624
+
1625
+ &:hover .icon--default {
1626
+ // opacity: 0;
1627
+ display: none;
1628
+ }
1503
1629
  }
1504
1630
  .btn__with__text[data-btn-name="download"] {
1505
1631
  &[data-show-shadow="false"] {
@@ -1697,6 +1823,24 @@
1697
1823
  display: inline-block;
1698
1824
  width: 100%;
1699
1825
  }
1826
+
1827
+ .icon--hover {
1828
+ // position: absolute;
1829
+ // inset: 0;
1830
+ // opacity: 0;
1831
+ display: none;
1832
+ transition: opacity 0.2s ease;
1833
+ }
1834
+
1835
+ &:hover .icon--hover {
1836
+ // opacity: 1;
1837
+ display: inline;
1838
+ }
1839
+
1840
+ &:hover .icon--default {
1841
+ // opacity: 0;
1842
+ display: none;
1843
+ }
1700
1844
  }
1701
1845
  .btn__with__text[data-btn-name="more"] {
1702
1846
  &[data-show-shadow="false"] {
@@ -1894,6 +2038,24 @@
1894
2038
  display: inline-block;
1895
2039
  width: 100%;
1896
2040
  }
2041
+
2042
+ .icon--hover {
2043
+ // position: absolute;
2044
+ // inset: 0;
2045
+ // opacity: 0;
2046
+ display: none;
2047
+ transition: opacity 0.2s ease;
2048
+ }
2049
+
2050
+ &:hover .icon--hover {
2051
+ // opacity: 1;
2052
+ display: inline;
2053
+ }
2054
+
2055
+ &:hover .icon--default {
2056
+ // opacity: 0;
2057
+ display: none;
2058
+ }
1897
2059
  }
1898
2060
 
1899
2061
  // .dropdown-menu {
@@ -153,7 +153,7 @@
153
153
  // color: rgba(75, 69, 70, 1);
154
154
  width: 100%;
155
155
  height: 100%;
156
- object-fit: contain;
156
+ // object-fit: contain;
157
157
  }
158
158
  .gallery-slider-element {
159
159
  --text-high-contrast-rgb-value: 49, 49, 49;
@@ -232,6 +232,24 @@
232
232
  display: inline-block;
233
233
  width: 100%;
234
234
  }
235
+
236
+ .icon--hover {
237
+ // position: absolute;
238
+ // inset: 0;
239
+ // opacity: 0;
240
+ display: none;
241
+ transition: opacity 0.2s ease;
242
+ }
243
+
244
+ &:hover .icon--hover {
245
+ // opacity: 1;
246
+ display: inline;
247
+ }
248
+
249
+ &:hover .icon--default {
250
+ // opacity: 0;
251
+ display: none;
252
+ }
235
253
  }
236
254
 
237
255
  // .dropdown-menu {
@@ -657,6 +657,24 @@
657
657
  display: inline-block;
658
658
  width: 100%;
659
659
  }
660
+
661
+ .icon--hover {
662
+ // position: absolute;
663
+ // inset: 0;
664
+ // opacity: 0;
665
+ display: none;
666
+ transition: opacity 0.2s ease;
667
+ }
668
+
669
+ &:hover .icon--hover {
670
+ // opacity: 1;
671
+ display: inline;
672
+ }
673
+
674
+ &:hover .icon--default {
675
+ // opacity: 0;
676
+ display: none;
677
+ }
660
678
  }
661
679
 
662
680
  .btn__with__text[data-btn-name="decrease-button"] {
@@ -857,6 +875,24 @@
857
875
  display: inline-block;
858
876
  width: 100%;
859
877
  }
878
+
879
+ .icon--hover {
880
+ // position: absolute;
881
+ // inset: 0;
882
+ // opacity: 0;
883
+ display: none;
884
+ transition: opacity 0.2s ease;
885
+ }
886
+
887
+ &:hover .icon--hover {
888
+ // opacity: 1;
889
+ display: inline;
890
+ }
891
+
892
+ &:hover .icon--default {
893
+ // opacity: 0;
894
+ display: none;
895
+ }
860
896
  }
861
897
 
862
898
  .minimum__order__qty {
@@ -875,6 +875,24 @@ $rai: "repeater-advertise-item";
875
875
  display: inline-block;
876
876
  width: 100%;
877
877
  }
878
+
879
+ .icon--hover {
880
+ // position: absolute;
881
+ // inset: 0;
882
+ // opacity: 0;
883
+ display: none;
884
+ transition: opacity 0.2s ease;
885
+ }
886
+
887
+ &:hover .icon--hover {
888
+ // opacity: 1;
889
+ display: inline;
890
+ }
891
+
892
+ &:hover .icon--default {
893
+ // opacity: 0;
894
+ display: none;
895
+ }
878
896
  }
879
897
 
880
898
  // &[data-view-state="full"] {
@@ -107,10 +107,16 @@
107
107
 
108
108
  .quote-item__meta {
109
109
  display: flex;
110
- gap: 10px;
110
+ gap: 8px;
111
111
  font-size: 14px;
112
112
  font-weight: 400;
113
113
  // color: var(--_gray-500);
114
+ span {
115
+ &:first-child {
116
+ padding-right: 8px;
117
+ border-right: 1px solid var(--_gray-900);
118
+ }
119
+ }
114
120
  }
115
121
  }
116
122
 
@@ -574,6 +580,15 @@
574
580
  border-radius: 4px;
575
581
  padding: 16px;
576
582
  text-align: center;
583
+ min-height: 100px;
584
+ display: flex;
585
+ align-items: center;
586
+ justify-content: center;
587
+ span {
588
+ font-size: 16px;
589
+ font-weight: 600;
590
+ color: var(--_gray-700);
591
+ }
577
592
  }
578
593
  }
579
594
 
package/dist/stack.scss CHANGED
@@ -33,7 +33,7 @@ body {
33
33
  &#{$ss} {
34
34
  // min-width: var(--_sf-sta-nw-wh) !important;
35
35
  // min-height: var(--_ctm-sta-lt-ht, 100px) !important;
36
- min-width: 100px;
36
+ min-width: 30px;
37
37
  // min-height: 100px;
38
38
  margin: prepareMediaVariable(--_ctm-sta-lt-mn);
39
39
  // display: var(--_d-grid);
@@ -58,7 +58,7 @@ body {
58
58
  // width: var(--_sf-sta-nw-wh, auto);
59
59
  min-height: 30px;
60
60
  width: calc(1% * #{prepareMediaVariable(--_ctm-sta-ele-nw-wh-vl)});
61
- min-width: 100px;
61
+ min-width: 30px;
62
62
  & > .wrapper {
63
63
  flex-direction: column;
64
64
  width: 100%;