@sc-360-v2/storefront-cms-library 0.1.4 → 0.1.6

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 (45) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/button.scss +75 -34
  3. package/dist/code-temp.scss +58 -0
  4. package/dist/container.scss +17 -0
  5. package/dist/countdown.scss +378 -0
  6. package/dist/editor-core.scss +312 -0
  7. package/dist/embed-temp.scss +58 -0
  8. package/dist/faq.scss +242 -0
  9. package/dist/functions.scss +133 -0
  10. package/dist/gallery-slider-temp.scss +410 -0
  11. package/dist/grid.scss +34 -0
  12. package/dist/hotspot.scss +250 -0
  13. package/dist/image-temp.scss +75 -0
  14. package/dist/map.scss +280 -0
  15. package/dist/pickup-locations.scss +180 -0
  16. package/dist/product-actions.scss +180 -0
  17. package/dist/product-inventory.scss +180 -0
  18. package/dist/product-price.scss +61 -0
  19. package/dist/scroll.scss +157 -0
  20. package/dist/section.scss +60 -0
  21. package/dist/social.scss +166 -0
  22. package/dist/store-locations.scss +180 -0
  23. package/dist/table.scss +373 -0
  24. package/dist/text-temp.scss +58 -0
  25. package/dist/types/builder/elements/amount-estimator/index.d.ts +26 -0
  26. package/dist/types/builder/elements/paymentMethods/index.d.ts +26 -0
  27. package/dist/types/builder/elements/product-promotions/index.d.ts +26 -0
  28. package/dist/types/builder/elements/productHighlights/index.d.ts +26 -0
  29. package/dist/types/builder/elements/quantity-selector/index.d.ts +26 -0
  30. package/dist/types/builder/elements/shippingEstimator/index.d.ts +26 -0
  31. package/dist/types/builder/enums/index.d.ts +2 -1
  32. package/dist/types/builder/index.d.ts +7 -1
  33. package/dist/types/builder/tools/element-edit/amountEstimator.d.ts +40 -0
  34. package/dist/types/builder/tools/element-edit/common.d.ts +3 -0
  35. package/dist/types/builder/tools/element-edit/gallery-slider.d.ts +12 -2
  36. package/dist/types/builder/tools/element-edit/index.d.ts +7 -1
  37. package/dist/types/builder/tools/element-edit/paymentMethods.d.ts +37 -0
  38. package/dist/types/builder/tools/element-edit/productHighlights.d.ts +24 -0
  39. package/dist/types/builder/tools/element-edit/productPromotions.d.ts +39 -0
  40. package/dist/types/builder/tools/element-edit/quantitySelector.d.ts +17 -0
  41. package/dist/types/builder/tools/element-edit/shippingEstimator.d.ts +14 -0
  42. package/dist/video.scss +199 -0
  43. package/dist/volume-pricing.scss +28 -0
  44. package/dist/widget.scss +23 -1
  45. package/package.json +1 -1
