@sc-360-v2/storefront-cms-library 0.2.99 → 0.3.0

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 (24) hide show
  1. package/dist/amount-estimator.scss +226 -291
  2. package/dist/builder.js +1 -1
  3. package/dist/cartDropdownOverlay.scss +13 -0
  4. package/dist/faq.scss +24 -20
  5. package/dist/icon-list.scss +16 -15
  6. package/dist/map.scss +35 -35
  7. package/dist/pickup-locations.scss +19 -22
  8. package/dist/product-options.scss +76 -118
  9. package/dist/quick-links.scss +143 -186
  10. package/dist/quotes.scss +0 -1
  11. package/dist/repeater-item.scss +0 -1
  12. package/dist/section.scss +78 -29
  13. package/dist/stack.scss +61 -16
  14. package/dist/store-locations.scss +20 -21
  15. package/dist/types/builder/tools/element-edit/paymentMethods.d.ts +1 -94
  16. package/dist/uom-selector.scss +1428 -941
  17. package/dist/variant-picker.scss +68 -416
  18. package/dist/volume-pricing.scss +606 -1007
  19. package/dist/widget.scss +0 -2
  20. package/package.json +1 -1
  21. package/dist/menu-item.scss +0 -19
  22. package/dist/order-status.scss +0 -483
  23. package/dist/table-common.scss +0 -510
  24. package/dist/volume-pricing copy.scss +0 -1092
