@sc-360-v2/storefront-cms-library 0.2.60 → 0.2.62

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.
@@ -254,6 +254,7 @@ export declare const CMSElementsListEnum: {
254
254
  CATEGORY_DETAILS: string;
255
255
  CONTACTUS: string;
256
256
  LOGIN: string;
257
+ RESET_PASSWORD: string;
257
258
  BREADCRUMBS: string;
258
259
  ICON_LIBRARY: string;
259
260
  };
@@ -52,5 +52,6 @@ import * as layouterItemSchema from "./elements/layouter-item/index";
52
52
  import commonFunctions from "./utilities/global";
53
53
  import * as contactUsSchema from "./elements/contact-us/index";
54
54
  import * as loginSchema from "./elements/login/index";
55
+ import * as resetPasswordSchema from "./elements/reset-password/index";
55
56
  import * as categoryDetailsSchema from "./elements/category-details/index";
56
- export { ElementEditSchema, amountEstimatorSchema, bulkVariantPickerSchema, buttonSchema, cmsTypes, codeSchema, commonFunctions, containerSchema, countdownSchema, embedSchema, enums, faqSchema, gallerySliderSchema, gridSchema, imageHotspotSchema, imageSchema, interfaces, mapSchema, paymentMethodsSchema, pickupLocationsSchema, priceSchema, productActionsSchema, productHighlightsSchema, productImageSchema, productInventorySchema, productPromotionsSchema, quantitySelectorSchema, scrollSchema, sectionSchema, shippingEstimatorSchema, socialIconsSchema, stackSchema, storeLocationsSchema, tabSchema, tableSchema, textSchema, uomSelectorSchema, variantPickerSchema, videoSChema, volumePricingSchema, lightboxSchema, cartSchema, profileSchema, productSchema, repeaterSchema, brandSchema, bundleSchema, brandImageSchema, lightBoxV2Schema, searchSchema, layouterSchema, layouterItemSchema, categoryDetailsSchema, contactUsSchema, loginSchema, };
57
+ export { ElementEditSchema, amountEstimatorSchema, bulkVariantPickerSchema, buttonSchema, cmsTypes, codeSchema, commonFunctions, containerSchema, countdownSchema, embedSchema, enums, faqSchema, gallerySliderSchema, gridSchema, imageHotspotSchema, imageSchema, interfaces, mapSchema, paymentMethodsSchema, pickupLocationsSchema, priceSchema, productActionsSchema, productHighlightsSchema, productImageSchema, productInventorySchema, productPromotionsSchema, quantitySelectorSchema, scrollSchema, sectionSchema, shippingEstimatorSchema, socialIconsSchema, stackSchema, storeLocationsSchema, tabSchema, tableSchema, textSchema, uomSelectorSchema, variantPickerSchema, videoSChema, volumePricingSchema, lightboxSchema, cartSchema, profileSchema, productSchema, repeaterSchema, brandSchema, bundleSchema, brandImageSchema, lightBoxV2Schema, searchSchema, layouterSchema, layouterItemSchema, categoryDetailsSchema, contactUsSchema, loginSchema, resetPasswordSchema, };
@@ -0,0 +1,24 @@
1
+ export declare const fontProperties: {
2
+ theme: import("../interfaces/global").CMSIBCommonInterface;
3
+ font: import("../interfaces/global").CMSIBCommonInterface;
4
+ fontSize: import("../interfaces/global").CMSIBSizeInterface;
5
+ textColor: import("../interfaces/global").CMSIBCommonInterface;
6
+ bold: import("../interfaces/global").CMSIBCommonInterface;
7
+ italic: import("../interfaces/global").CMSIBCommonInterface;
8
+ linethrough: import("../interfaces/global").CMSIBCommonInterface;
9
+ underline: import("../interfaces/global").CMSIBCommonInterface;
10
+ textAlign: import("../interfaces/global").CMSIBCommonInterface;
11
+ characterSpacing: import("../interfaces/global").CMSIBSizeInterface;
12
+ lineHeight: import("../interfaces/global").CMSIBSizeInterface;
13
+ backgroundColor: import("../interfaces/global").CMSIBCommonInterface;
14
+ };
15
+ export declare const backgroundProperties: {
16
+ backgroundColor: import("../interfaces/global").CMSIBCommonInterface;
17
+ backgroundRepeat: import("../interfaces/global").CMSIBCommonInterface;
18
+ backgroundSize: import("../interfaces/global").CMSIBCommonInterface;
19
+ backgroundAttachment: import("../interfaces/global").CMSIBCommonInterface;
20
+ backgroundPosition: import("../interfaces/global").CMSIBCommonInterface;
21
+ backgroundPositionX: import("../interfaces/global").CMSIBCommonInterface;
22
+ backgroundPositionY: import("../interfaces/global").CMSIBCommonInterface;
23
+ backgroundImage: import("../interfaces/global").CMSIBCommonInterface;
24
+ };
@@ -16,6 +16,13 @@ export interface CMSElementEditPopupLayoutInterface {
16
16
  }