package/dist/pickup-locations.scss ADDED
@@ -0,0 +1,180 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ [data-div-type="element"] {
5
+ &[data-element-type="pickupLocations"] {
6
+ width: var(--_sf-nw-wh, var(--_tst-lt-wh));
7
+ margin: var(--_ctm-lt-mn, --_tst-lt-mn);
8
+ aspect-ratio: 1 / var(--_sf-aspect-ratio);
9
+
10
+ & > .wrapper {
11
+ // width: 100%;
12
+ // height: 100%;
13
+ }
14
+
15
+ &[data-show-shadow="false"] {
16
+ --_show-shadow: none;
17
+ }
18
+ &[data-icon-position="left"] {
19
+ --_sf-fd-bn: row;
20
+ }
21
+ &[data-icon-position="right"] {
22
+ --_sf-fd-bn: row-reverse;
23
+ }
24
+ &[data-icon-position="center"] {
25
+ --_sf-fd-bn: row;
26
+ }
27
+
28
+ &:hover {
29
+ --_sf-hr-bd-cr: var(--_ctm-dn-hr-se-bd-cr, var(--_tst-dn-hr-se-bd-cr));
30
+ --_sf-hr-br-cr: var(--_ctm-dn-hr-se-br-cr, var(--_tst-dn-hr-se-br-cr));
31
+ --_sf-hr-br-st: var(--_ctm-dn-hr-se-br-se, var(--_tst-dn-hr-se-br-se));
32
+ --_sf-hr-br-wt: var(--_ctm-dn-hr-se-br-wh, var(--_tst-dn-hr-se-br-wh));
33
+ --_sf-hr-br-br: var(--_ctm-dn-hr-se-br-rs, var(--_tst-dn-hr-se-br-rs));
34
+ --_sf-hr-bx-sw: var(--_ctm-dn-hr-se-sw-ae, var(--_tst-dn-hr-se-sw-ae))
35
+ var(--_ctm-dn-hr-se-sw-br, var(--_tst-dn-hr-se-sw-br))
36
+ var(--_ctm-dn-hr-se-sw-sd, var(--_tst-dn-hr-se-sw-sd))
37
+ var(--_ctm-dn-hr-se-sw-cr, var(--_tst-dn-hr-se-sw-cr));
38
+
39
+ --_sf-hr-fc: var(--_ctm-dn-hr-se-cr, var(--_tst-dn-hr-se-cr));
40
+ --_sf-hr-ff: var(--_ctm-dn-hr-se-ft-fy, var(--_tst-dn-hr-se-ft-fy));
41
+ --_sf-hr-fs: var(--_ctm-dn-hr-se-ft-se, var(--_tst-dn-hr-se-ft-se));
42
+ --_sf-hr-fw: var(--_ctm-dn-hr-se-ft-wt, var(--_tst-dn-hr-se-ft-wt));
43
+ --_sf-hr-ft: var(--_ctm-dn-hr-se-ft-se-ic, var(--_tst-dn-hr-se-ft-se-ic));
44
+ --_sf-hr-ta: var(--_ctm-dn-hr-se-tt-an, var(--_tst-dn-hr-se-tt-an));
45
+ --_sf-hr-ls: var(--_ctm-dn-hr-se-lr-sg, var(--_tst-dn-hr-se-lr-sg));
46
+ --_sf-hr-lh: var(--_ctm-dn-hr-se-le-ht, var(--_tst-dn-hr-se-le-ht));
47
+
48
+ --_sf-hr-ic-wt: var(--_ctm-dn-hr-se-in-se, var(--_tst-dn-hr-se-in-se));
49
+ --_sf-hr-ic-ht: var(--_ctm-dn-hr-se-in-se, var(--_tst-dn-hr-se-in-se));
50
+ --_sf-hr-ic-st: var(--_ctm-dn-hr-se-in-c1, var(--_tst-dn-hr-se-in-c1));
51
+ --_sf-hr-tt-dn: var(--_ctm-dn-hr-se-ue, var(--_tst-dn-hr-se-in-c1));
52
+
53
+ &[data-hover-show-shadow="false"] {
54
+ --_hover-show-shadow: none;
55
+ }
56
+ &[data-hover-show-icon="false"] {
57
+ --_hover-show-icon: none;
58
+ }
59
+ }
60
+ &[data-show-icon="false"] {
61
+ --_show-icon: none;
62
+ }
63
+ &[data-element-style="Icon"] {
64
+ &[data-icon-position="left"] {
65
+ --_sf-jc: start;
66
+ }
67
+ &[data-icon-position="right"] {
68
+ --_sf-jc: end;
69
+ }
70
+ &[data-icon-position="center"] {
71
+ --_sf-jc: center;
72
+ }
73
+ }
74
+
75
+ .btn__with__text {
76
+ background-color: var(--_sf-hr-bd-cr, var(--_ctm-dn-dt-se-bd-cr, var(--_tst-dn-dt-se-bd-cr)));
77
+ // padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
78
+ padding: var(--_sf-element-vt-pd) var(--_sf-element-hr-pd);
79
+ display: flex;
80
+ flex-direction: var(--_sf-fd-bn);
81
+ align-items: center;
82
+ // justify-content: var(--_sf-jc, center);
83
+ justify-content: var(--_ctm-lt-tt-an, center);
84
+ gap: var(--_ctm-lt-gp, var(--_tst-lt-gp));
85
+
86
+ width: 100%;
87
+ height: 100%;
88
+
89
+ border-radius: var(--_sf-hr-br-br, var(--_ctm-dn-dt-se-br-rs, var(--s_tst-dn-dt-se-br-rs)));
90
+ box-shadow: var(
91
+ --_hover-show-shadow,
92
+ var(
93
+ --_sf-hr-bx-sw,
94
+ var(
95
+ --_show-shadow,
96
+ var(--_ctm-dn-dt-se-sw-ae, var(--_tst-dn-dt-se-sw-ae))
97
+ var(--_ctm-dn-dt-se-sw-br, var(--_tst-dn-dt-se-sw-br))
98
+ var(--_ctm-dn-dt-se-sw-sd, var(--_tst-dn-dt-se-sw-sd))
99
+ var(--_ctm-dn-dt-se-sw-cr, var(--_tst-dn-dt-se-sw-cr))
100
+ )
101
+ )
102
+ );
103
+ &[data-show-border="true"] {
104
+ border-color: var(--_sf-hr-br-cr, var(--_ctm-dn-dt-se-br-cr, var(--_tst-dn-dt-se-br-cr)));
105
+ border-style: var(--_sf-hr-br-st, var(--_ctm-dn-dt-se-br-se, var(--_tst-dn-dt-se-br-se)));
106
+ border-width: var(--_sf-hr-br-wt, var(--_ctm-dn-dt-se-br-wh, var(--_tst-dn-dt-se-br-wh)));
107
+ }
108
+ // &.btn__with__text__icon {
109
+ // justify-content: center;
110
+ // // gap: 10px;
111
+ // }
112
+ // & > span {
113
+ // align-items: center;
114
+ // justify-content: center;
115
+ // &.txt {
116
+ // display: flex;
117
+ // color: var(--_sf-hr-fc, var(--_ctm-dn-dt-se-cr, var(--_tst-dn-dt-se-cr)));
118
+ // font-family: var(--_sf-hr-ff, var(--_ctm-dn-dt-se-ft-fy, var(--_tst-dn-dt-se-ft-fy))),
119
+ // sans-serif;
120
+ // font-size: var(--_sf-hr-fs, var(--_ctm-dn-dt-se-ft-se, var(--_tst-dn-dt-se-ft-se)));
121
+ // font-weight: var(--_sf-hr-fw, var(--_ctm-dn-dt-se-ft-wt, var(--_tst-dn-dt-se-ft-wt)));
122
+ // font-style: var(
123
+ // --_sf-hr-ft,
124
+ // var(--_ctm-dn-dt-se-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic))
125
+ // );
126
+ // text-align: var(--_sf-hr-ta, var(--_ctm-dn-dt-se-tt-an, var(--_tst-dn-dt-se-tt-an)));
127
+ // letter-spacing: var(--_sf-hr-ls, var(--_ctm-dn-dt-se-lr-sg, var(--_tst-dn-dt-se-lr-sg)));
128
+ // line-height: var(--_sf-hr-lh, var(--_ctm-dn-dt-se-le-ht, var(--_tst-dn-dt-se-le-ht)));
129
+ // text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
130
+ // // --_sf-hr-tt-dn: var(--_ctm-dn-hr-se-ue, var(--_tst-dn-hr-se-in-c1));
131
+ // }
132
+
133
+ // &.icon {
134
+ // display: var(--_hover-show-icon, var(--_show-icon, flex));
135
+ // svg {
136
+ // width: var(--_sf-hr-ic-wt, var(--_ctm-dn-dt-se-in-se, var(--_tst-dn-dt-se-in-se)));
137
+ // height: var(--_sf-hr-ic-ht, var(--_ctm-dn-dt-se-in-se, var(--_tst-dn-dt-se-in-se)));
138
+ // path {
139
+ // stroke: var(--_sf-hr-ic-st, var(--_ctm-dn-dt-se-in-c1, var(--_tst-dn-dt-se-in-c1)));
140
+ // }
141
+ // }
142
+ // }
143
+ // &[data-element-style="Text"] {
144
+ // display: inline-block;
145
+ // width: 100%;
146
+ // }
147
+ // }
148
+
149
+ .txt {
150
+ display: flex;
151
+ color: var(--_sf-hr-fc, var(--_ctm-dn-dt-se-cr, var(--_tst-dn-dt-se-cr)));
152
+ font-family: var(--_sf-hr-ff, var(--_ctm-dn-dt-se-ft-fy, var(--_tst-dn-dt-se-ft-fy))),
153
+ sans-serif;
154
+ font-size: var(--_sf-hr-fs, var(--_ctm-dn-dt-se-ft-se, var(--_tst-dn-dt-se-ft-se)));
155
+ font-weight: var(--_sf-hr-fw, var(--_ctm-dn-dt-se-ft-wt, var(--_tst-dn-dt-se-ft-wt)));
156
+ font-style: var(--_sf-hr-ft, var(--_ctm-dn-dt-se-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic)));
157
+ text-align: var(--_sf-hr-ta, var(--_ctm-dn-dt-se-tt-an, var(--_tst-dn-dt-se-tt-an)));
158
+ letter-spacing: var(--_sf-hr-ls, var(--_ctm-dn-dt-se-lr-sg, var(--_tst-dn-dt-se-lr-sg)));
159
+ line-height: var(--_sf-hr-lh, var(--_ctm-dn-dt-se-le-ht, var(--_tst-dn-dt-se-le-ht)));
160
+ text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
161
+ // --_sf-hr-tt-dn: var(--_ctm-dn-hr-se-ue, var(--_tst-dn-hr-se-in-c1));
162
+ }
163
+
164
+ .icon {
165
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
166
+ svg {
167
+ width: var(--_sf-hr-ic-wt, var(--_ctm-dn-dt-se-in-se, var(--_tst-dn-dt-se-in-se)));
168
+ height: var(--_sf-hr-ic-ht, var(--_ctm-dn-dt-se-in-se, var(--_tst-dn-dt-se-in-se)));
169
+ path {
170
+ stroke: var(--_sf-hr-ic-st, var(--_ctm-dn-dt-se-in-c1, var(--_tst-dn-dt-se-in-c1)));
171
+ }
172
+ }
173
+ }
174
+ [data-element-style="Text"] {
175
+ display: inline-block;
176
+ width: 100%;
177
+ }
178
+ }
179
+ }
180
+ }
package/dist/product-actions.scss ADDED
@@ -0,0 +1,180 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ [data-div-type="element"] {
5
+ &[data-element-type="productActions"] {
6
+ width: var(--_sf-nw-wh, var(--_tst-lt-wh));
7
+ margin: var(--_ctm-lt-mn, --_tst-lt-mn);
8
+ aspect-ratio: 1 / var(--_sf-aspect-ratio);
9
+
10
+ & > .wrapper {
11
+ // width: 100%;
12
+ // height: 100%;
13
+ }
14
+
15
+ &[data-show-shadow="false"] {
16
+ --_show-shadow: none;
17
+ }
18
+ &[data-icon-position="left"] {
19
+ --_sf-fd-bn: row;
20
+ }
21
+ &[data-icon-position="right"] {
22
+ --_sf-fd-bn: row-reverse;
23
+ }
24
+ &[data-icon-position="center"] {
25
+ --_sf-fd-bn: row;
26
+ }
27
+
28
+ &:hover {
29
+ --_sf-hr-bd-cr: var(--_ctm-dn-hr-se-bd-cr, var(--_tst-dn-hr-se-bd-cr));
30
+ --_sf-hr-br-cr: var(--_ctm-dn-hr-se-br-cr, var(--_tst-dn-hr-se-br-cr));
31
+ --_sf-hr-br-st: var(--_ctm-dn-hr-se-br-se, var(--_tst-dn-hr-se-br-se));
32
+ --_sf-hr-br-wt: var(--_ctm-dn-hr-se-br-wh, var(--_tst-dn-hr-se-br-wh));
33
+ --_sf-hr-br-br: var(--_ctm-dn-hr-se-br-rs, var(--_tst-dn-hr-se-br-rs));
34
+ --_sf-hr-bx-sw: var(--_ctm-dn-hr-se-sw-ae, var(--_tst-dn-hr-se-sw-ae))
35
+ var(--_ctm-dn-hr-se-sw-br, var(--_tst-dn-hr-se-sw-br))
36
+ var(--_ctm-dn-hr-se-sw-sd, var(--_tst-dn-hr-se-sw-sd))
37
+ var(--_ctm-dn-hr-se-sw-cr, var(--_tst-dn-hr-se-sw-cr));
38
+
39
+ --_sf-hr-fc: var(--_ctm-dn-hr-se-cr, var(--_tst-dn-hr-se-cr));
40
+ --_sf-hr-ff: var(--_ctm-dn-hr-se-ft-fy, var(--_tst-dn-hr-se-ft-fy));
41
+ --_sf-hr-fs: var(--_ctm-dn-hr-se-ft-se, var(--_tst-dn-hr-se-ft-se));
42
+ --_sf-hr-fw: var(--_ctm-dn-hr-se-ft-wt, var(--_tst-dn-hr-se-ft-wt));
43
+ --_sf-hr-ft: var(--_ctm-dn-hr-se-ft-se-ic, var(--_tst-dn-hr-se-ft-se-ic));
44
+ --_sf-hr-ta: var(--_ctm-dn-hr-se-tt-an, var(--_tst-dn-hr-se-tt-an));
45
+ --_sf-hr-ls: var(--_ctm-dn-hr-se-lr-sg, var(--_tst-dn-hr-se-lr-sg));
46
+ --_sf-hr-lh: var(--_ctm-dn-hr-se-le-ht, var(--_tst-dn-hr-se-le-ht));
47
+
48
+ --_sf-hr-ic-wt: var(--_ctm-dn-hr-se-in-se, var(--_tst-dn-hr-se-in-se));
49
+ --_sf-hr-ic-ht: var(--_ctm-dn-hr-se-in-se, var(--_tst-dn-hr-se-in-se));
50
+ --_sf-hr-ic-st: var(--_ctm-dn-hr-se-in-c1, var(--_tst-dn-hr-se-in-c1));
51
+ --_sf-hr-tt-dn: var(--_ctm-dn-hr-se-ue, var(--_tst-dn-hr-se-in-c1));
52
+
53
+ &[data-hover-show-shadow="false"] {
54
+ --_hover-show-shadow: none;
55
+ }
56
+ &[data-hover-show-icon="false"] {
57
+ --_hover-show-icon: none;
58
+ }
59
+ }
60
+ &[data-show-icon="false"] {
61
+ --_show-icon: none;
62
+ }
63
+ &[data-element-style="Icon"] {
64
+ &[data-icon-position="left"] {
65
+ --_sf-jc: start;
66
+ }
67
+ &[data-icon-position="right"] {
68
+ --_sf-jc: end;
69
+ }
70
+ &[data-icon-position="center"] {
71
+ --_sf-jc: center;
72
+ }
73
+ }
74
+
75
+ .btn__with__text {
76
+ background-color: var(--_sf-hr-bd-cr, var(--_ctm-dn-dt-se-bd-cr, var(--_tst-dn-dt-se-bd-cr)));
77
+ // padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
78
+ padding: var(--_sf-element-vt-pd) var(--_sf-element-hr-pd);
79
+ display: flex;
80
+ flex-direction: var(--_sf-fd-bn);
81
+ align-items: center;
82
+ // justify-content: var(--_sf-jc, center);
83
+ justify-content: var(--_ctm-lt-tt-an, center);
84
+ gap: var(--_ctm-lt-gp, var(--_tst-lt-gp));
85
+
86
+ width: 100%;
87
+ height: 100%;
88
+
89
+ border-radius: var(--_sf-hr-br-br, var(--_ctm-dn-dt-se-br-rs, var(--s_tst-dn-dt-se-br-rs)));
90
+ box-shadow: var(
91
+ --_hover-show-shadow,
92
+ var(
93
+ --_sf-hr-bx-sw,
94
+ var(
95
+ --_show-shadow,
96
+ var(--_ctm-dn-dt-se-sw-ae, var(--_tst-dn-dt-se-sw-ae))
97
+ var(--_ctm-dn-dt-se-sw-br, var(--_tst-dn-dt-se-sw-br))
98
+ var(--_ctm-dn-dt-se-sw-sd, var(--_tst-dn-dt-se-sw-sd))
99
+ var(--_ctm-dn-dt-se-sw-cr, var(--_tst-dn-dt-se-sw-cr))
100
+ )
101
+ )
102
+ );
103
+ &[data-show-border="true"] {
104
+ border-color: var(--_sf-hr-br-cr, var(--_ctm-dn-dt-se-br-cr, var(--_tst-dn-dt-se-br-cr)));
105
+ border-style: var(--_sf-hr-br-st, var(--_ctm-dn-dt-se-br-se, var(--_tst-dn-dt-se-br-se)));
106
+ border-width: var(--_sf-hr-br-wt, var(--_ctm-dn-dt-se-br-wh, var(--_tst-dn-dt-se-br-wh)));
107
+ }
108
+ // &.btn__with__text__icon {
109
+ // justify-content: center;
110
+ // // gap: 10px;
111
+ // }
112
+ // & > span {
113
+ // align-items: center;
114
+ // justify-content: center;
115
+ // &.txt {
116
+ // display: flex;
117
+ // color: var(--_sf-hr-fc, var(--_ctm-dn-dt-se-cr, var(--_tst-dn-dt-se-cr)));
118
+ // font-family: var(--_sf-hr-ff, var(--_ctm-dn-dt-se-ft-fy, var(--_tst-dn-dt-se-ft-fy))),
119
+ // sans-serif;
120
+ // font-size: var(--_sf-hr-fs, var(--_ctm-dn-dt-se-ft-se, var(--_tst-dn-dt-se-ft-se)));
121
+ // font-weight: var(--_sf-hr-fw, var(--_ctm-dn-dt-se-ft-wt, var(--_tst-dn-dt-se-ft-wt)));
122
+ // font-style: var(
123
+ // --_sf-hr-ft,
124
+ // var(--_ctm-dn-dt-se-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic))
125
+ // );
126
+ // text-align: var(--_sf-hr-ta, var(--_ctm-dn-dt-se-tt-an, var(--_tst-dn-dt-se-tt-an)));
127
+ // letter-spacing: var(--_sf-hr-ls, var(--_ctm-dn-dt-se-lr-sg, var(--_tst-dn-dt-se-lr-sg)));
128
+ // line-height: var(--_sf-hr-lh, var(--_ctm-dn-dt-se-le-ht, var(--_tst-dn-dt-se-le-ht)));
129
+ // text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
130
+ // // --_sf-hr-tt-dn: var(--_ctm-dn-hr-se-ue, var(--_tst-dn-hr-se-in-c1));
131
+ // }
132
+
133
+ // &.icon {
134
+ // display: var(--_hover-show-icon, var(--_show-icon, flex));
135
+ // svg {
136
+ // width: var(--_sf-hr-ic-wt, var(--_ctm-dn-dt-se-in-se, var(--_tst-dn-dt-se-in-se)));
137
+ // height: var(--_sf-hr-ic-ht, var(--_ctm-dn-dt-se-in-se, var(--_tst-dn-dt-se-in-se)));
138
+ // path {
139
+ // stroke: var(--_sf-hr-ic-st, var(--_ctm-dn-dt-se-in-c1, var(--_tst-dn-dt-se-in-c1)));
140
+ // }
141
+ // }
142
+ // }
143
+ // &[data-element-style="Text"] {
144
+ // display: inline-block;
145
+ // width: 100%;
146
+ // }
147
+ // }
148
+
149
+ .txt {
150
+ display: flex;
151
+ color: var(--_sf-hr-fc, var(--_ctm-dn-dt-se-cr, var(--_tst-dn-dt-se-cr)));
152
+ font-family: var(--_sf-hr-ff, var(--_ctm-dn-dt-se-ft-fy, var(--_tst-dn-dt-se-ft-fy))),
153
+ sans-serif;
154
+ font-size: var(--_sf-hr-fs, var(--_ctm-dn-dt-se-ft-se, var(--_tst-dn-dt-se-ft-se)));
155
+ font-weight: var(--_sf-hr-fw, var(--_ctm-dn-dt-se-ft-wt, var(--_tst-dn-dt-se-ft-wt)));
156
+ font-style: var(--_sf-hr-ft, var(--_ctm-dn-dt-se-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic)));
157
+ text-align: var(--_sf-hr-ta, var(--_ctm-dn-dt-se-tt-an, var(--_tst-dn-dt-se-tt-an)));
158
+ letter-spacing: var(--_sf-hr-ls, var(--_ctm-dn-dt-se-lr-sg, var(--_tst-dn-dt-se-lr-sg)));
159
+ line-height: var(--_sf-hr-lh, var(--_ctm-dn-dt-se-le-ht, var(--_tst-dn-dt-se-le-ht)));
160
+ text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
161
+ // --_sf-hr-tt-dn: var(--_ctm-dn-hr-se-ue, var(--_tst-dn-hr-se-in-c1));
162
+ }
163
+
164
+ .icon {
165
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
166
+ svg {
167
+ width: var(--_sf-hr-ic-wt, var(--_ctm-dn-dt-se-in-se, var(--_tst-dn-dt-se-in-se)));
168
+ height: var(--_sf-hr-ic-ht, var(--_ctm-dn-dt-se-in-se, var(--_tst-dn-dt-se-in-se)));
169
+ path {
170
+ stroke: var(--_sf-hr-ic-st, var(--_ctm-dn-dt-se-in-c1, var(--_tst-dn-dt-se-in-c1)));
171
+ }
172
+ }
173
+ }
174
+ [data-element-style="Text"] {
175
+ display: inline-block;
176
+ width: 100%;
177
+ }
178
+ }
179
+ }
180
+ }
package/dist/product-inventory.scss ADDED
@@ -0,0 +1,180 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ [data-div-type="element"] {
5
+ &[data-element-type="productInventory"] {
6
+ width: var(--_sf-nw-wh, var(--_tst-lt-wh));
7
+ margin: var(--_ctm-lt-mn, --_tst-lt-mn);
8
+ aspect-ratio: 1 / var(--_sf-aspect-ratio);
9
+
10
+ & > .wrapper {
11
+ // width: 100%;
12
+ // height: 100%;
13
+ }
14
+
15
+ &[data-show-shadow="false"] {
16
+ --_show-shadow: none;
17
+ }
18
+ &[data-icon-position="left"] {
19
+ --_sf-fd-bn: row;
20
+ }
21
+ &[data-icon-position="right"] {
22
+ --_sf-fd-bn: row-reverse;
23
+ }
24
+ &[data-icon-position="center"] {
25
+ --_sf-fd-bn: row;
26
+ }
27
+
28
+ &:hover {
29
+ --_sf-hr-bd-cr: var(--_ctm-dn-hr-se-bd-cr, var(--_tst-dn-hr-se-bd-cr));
30
+ --_sf-hr-br-cr: var(--_ctm-dn-hr-se-br-cr, var(--_tst-dn-hr-se-br-cr));
31
+ --_sf-hr-br-st: var(--_ctm-dn-hr-se-br-se, var(--_tst-dn-hr-se-br-se));
32
+ --_sf-hr-br-wt: var(--_ctm-dn-hr-se-br-wh, var(--_tst-dn-hr-se-br-wh));
33
+ --_sf-hr-br-br: var(--_ctm-dn-hr-se-br-rs, var(--_tst-dn-hr-se-br-rs));
34
+ --_sf-hr-bx-sw: var(--_ctm-dn-hr-se-sw-ae, var(--_tst-dn-hr-se-sw-ae))
35
+ var(--_ctm-dn-hr-se-sw-br, var(--_tst-dn-hr-se-sw-br))
36
+ var(--_ctm-dn-hr-se-sw-sd, var(--_tst-dn-hr-se-sw-sd))
37
+ var(--_ctm-dn-hr-se-sw-cr, var(--_tst-dn-hr-se-sw-cr));
38
+
39
+ --_sf-hr-fc: var(--_ctm-dn-hr-se-cr, var(--_tst-dn-hr-se-cr));
40
+ --_sf-hr-ff: var(--_ctm-dn-hr-se-ft-fy, var(--_tst-dn-hr-se-ft-fy));
41
+ --_sf-hr-fs: var(--_ctm-dn-hr-se-ft-se, var(--_tst-dn-hr-se-ft-se));
42
+ --_sf-hr-fw: var(--_ctm-dn-hr-se-ft-wt, var(--_tst-dn-hr-se-ft-wt));
43
+ --_sf-hr-ft: var(--_ctm-dn-hr-se-ft-se-ic, var(--_tst-dn-hr-se-ft-se-ic));
44
+ --_sf-hr-ta: var(--_ctm-dn-hr-se-tt-an, var(--_tst-dn-hr-se-tt-an));
45
+ --_sf-hr-ls: var(--_ctm-dn-hr-se-lr-sg, var(--_tst-dn-hr-se-lr-sg));
46
+ --_sf-hr-lh: var(--_ctm-dn-hr-se-le-ht, var(--_tst-dn-hr-se-le-ht));
47
+
48
+ --_sf-hr-ic-wt: var(--_ctm-dn-hr-se-in-se, var(--_tst-dn-hr-se-in-se));
49
+ --_sf-hr-ic-ht: var(--_ctm-dn-hr-se-in-se, var(--_tst-dn-hr-se-in-se));
50
+ --_sf-hr-ic-st: var(--_ctm-dn-hr-se-in-c1, var(--_tst-dn-hr-se-in-c1));
51
+ --_sf-hr-tt-dn: var(--_ctm-dn-hr-se-ue, var(--_tst-dn-hr-se-in-c1));
52
+
53
+ &[data-hover-show-shadow="false"] {
54
+ --_hover-show-shadow: none;
55
+ }
56
+ &[data-hover-show-icon="false"] {
57
+ --_hover-show-icon: none;
58
+ }
59
+ }
60
+ &[data-show-icon="false"] {
61
+ --_show-icon: none;
62
+ }
63
+ &[data-element-style="Icon"] {
64
+ &[data-icon-position="left"] {
65
+ --_sf-jc: start;
66
+ }
67
+ &[data-icon-position="right"] {
68
+ --_sf-jc: end;
69
+ }
70
+ &[data-icon-position="center"] {
71
+ --_sf-jc: center;
72
+ }
73
+ }
74
+
75
+ .btn__with__text {
76
+ background-color: var(--_sf-hr-bd-cr, var(--_ctm-dn-dt-se-bd-cr, var(--_tst-dn-dt-se-bd-cr)));
77
+ // padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
78
+ padding: var(--_sf-element-vt-pd) var(--_sf-element-hr-pd);
79
+ display: flex;
80
+ flex-direction: var(--_sf-fd-bn);
81
+ align-items: center;
82
+ // justify-content: var(--_sf-jc, center);
83
+ justify-content: var(--_ctm-lt-tt-an, center);
84
+ gap: var(--_ctm-lt-gp, var(--_tst-lt-gp));
85
+
86
+ width: 100%;
87
+ height: 100%;
88
+
89
+ border-radius: var(--_sf-hr-br-br, var(--_ctm-dn-dt-se-br-rs, var(--s_tst-dn-dt-se-br-rs)));
90
+ box-shadow: var(
91
+ --_hover-show-shadow,
92
+ var(
93
+ --_sf-hr-bx-sw,
94
+ var(
95
+ --_show-shadow,
96
+ var(--_ctm-dn-dt-se-sw-ae, var(--_tst-dn-dt-se-sw-ae))
97
+ var(--_ctm-dn-dt-se-sw-br, var(--_tst-dn-dt-se-sw-br))
98
+ var(--_ctm-dn-dt-se-sw-sd, var(--_tst-dn-dt-se-sw-sd))
99
+ var(--_ctm-dn-dt-se-sw-cr, var(--_tst-dn-dt-se-sw-cr))
100
+ )
101
+ )
102
+ );
103
+ &[data-show-border="true"] {
104
+ border-color: var(--_sf-hr-br-cr, var(--_ctm-dn-dt-se-br-cr, var(--_tst-dn-dt-se-br-cr)));
105
+ border-style: var(--_sf-hr-br-st, var(--_ctm-dn-dt-se-br-se, var(--_tst-dn-dt-se-br-se)));
106
+ border-width: var(--_sf-hr-br-wt, var(--_ctm-dn-dt-se-br-wh, var(--_tst-dn-dt-se-br-wh)));
107
+ }
108
+ // &.btn__with__text__icon {
109
+ // justify-content: center;
110
+ // // gap: 10px;
111
+ // }
112
+ // & > span {
113
+ // align-items: center;
114
+ // justify-content: center;
115
+ // &.txt {
116
+ // display: flex;
117
+ // color: var(--_sf-hr-fc, var(--_ctm-dn-dt-se-cr, var(--_tst-dn-dt-se-cr)));
118
+ // font-family: var(--_sf-hr-ff, var(--_ctm-dn-dt-se-ft-fy, var(--_tst-dn-dt-se-ft-fy))),
119
+ // sans-serif;
120
+ // font-size: var(--_sf-hr-fs, var(--_ctm-dn-dt-se-ft-se, var(--_tst-dn-dt-se-ft-se)));
121
+ // font-weight: var(--_sf-hr-fw, var(--_ctm-dn-dt-se-ft-wt, var(--_tst-dn-dt-se-ft-wt)));
122
+ // font-style: var(
123
+ // --_sf-hr-ft,
124
+ // var(--_ctm-dn-dt-se-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic))
125
+ // );
126
+ // text-align: var(--_sf-hr-ta, var(--_ctm-dn-dt-se-tt-an, var(--_tst-dn-dt-se-tt-an)));
127
+ // letter-spacing: var(--_sf-hr-ls, var(--_ctm-dn-dt-se-lr-sg, var(--_tst-dn-dt-se-lr-sg)));
128
+ // line-height: var(--_sf-hr-lh, var(--_ctm-dn-dt-se-le-ht, var(--_tst-dn-dt-se-le-ht)));
129
+ // text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
130
+ // // --_sf-hr-tt-dn: var(--_ctm-dn-hr-se-ue, var(--_tst-dn-hr-se-in-c1));
131
+ // }
132
+
133
+ // &.icon {
134
+ // display: var(--_hover-show-icon, var(--_show-icon, flex));
135
+ // svg {
136
+ // width: var(--_sf-hr-ic-wt, var(--_ctm-dn-dt-se-in-se, var(--_tst-dn-dt-se-in-se)));
137
+ // height: var(--_sf-hr-ic-ht, var(--_ctm-dn-dt-se-in-se, var(--_tst-dn-dt-se-in-se)));
138
+ // path {
139
+ // stroke: var(--_sf-hr-ic-st, var(--_ctm-dn-dt-se-in-c1, var(--_tst-dn-dt-se-in-c1)));
140
+ // }
141
+ // }
142
+ // }
143
+ // &[data-element-style="Text"] {
144
+ // display: inline-block;
145
+ // width: 100%;
146
+ // }
147
+ // }
148
+
149
+ .txt {
150
+ display: flex;
151
+ color: var(--_sf-hr-fc, var(--_ctm-dn-dt-se-cr, var(--_tst-dn-dt-se-cr)));
152
+ font-family: var(--_sf-hr-ff, var(--_ctm-dn-dt-se-ft-fy, var(--_tst-dn-dt-se-ft-fy))),
153
+ sans-serif;
154
+ font-size: var(--_sf-hr-fs, var(--_ctm-dn-dt-se-ft-se, var(--_tst-dn-dt-se-ft-se)));
155
+ font-weight: var(--_sf-hr-fw, var(--_ctm-dn-dt-se-ft-wt, var(--_tst-dn-dt-se-ft-wt)));
156
+ font-style: var(--_sf-hr-ft, var(--_ctm-dn-dt-se-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic)));
157
+ text-align: var(--_sf-hr-ta, var(--_ctm-dn-dt-se-tt-an, var(--_tst-dn-dt-se-tt-an)));
158
+ letter-spacing: var(--_sf-hr-ls, var(--_ctm-dn-dt-se-lr-sg, var(--_tst-dn-dt-se-lr-sg)));
159
+ line-height: var(--_sf-hr-lh, var(--_ctm-dn-dt-se-le-ht, var(--_tst-dn-dt-se-le-ht)));
160
+ text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
161
+ // --_sf-hr-tt-dn: var(--_ctm-dn-hr-se-ue, var(--_tst-dn-hr-se-in-c1));
162
+ }
163
+
164
+ .icon {
165
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
166
+ svg {
167
+ width: var(--_sf-hr-ic-wt, var(--_ctm-dn-dt-se-in-se, var(--_tst-dn-dt-se-in-se)));
168
+ height: var(--_sf-hr-ic-ht, var(--_ctm-dn-dt-se-in-se, var(--_tst-dn-dt-se-in-se)));
169
+ path {
170
+ stroke: var(--_sf-hr-ic-st, var(--_ctm-dn-dt-se-in-c1, var(--_tst-dn-dt-se-in-c1)));
171
+ }
172
+ }
173
+ }
174
+ [data-element-style="Text"] {
175
+ display: inline-block;
176
+ width: 100%;
177
+ }
178
+ }
179
+ }
180
+ }
package/dist/product-price.scss ADDED
@@ -0,0 +1,61 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ [data-div-type="element"] {
5
+ &[data-element-type="productPrice"] {
6
+ // width: var(--_lt-wh);
7
+ // height: var(--_lt-ht);
8
+ // margin: var(--_lt-mn);
9
+ // padding: var(--_lt-pg);
10
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
11
+ width: var(--_sf-nw-wh, var(--_tst-lt-wh));
12
+ margin: var(--_ctm-lt-mn, --_tst-lt-mn);
13
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
14
+ // height: ;
15
+ aspect-ratio: 1 / var(--_sf-aspect-ratio);
16
+ --_aspect-ratio: calc(
17
+ 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
18
+ );
19
+
20
+ & > .wrapper {
21
+ width: 100%;
22
+ // height: 100%;
23
+ }
24
+ &[data-show-shadow="false"] {
25
+ --_show-shadow: none;
26
+ }
27
+
28
+ .text-element {
29
+ background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
30
+ padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
31
+ display: flex;
32
+ flex-direction: column;
33
+ --_sf-gp: 16px;
34
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
35
+ row-gap: var(--_sf-gp);
36
+ width: 100%;
37
+ // height: 100%;
38
+ border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
39
+ border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
40
+ border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
41
+ border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
42
+ box-shadow: var(
43
+ --_show-shadow,
44
+ var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
45
+ var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
46
+ );
47
+
48
+ // transform: scale(var(--_ctm-dn-zm-ie));
49
+ scale: var(--_ctm-dn-zm-ie);
50
+ &[data-flip-x="true"] {
51
+ transform: scaleX(-1);
52
+ }
53
+ &[data-flip-y="true"] {
54
+ transform: scaleY(-1);
55
+ }
56
+ .include_all_taxes{
57
+ color: green;
58
+ }
59
+ }
60
+ }
61
+ }