package/dist/stack.scss CHANGED
@@ -35,19 +35,52 @@ body {
35
35
  // min-height: var(--_ctm-sta-lt-ht, 100px) !important;
36
36
  min-width: 100px;
37
37
  min-height: 100px;
38
- margin: prepareMediaVariable(--_ctm-sta-lt-mn);
38
+ margin: var(
39
+ --_ctm-mob-sta-lt-mn,
40
+ var(--_ctm-tab-sta-lt-mn, var(--_ctm-sta-lt-mn, var(--_ctm-lt-mn)))
41
+ );
39
42
  // display: var(--_d-grid);
40
- background-color: prepareMediaVariable(--_ctm-sta-dn-bd-cr);
41
- background-image: prepareMediaVariable(--_ctm-sta-dn-bd-ie);
42
- background-attachment: prepareMediaVariable(--_ctm-sta-dn-bd-at);
43
- background-position: prepareMediaVariable(--_ctm-sta-dn-bd-pn);
44
- background-repeat: prepareMediaVariable(--_ctm-sta-dn-bd-rt);
45
- background-size: prepareMediaVariable(--_ctm-sta-dn-bd-se);
43
+ background-color: var(
44
+ --_ctm-mob-sta-dn-bd-cr,
45
+ var(--_ctm-tab-sta-dn-bd-cr, var(--_ctm-sta-dn-bd-cr))
46
+ );
47
+ background-image: var(
48
+ --_ctm-mob-sta-dn-bd-ie,
49
+ var(--_ctm-tab-sta-dn-bd-ie, var(--_ctm-sta-dn-bd-ie))
50
+ );
51
+ background-attachment: var(
52
+ --_ctm-mob-sta-dn-bd-at,
53
+ var(--_ctm-tab-sta-dn-bd-at, var(--_ctm-sta-dn-bd-at))
54
+ );
55
+ background-position: var(
56
+ --_ctm-mob-sta-dn-bd-pn,
57
+ var(--_ctm-tab-sta-dn-bd-pn, var(--_ctm-sta-dn-bd-pn))
58
+ );
59
+ background-repeat: var(
60
+ --_ctm-mob-sta-dn-bd-rt,
61
+ var(--_ctm-tab-sta-dn-bd-rt, var(--_ctm-sta-dn-bd-rt))
62
+ );
63
+ background-size: var(
64
+ --_ctm-mob-sta-dn-bd-se,
65
+ var(--_ctm-tab-sta-dn-bd-se, var(--_ctm-sta-dn-bd-se))
66
+ );
46
67
 
47
- border-color: var(--_hide-grid-border, prepareMediaVariable(--_ctm-sta-dn-br-cr));
48
- border-style: var(--_hide-grid-border, prepareMediaVariable(--_ctm-sta-dn-br-se));
49
- border-width: var(--_hide-grid-border, prepareMediaVariable(--_ctm-sta-dn-br-wh));
50
- border-radius: prepareMediaVariable(--_ctm-sta-dn-br-rs);
68
+ border-color: var(
69
+ --_hide-grid-border,
70
+ var(--_ctm-mob-sta-dn-br-cr, var(--_ctm-tab-sta-dn-br-cr, var(--_ctm-sta-dn-br-cr)))
71
+ );
72
+ border-style: var(
73
+ --_hide-grid-border,
74
+ var(--_ctm-mob-sta-dn-br-se, var(--_ctm-tab-sta-dn-br-se, var(--_ctm-sta-dn-br-se)))
75
+ );
76
+ border-width: var(
77
+ --_hide-grid-border,
78
+ var(--_ctm-mob-sta-dn-br-wh, var(--_ctm-tab-sta-dn-br-wh, var(--_ctm-sta-dn-br-wh)))
79
+ );
80
+ border-radius: var(
81
+ --_ctm-mob-sta-dn-br-rs,
82
+ var(--_ctm-tab-sta-dn-br-rs, var(--_ctm-sta-dn-br-rs))
83
+ );
51
84
  grid-template-columns: 100%;
52
85
 
53
86
  // &:not(.#{$dp}, .#{$tb}, .#{$mb}) {
@@ -57,7 +90,13 @@ body {
57
90
  &.vtl {
58
91
  // width: var(--_sf-sta-nw-wh, auto);
59
92
  min-height: 30px;
60
- width: calc(1% * #{prepareMediaVariable(--_ctm-sta-ele-nw-wh-vl)});
93
+ width: calc(
94
+ 1% *
95
+ var(
96
+ --_ctm-mob-sta-ele-nw-wh-vl,
97
+ var(--_ctm-tab-sta-ele-nw-wh-vl, var(--_ctm-sta-ele-nw-wh-vl))
98
+ )
99
+ );
61
100
  min-width: 100px;
62
101
  & > .wrapper {
63
102
  flex-direction: column;
@@ -65,7 +104,10 @@ body {
65
104
  height: 100%;
66
105
  // justify-content: var(--_ctm-sta-lt-jy-ct);
67
106
  // align-items: var(--_ctm-sta-lt-an-is);
68
- align-items: prepareMediaVariable(--_ctm-sta-lt-jy-ct);
107
+ align-items: var(
108
+ --_ctm-mob-sta-lt-jy-ct,
109
+ var(--_ctm-tab-sta-lt-jy-ct, var(--_ctm-sta-lt-jy-ct))
110
+ );
69
111
  }
70
112
  }
71
113
  &.hrz {
@@ -87,16 +129,19 @@ body {
87
129
  height: 100%;
88
130
  flex-direction: row;
89
131
  // justify-content: var(--_ctm-sta-lt-an-is);
90
- align-items: prepareMediaVariable(--_ctm-sta-lt-an-is);
132
+ align-items: var(
133
+ --_ctm-mob-sta-lt-an-is,
134
+ var(--_ctm-tab-sta-lt-an-is, var(--_ctm-sta-lt-an-is))
135
+ );
91
136
  }
92
137
  }
93
138
 
94
139
  & > div {
95
140
  &.wrapper {
96
141
  // width: 100%;
97
- padding: prepareMediaVariable(--_ctm-sta-lt-pg);
142
+ padding: var(--_ctm-mob-sta-lt-pg, var(--_ctm-tab-sta-lt-pg, var(--_ctm-sta-lt-pg)));
98
143
  display: var(--_d-flex);
99
- gap: prepareMediaVariable(--_ctm-sta-lt-im-gp);
144
+ gap: var(--_ctm-mob-sta-lt-im-gp, var(--_ctm-tab-sta-lt-im-gp, var(--_ctm-sta-lt-im-gp)));
100
145
 
101
146
  // border-color: var(
102
147
  // --_hide-grid-border,
package/dist/store-locations.scss CHANGED
@@ -5,19 +5,37 @@
5
5
  &[data-element-type="storeLocations"] {
6
6
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
7
7
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
8
+
8
9
  // aspect-ratio: 1 / var(--_sf-aspect-ratio);
9
10
 
10
11
  & > .wrapper {
11
12
  width: 100%;
12
13
  }
13
-
14
14
  &[data-show-shadow="false"] {
15
15
  --_show-shadow-im-se: none;
16
16
  }
17
17
  &[data-show-border="false"] {
18
18
  --_show-border-im-se: none;
19
19
  }
20
-
20
+ &[data-overflow-items="Wrap"] {
21
+ .horizontal {
22
+ flex-wrap: wrap;
23
+ }
24
+ }
25
+ &[data-overflow-items="Scroll"] {
26
+ .horizontal {
27
+ width: 100%;
28
+ overflow-x: auto;
29
+ .item {
30
+ width: 100%;
31
+ flex-shrink: 0;
32
+ }
33
+ }
34
+ .vertical {
35
+ overflow-y: auto;
36
+ max-height: 30%;
37
+ }
38
+ }
21
39
  .text-element {
22
40
  background: #6d96e4;
23
41
  padding: 10px;
@@ -541,25 +559,6 @@
541
559
  var(--_ctm-tab-dn-iy-tt-se-ue, var(--_ctm-dn-iy-tt-se-ue))
542
560
  );
543
561
  }
544
- &[data-overflow-items="Wrap"] {
545
- .horizontal {
546
- flex-wrap: wrap;
547
- }
548
- }
549
- &[data-overflow-items="Scroll"] {
550
- .horizontal {
551
- width: 100%;
552
- overflow-x: auto;
553
- .item {
554
- width: 100%;
555
- flex-shrink: 0;
556
- }
557
- }
558
- .vertical {
559
- overflow-y: auto;
560
- max-height: 100px;
561
- }
562
- }
563
562
  .horizontal {
564
563
  display: flex;
565
564
  flex-direction: row;
package/dist/types/builder/tools/element-edit/paymentMethods.d.ts CHANGED
@@ -29,105 +29,12 @@ interface selfLayoutInterface {
29
29
  }
30
30
  interface selfDesignInterface {
31
31
  selectorKey: string;
32
- paymentMethodWidget: {
33
- selectorKey: string;
34
- backgroundColor: CMSIBCommonInterface;
35
- borderColor: CMSIBCommonInterface;
36
- borderStyle: CMSIBCommonInterface;
37
- borderPerSlide: CMSIBCommonInterface;
38
- showBorder: CMSIBCommonInterface;
39
- showShadow: CMSIBCommonInterface;
40
- shadowColor: CMSIBCommonInterface;
41
- blur: CMSIBCommonInterface;
42
- spread: CMSIBCommonInterface;
43
- angle: CMSIBCommonInterface;
44
- borderRadius: CMSIBCommonInterface;
45
- };
46
- paymentMethodTitle: {
47
- selectorKey: string;
48
- backgroundColor: CMSIBCommonInterface;
49
- borderColor: CMSIBCommonInterface;
50
- borderStyle: CMSIBCommonInterface;
51
- borderPerSlide: CMSIBCommonInterface;
52
- showBorder: CMSIBCommonInterface;
53
- showShadow: CMSIBCommonInterface;
54
- shadowColor: CMSIBCommonInterface;
55
- blur: CMSIBCommonInterface;
56
- spread: CMSIBCommonInterface;
57
- angle: CMSIBCommonInterface;
58
- borderRadius: CMSIBCommonInterface;
59
- theme: CMSIBCommonInterface;
60
- font: CMSIBCommonInterface;
61
- fontSize: CMSIBCommonInterface;
62
- textColor: CMSIBCommonInterface;
63
- bold: CMSIBCommonInterface;
64
- italic: CMSIBCommonInterface;
65
- linethrough: CMSIBCommonInterface;
66
- underline: CMSIBCommonInterface;
67
- textAlign: CMSIBCommonInterface;
68
- characterSpacing: CMSIBCommonInterface;
69
- lineHeight: CMSIBCommonInterface;
70
- };
71
- paymentMethodDescription: {
72
- selectorKey: string;
73
- backgroundColor: CMSIBCommonInterface;
74
- borderColor: CMSIBCommonInterface;
75
- borderStyle: CMSIBCommonInterface;
76
- borderPerSlide: CMSIBCommonInterface;
77
- showBorder: CMSIBCommonInterface;
78
- showShadow: CMSIBCommonInterface;
79
- shadowColor: CMSIBCommonInterface;
80
- blur: CMSIBCommonInterface;
81
- spread: CMSIBCommonInterface;
82
- angle: CMSIBCommonInterface;
83
- borderRadius: CMSIBCommonInterface;
84
- theme: CMSIBCommonInterface;
85
- font: CMSIBCommonInterface;
86
- fontSize: CMSIBCommonInterface;
87
- textColor: CMSIBCommonInterface;
88
- bold: CMSIBCommonInterface;
89
- italic: CMSIBCommonInterface;
90
- linethrough: CMSIBCommonInterface;
91
- underline: CMSIBCommonInterface;
92
- textAlign: CMSIBCommonInterface;
93
- characterSpacing: CMSIBCommonInterface;
94
- lineHeight: CMSIBCommonInterface;
95
- };
96
- paymentMethodContainerDesign: {
97
- selectorKey: string;
98
- backgroundColor: CMSIBCommonInterface;
99
- borderColor: CMSIBCommonInterface;
100
- borderStyle: CMSIBCommonInterface;
101
- borderPerSlide: CMSIBCommonInterface;
102
- showBorder: CMSIBCommonInterface;
103
- showShadow: CMSIBCommonInterface;
104
- shadowColor: CMSIBCommonInterface;
105
- blur: CMSIBCommonInterface;
106
- spread: CMSIBCommonInterface;
107
- angle: CMSIBCommonInterface;
108
- borderRadius: CMSIBCommonInterface;
109
- theme: CMSIBCommonInterface;
110
- font: CMSIBCommonInterface;
111
- fontSize: CMSIBCommonInterface;
112
- textColor: CMSIBCommonInterface;
113
- bold: CMSIBCommonInterface;
114
- italic: CMSIBCommonInterface;
115
- linethrough: CMSIBCommonInterface;
116
- underline: CMSIBCommonInterface;
117
- textAlign: CMSIBCommonInterface;
118
- characterSpacing: CMSIBCommonInterface;
119
- lineHeight: CMSIBCommonInterface;
120
- };
121
32
  }
122
33
  export declare enum PaymentMethodSelectorKeysEnum {
123
34
  LAYOUT = "layout",
124
35
  CONTENT = "content",
125
36
  DESIGN = "design",
126
- DATA_CONNECTOR = "dataConnector",
127
- PAYMENTMETHOD_WIDGET = "PaymentMethodWidget",
128
- PAYMENTMETHOD_TITLE = "PaymentMethodTitle",
129
- PAYMENTMETHOD_DESCRIPTION = "PaymentMethodDescription",
130
- PAYMENTMETHOD__CONTAINER_DESIGN = "PaymentMethodContainerDesign"
37
+ DATA_CONNECTOR = "dataConnector"
131
38
  }
132
39
  export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
133
40
  export {};