17
17
  export interface CMSElementEditPopupDesignInterface {
18
18
  backgroundColor: CMSIBCommonInterface;
19
+ backgroundImage: CMSIBCommonInterface;
20
+ backgroundRepeat: CMSIBCommonInterface;
21
+ backgroundAttachment: CMSIBCommonInterface;
22
+ backgroundPosition: CMSIBCommonInterface;
23
+ backgroundPositionX: CMSIBCommonInterface;
24
+ backgroundPositionY: CMSIBCommonInterface;
25
+ backgroundSize: CMSIBCommonInterface;
19
26
  borderColor: CMSIBCommonInterface;
20
27
  borderStyle: CMSIBCommonInterface;
21
28
  borderPerSlide: CSSPaddingValues;
@@ -63,6 +63,7 @@ import * as layouterItem from "./layouter-item";
63
63
  import * as categoryDetails from "./categoryDetails";
64
64
  import * as contactUs from "./contactUs";
65
65
  import * as login from "./login";
66
+ import * as resetPassword from "./resetPassword";
66
67
  import * as breadcrumbs from "./breadcrumbs";
67
68
  import * as iconLibrary from "./iconLibrary";
68
- export { amountEstimator, bulkVariantPicker, button, code, staticText, common, container, countdown, embed, faq, gallerySlider, grid, image, imageHotspot, map, paymentMethods, pickupLocations, price, productActions, productHighlights, productImage, productInventory, productPromotions, quantitySelector, scroll, section, shippingEstimator, slideShowLayouter, social, stack, storeLocations, table, tabs, text, uomSelector, variantPicker, video, volumePricing, lightbox, cart, profile, repeater, repeaterItem, product, menu, productOptions, productDetails, category, subCategory, brand, bundle, brandImage, filters, sort, pastOrders, quotes, rfqs, lightBoxV2, allocations, search, layouter, layouterItem, categoryDetails, contactUs, login, breadcrumbs, iconLibrary, };
69
+ export { amountEstimator, bulkVariantPicker, button, code, staticText, common, container, countdown, embed, faq, gallerySlider, grid, image, imageHotspot, map, paymentMethods, pickupLocations, price, productActions, productHighlights, productImage, productInventory, productPromotions, quantitySelector, scroll, section, shippingEstimator, slideShowLayouter, social, stack, storeLocations, table, tabs, text, uomSelector, variantPicker, video, volumePricing, lightbox, cart, profile, repeater, repeaterItem, product, menu, productOptions, productDetails, category, subCategory, brand, bundle, brandImage, filters, sort, pastOrders, quotes, rfqs, lightBoxV2, allocations, search, layouter, layouterItem, categoryDetails, contactUs, login, resetPassword, breadcrumbs, iconLibrary, };
@@ -13,11 +13,12 @@ interface selfLayoutInterface {
13
13
  optionTitleValueSpacing: CMSIBCommonInterface;
14
14
  displayValues: CMSIBCommonInterface;
15
15
  swatchItemSpacing: CMSIBCommonInterface;
16
+ swatchItemSize: CMSIBCommonInterface;
16
17
  swatchItemPadding: CMSIBCommonInterface;
17
18
  optionItemSpacing: CMSIBCommonInterface;
18
19
  optionItemPadding: CMSIBCommonInterface;
19
20
  swatchMaxItemsToDisplay: CMSIBCommonInterface;
20
- swatchOverFlowItems: CMSIBCommonInterface;
21
+ swatchOverflowItems: CMSIBCommonInterface;
21
22
  singleSelectDisplayValues: CMSIBCommonInterface;
22
23
  singleSelectItemSpacing: CMSIBCommonInterface;
23
24
  singleSelectItemPadding: CMSIBCommonInterface;
@@ -51,11 +52,18 @@ export interface selfDesignInterface {
51
52
  export declare enum SelectorKeysEnum {
52
53
  LAYOUT = "layout",
53
54
  DESIGN = "design",
54
- FAQ_WIDGET = "faqWidget",
55
+ WIDGET_STYLE = "widgetStyle",
55
56
  COLLAPSED_ACCRORDION_ITEM = "collapsedAccordionItem",
56
57
  EXPANDED_ACCRORDION_ITEM = "expandedAccordionItem",
57
58
  DIVIDER = "divider",
58
- DATA_CONNECTOR = "dataConnector"
59
+ DATA_CONNECTOR = "dataConnector",
60
+ SWATFH_TYPE_DISPLAY_STYLE = "swatchTypeDisplayStyle",
61
+ SINGLE_SELECT_DISPLAY_STYLE = "singleSelectDisplayStyle",
62
+ HOVER_STATE = "hover",
63
+ DEFAULT_STATE = "default",
64
+ SELECTED_STATE = "selected",
65
+ SWATCH_OPTION_VALUE_STYLE = "swatchOptionValueStyle",
66
+ SINGLE_OPTION_VALUE_STYLE = "singleOptionValueStyle"
59
67
  }
60
68
  export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
61
69
  export {};
@@ -0,0 +1,15 @@
1
+ import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
2
+ export interface ResetPasswordEditPopupInterface extends CMSElementEditPopupInterface {
3
+ }
4
+ interface selfLayoutInterface {
5
+ selectorKey: string;
6
+ }
7
+ export interface selfDesignInterface {
8
+ selectorKey: string;
9
+ }
10
+ export declare enum resetPasswordSelectorKeysEnum {
11
+ LAYOUT = "layout",
12
+ DESIGN = "design"
13
+ }
14
+ export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
15
+ export {};
@@ -62,7 +62,7 @@ interface selfLayoutInterface {
62
62
  containerPadding: CMSIBCommonInterface;
63
63
  overflowItems: CMSIBCommonInterface;
64
64
  tabRowSpacing: CMSIBCommonInterface;
65
- expandIconPositon: CMSIBCommonInterface;
65
+ expandIconPosition: CMSIBCommonInterface;
66
66
  expandFirstItemByDefault: CMSIBCommonInterface;
67
67
  allowMultipleOpenItems: CMSIBCommonInterface;
68
68
  itemDividers: CMSIBCommonInterface;
@@ -44,10 +44,13 @@
44
44
  }
45
45
  }
46
46
  .text-element {
47
- background: #6d96e4;
48
- padding: 10px;
47
+ color: var(--Gray-900, #101828);
48
+ font-family: "Hanken Grotesk";
49
+ font-size: 20px;
50
+ font-style: normal;
49
51
  font-weight: 600;
50
- color: rgba(75, 69, 70, 1);
52
+ line-height: 150%; /* 30px */
53
+ letter-spacing: -0.4px;
51
54
  }
52
55
  .uom__container {
53
56
  padding: var(--_ctm-lt-pg);
@@ -29,10 +29,18 @@ $minWidth: 70px;
29
29
  --_show-shadow: none;
30
30
  }
31
31
  .text-element {
32
- background: #6d96e4;
33
- padding: 10px;
32
+ color: var(--Gray-900, #101828);
33
+ // font-family: "Hanken Grotesk";
34
+ font-size: 20px;
35
+ font-style: normal;
36
+ font-weight: 600;
37
+ line-height: 150%; /* 30px */
38
+ letter-spacing: -0.4px;
39
+ }
40
+ .is__combination_avail {
41
+ color: red;
42
+ font-size: 14px;
34
43
  font-weight: 600;
35
- color: rgba(75, 69, 70, 1);
36
44
  }
37
45
  .variant__container {
38
46
  display: flex;
@@ -68,6 +76,24 @@ $minWidth: 70px;
68
76
  &[data-swatch-dispaly="Vertically"] {
69
77
  flex-direction: column;
70
78
  }
79
+ .show_more_button {
80
+ background-color: var(--_ctm-dn-sw-me-is-bn-bd-cr);
81
+ font-family: var(--_ctm-dn-sw-me-is-bn-ft-fy);
82
+ border-color: var(--_ctm-dn-sw-me-is-bn-br-cr);
83
+ border-radius: var(--_ctm-dn-sw-me-is-bn-br-rs);
84
+ border-style: var(--_ctm-dn-sw-me-is-bn-br-se);
85
+ border-width: var(--_ctm-dn-sw-me-is-bn-br-wh);
86
+ font-size: var(--_ctm-dn-sw-me-is-bn-ft-se);
87
+ font-style: var(--_ctm-dn-sw-me-is-bn-ft-se-ic);
88
+ font-weight: var(--_ctm-dn-sw-me-is-bn-ft-wt);
89
+ line-height: var(--_ctm-dn-sw-me-is-bn-le-ht);
90
+ letter-spacing: var(--_ctm-dn-sw-me-is-bn-lr-sg);
91
+ box-shadow: var(--_ctm-dn-sw-me-is-bn-sw-ae) var(--_ctm-dn-sw-me-is-bn-sw-br)
92
+ var(--_ctm-dn-sw-me-is-bn-sw-sd) var(--_ctm-dn-sw-me-is-bn-sw-cr);
93
+ text-align: var(--_ctm-dn-sw-me-is-bn-tt-an);
94
+ color: var(--_ctm-dn-sw-me-is-bn-tt-cr);
95
+ text-decoration: var(--_ctm-dn-sw-me-is-bn-ue);
96
+ }
71
97
  .item {
72
98
  // padding: var(--_ctm-lt-sh-te-dy-se-im-pg);
73
99
  background-color: var(--_ctm-dn-sh-on-ve-se-dt-se-bd-cr);
@@ -250,7 +276,7 @@ $minWidth: 70px;
250
276
  }
251
277
  &.disabled {
252
278
  cursor: not-allowed;
253
- opacity: 0.5;
279
+ opacity: 0.4;
254
280
  position: relative;
255
281
  &::after {
256
282
  content: "X";
@@ -296,6 +322,34 @@ $minWidth: 70px;
296
322
  &[data-single-dispaly="Vertically"] {
297
323
  flex-direction: column;
298
324
  }
325
+ &[data-single-overflow="Scroll"] {
326
+ overflow-x: auto;
327
+ overflow-y: hidden;
328
+ flex-wrap: nowrap;
329
+ }
330
+ &[data-swatch-overflow="Scroll"] {
331
+ overflow-x: auto;
332
+ flex-wrap: nowrap;
333
+ overflow-y: hidden;
334
+ }
335
+ .show_more_button {
336
+ background-color: var(--_ctm-dn-sw-me-is-bn-bd-cr);
337
+ font-family: var(--_ctm-dn-sw-me-is-bn-ft-fy);
338
+ border-color: var(--_ctm-dn-sw-me-is-bn-br-cr);
339
+ border-radius: var(--_ctm-dn-sw-me-is-bn-br-rs);
340
+ border-style: var(--_ctm-dn-sw-me-is-bn-br-se);
341
+ border-width: var(--_ctm-dn-sw-me-is-bn-br-wh);
342
+ font-size: var(--_ctm-dn-sw-me-is-bn-ft-se);
343
+ font-style: var(--_ctm-dn-sw-me-is-bn-ft-se-ic);
344
+ font-weight: var(--_ctm-dn-sw-me-is-bn-ft-wt);
345
+ line-height: var(--_ctm-dn-sw-me-is-bn-le-ht);
346
+ letter-spacing: var(--_ctm-dn-sw-me-is-bn-lr-sg);
347
+ box-shadow: var(--_ctm-dn-sw-me-is-bn-sw-ae) var(--_ctm-dn-sw-me-is-bn-sw-br)
348
+ var(--_ctm-dn-sw-me-is-bn-sw-sd) var(--_ctm-dn-sw-me-is-bn-sw-cr);
349
+ text-align: var(--_ctm-dn-sw-me-is-bn-tt-an);
350
+ color: var(--_ctm-dn-sw-me-is-bn-tt-cr);
351
+ text-decoration: var(--_ctm-dn-sw-me-is-bn-ue);
352
+ }
299
353
  &[data-single-dispaly="Grid"] {
300
354
  display: grid;
301
355
  grid-template-columns: repeat(var(--_ctm-lt-se-st-dy-se-is-pr-rw), minmax(auto, 1fr));
@@ -401,7 +455,7 @@ $minWidth: 70px;
401
455
  }
402
456
  &.disabled {
403
457
  cursor: not-allowed;
404
- opacity: 0.5;
458
+ opacity: 0.4;
405
459
  position: relative;
406
460
  &::after {
407
461
  content: "X";
@@ -423,6 +477,7 @@ $minWidth: 70px;
423
477
  display: flex;
424
478
  flex-direction: column;
425
479
  gap: var(--_ctm-lt-on-te-ve-sg, var(--_ctm-lt-dn-dy-se-on-ad-lt-sg));
480
+ padding: var(--_ctm-lt-dn-dy-se-dn-os-pg);
426
481
  margin-top: 10px;
427
482
 
428
483
  label {
@@ -453,13 +508,16 @@ $minWidth: 70px;
453
508
  }
454
509
 
455
510
  &.open .list {
456
- display: flex;
511
+ display: none;
512
+ margin-top: var(--_ctm-lt-dn-dy-se-on-ad-lt-sg);
513
+ gap: var(--_ctm-lt-dn-dy-se-dn-lt-im-sg);
514
+ background-color: var(--_ctm-dn-dn-se-bd-cr);
457
515
  }
458
516
 
459
517
  .list {
460
- display: none;
518
+ display: flex !important;
461
519
  flex-direction: column;
462
- gap: var(--_ctm-lt-dn-dy-se-dn-os-sg, var(--_ctm-lt-dn-dy-se-dn-lt-im-sg));
520
+ gap: var(--_ctm-lt-dn-dy-se-dn-lt-im-sg);
463
521
  border: var(--_ctm-dn-dn-se-br-wh) var(--_ctm-dn-dn-se-br-se)
464
522
  var(--_gray-200, var(--_ctm-dn-dn-se-br-cr));
465
523
  border-radius: var(--_ctm-dn-dn-se-br-rs);
@@ -486,7 +544,7 @@ $minWidth: 70px;
486
544
  }
487
545
 
488
546
  .list__option {
489
- padding: var(--_ctm-lt-dn-dy-se-dn-os-pg, var(--_ctm-lt-dn-dy-se-dn-lt-im-pg));
547
+ padding: var(--_ctm-lt-dn-dy-se-dn-lt-im-pg);
490
548
  cursor: pointer;
491
549
 
492
550
  &:hover {
@@ -495,7 +553,7 @@ $minWidth: 70px;
495
553
  }
496
554
  &.disabled {
497
555
  cursor: not-allowed;
498
- opacity: 0.5;
556
+ opacity: 0.4;
499
557
  }
500
558
  }
501
559
  }
@@ -510,6 +568,41 @@ $minWidth: 70px;
510
568
  flex-direction: row;
511
569
  &[data-dropdown-style="Vertical List"] {
512
570
  flex-direction: column;
571
+ gap: var(--_ctm-lt-im-sg);
572
+ }
573
+ .dropdown_wrapper {
574
+ position: relative;
575
+ &[data-show-divider="true"] {
576
+ &:not(:last-child)::after {
577
+ content: "";
578
+ position: relative;
579
+ background-color: #000;
580
+ height: 1px;
581
+ width: 100%;
582
+ display: flex;
583
+ top: calc(calc(var(--_ctm-lt-im-sg) + 10px) / 2);
584
+ }
585
+ }
586
+
587
+ &[data-show-item-divider="true"] {
588
+ .est__dropdown__main {
589
+ .est__dropdown {
590
+ .list {
591
+ :not(:last-child).list__option {
592
+ &::after {
593
+ content: "";
594
+ position: relative;
595
+ background-color: #000;
596
+ height: 1px;
597
+ width: 100%;
598
+ display: flex;
599
+ top: calc(var(--_ctm-lt-dn-dy-se-dn-lt-im-sg) / 2);
600
+ }
601
+ }
602
+ }
603
+ }
604
+ }
605
+ }
513
606
  }
514
607
  & > div {
515
608
  width: 100%;
@@ -531,7 +624,7 @@ $minWidth: 70px;
531
624
  var(--_ctm-mob-var-lt-mn-cn-wh)
532
625
  )
533
626
  );
534
- gap: 8px;
627
+ gap: var(--_ctm-lt-gd-os-dy-se-tb-rw-sg);
535
628
  .field__group__item {
536
629
  font-size: 16px;
537
630
  display: flex;
@@ -553,7 +646,7 @@ $minWidth: 70px;
553
646
  }
554
647
  &:disabled {
555
648
  cursor: not-allowed;
556
- opacity: 0.5;
649
+ opacity: 0.4;
557
650
  }
558
651
  }
559
652
  }
@@ -562,7 +655,8 @@ $minWidth: 70px;
562
655
  .quantiy__details {
563
656
  display: flex;
564
657
  flex-direction: column;
565
- gap: 20px;
658
+ gap: var(--_ctm-lt-gd-os-dy-se-gp-sg);
659
+ padding: var(--_ctm-lt-gd-os-dy-se-gp-pg);
566
660
  .title {
567
661
  display: flex;
568
662
  justify-content: space-between;
@@ -580,6 +674,9 @@ $minWidth: 70px;
580
674
  flex-direction: column;
581
675
  gap: 12px;
582
676
  .fit__desc {
677
+ display: flex;
678
+ flex-direction: column;
679
+ gap: var(--_ctm-lt-gd-os-dy-se-gp-hr-ad-on-sg);
583
680
  font-size: 16px;
584
681
  color: var(--_gray-900);
585
682
  .each__price {
@@ -591,8 +688,50 @@ $minWidth: 70px;
591
688
  .grouped_items {
592
689
  display: flex;
593
690
  flex-direction: column;
594
- gap: var(--_ctm-lt-gd-os-dy-se-gp-sg);
595
- padding: var(--_ctm-lt-gd-os-dy-se-gp-pg);
691
+
692
+ .tab__accordion {
693
+ display: flex;
694
+ flex-direction: column;
695
+ gap: var(--_ctm-lt-im-sg);
696
+ .tab__container {
697
+ display: flex;
698
+ flex-direction: column;
699
+
700
+ .tab {
701
+ &:first-child {
702
+ margin-bottom: var(--_ctm-lt-on-te-ve-sg);
703
+ }
704
+ }
705
+
706
+ .tab__content {
707
+ display: flex;
708
+ flex-direction: column;
709
+ padding: var(--_ctm-lt-gd-os-dy-se-gp-pg);
710
+
711
+ .field__group {
712
+ gap: var(--_ctm-lt-gd-os-dy-se-gp-sg);
713
+
714
+ .field__group__item {
715
+ gap: var(--_ctm-lt-gd-os-dy-se-gp-hr-ad-on-sg);
716
+ }
717
+ }
718
+ }
719
+ }
720
+ }
721
+
722
+ &[data-show-divider="true"] {
723
+ .tab__accordion {
724
+ &:not(:last-child)::after {
725
+ content: "";
726
+ position: relative;
727
+ background-color: #000;
728
+ height: 1px;
729
+ width: 100%;
730
+ display: flex;
731
+ top: calc(var(--_ctm-lt-im-sg) / 2);
732
+ }
733
+ }
734
+ }
596
735
  }
597
736
  // tabs
598
737
  .tabs__container {
@@ -622,52 +761,96 @@ $minWidth: 70px;
622
761
  }
623
762
 
624
763
  // accordion tabs
625
- .tab__accordion {
626
- display: flex;
627
- flex-direction: column;
628
- .tab__container {
629
- .tab {
764
+ .tab__accordion_wrapper {
765
+ .tab__accordion {
766
+ display: flex;
767
+ flex-direction: column;
768
+ padding: var(--_ctm-lt-gd-os-dy-se-cr-pg);
769
+ .tab__container {
630
770
  display: flex;
631
- padding-inline: 2px;
632
- position: relative;
633
- cursor: pointer;
634
- flex-direction: row;
635
- &[data-expand-icon="Left"] {
636
- flex-direction: row-reverse;
637
- justify-content: flex-end;
638
- }
639
- &[data-item-dividers="true"] {
640
- &::after {
641
- content: "";
642
- position: absolute;
643
- bottom: 0;
644
- height: 2px;
645
- width: 100%;
646
- border-bottom: 1px solid var(--_gray-200);
771
+ flex-direction: column;
772
+ gap: var(--_ctm-lt-gd-os-dy-se-an-sg);
773
+ .tab_acc_wrapper {
774
+ display: flex;
775
+ flex-direction: column;
776
+ gap: var(--_ctm-lt-gd-os-dy-se-an-ad-cr-sg);
777
+ padding: var(--_ctm-lt-gd-os-dy-se-an-vl-pg) var(--_ctm-lt-gd-os-dy-se-an-hl-pg);
778
+
779
+ .tab {
780
+ display: flex;
781
+ padding-inline: 2px;
782
+ position: relative;
783
+ cursor: pointer;
784
+ flex-direction: row;
785
+ &[data-expand-icon="Left"] {
786
+ flex-direction: row-reverse;
787
+ justify-content: flex-end;
788
+ }
789
+ &[data-item-dividers="true"] {
790
+ &::after {
791
+ content: "";
792
+ position: absolute;
793
+ bottom: 0;
794
+ height: 2px;
795
+ width: 100%;
796
+ border-bottom: 1px solid var(--_gray-200);
797
+ }
798
+ }
799
+ span {
800
+ padding-block: 12px;
801
+ display: inline-block;
802
+ }
803
+ .active {
804
+ border-bottom: 2px solid var(--_primary-400);
805
+ }
806
+ &.inactive {
807
+ height: 0px;
808
+ }
809
+ }
810
+ .tab__content {
811
+ &.d-none {
812
+ display: none;
813
+ }
814
+ &.d-block {
815
+ display: block;
816
+ }
647
817
  }
648
- }
649
- span {
650
- padding-block: 12px;
651
- display: inline-block;
652
- }
653
- .active {
654
- border-bottom: 2px solid var(--_primary-400);
655
- }
656
- &.inactive {
657
- height: 0px;
658
818
  }
659
819
  }
660
- .tab__content {
661
- padding-block: 20px;
662
- &.d-none {
663
- display: none;
820
+ }
821
+
822
+ &[data-show-dividers="true"] {
823
+ .tab__accordion {
824
+ .tab__container {
825
+ .tab_acc_wrapper {
826
+ &:not(:last-child)::after {
827
+ content: "";
828
+ position: relative;
829
+ background-color: #000;
830
+ height: 1px;
831
+ width: 100%;
832
+ display: flex;
833
+ top: calc(var(--_ctm-lt-gd-os-dy-se-an-sg) / 2);
834
+ }
835
+ }
664
836
  }
665
- &.d-block {
666
- display: block;
837
+ }
838
+ }
839
+
840
+ &[data-icon-position="Left"] {
841
+ .tab__accordion {
842
+ .tab__container {
843
+ .tab_acc_wrapper {
844
+ .tab {
845
+ flex-direction: row-reverse;
846
+ align-self: flex-start;
847
+ }
848
+ }
667
849
  }
668
850
  }
669
851
  }
670
852
  }
853
+
671
854
  // table
672
855
  .table__class {
673
856
  border: 1px solid var(--_gray-200);
@@ -757,6 +940,7 @@ $minWidth: 70px;
757
940
  &.tabs__hr {
758
941
  .tabs {
759
942
  flex-direction: column;
943
+ gap: var(--_ctm-lt-gd-os-dy-se-tb-ad-cr-sg);
760
944
  .tabs__container {
761
945
  width: 100%;
762
946
  }
@@ -25,11 +25,13 @@
25
25
  --_show-shadow: none;
26
26
  }
27
27
  .text-element {
28
- background: #6d96e4;
29
- padding: 10px;
28
+ color: var(--Gray-900, #101828);
29
+ font-family: "Hanken Grotesk";
30
+ font-size: 20px;
31
+ font-style: normal;
30
32
  font-weight: 600;
31
- color: rgba(75, 69, 70, 1);
32
- // min-width: 250px;
33
+ line-height: 150%; /* 30px */
34
+ letter-spacing: -0.4px;
33
35
  }
34
36
  .volume__container {
35
37
  padding: var(--_ctm-lt-pg);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sc-360-v2/storefront-cms-library",
3
- "version": "0.2.60",
3
+ "version": "0.2.62",
4
4
  "main": "/dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "exports": {