@sc-360-v2/storefront-cms-library 0.1.8 → 0.1.9

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/App.scss +31 -0
  2. package/dist/amount-estimator.scss +28 -0
  3. package/dist/builder.js +1 -1
  4. package/dist/bulk-variant-picker.scss +28 -0
  5. package/dist/button.scss +4 -2
  6. package/dist/code-temp.scss +2 -1
  7. package/dist/countdown.scss +2 -1
  8. package/dist/editor-core.scss +66 -8
  9. package/dist/embed-temp.scss +2 -1
  10. package/dist/faq.scss +7 -1
  11. package/dist/gallery-slider-temp.scss +230 -66
  12. package/dist/global.scss +342 -0
  13. package/dist/hotspot.scss +2 -1
  14. package/dist/icons.js +1 -1
  15. package/dist/image-temp.scss +2 -1
  16. package/dist/index.js +1 -1
  17. package/dist/map.scss +2 -1
  18. package/dist/mixin.scss +9 -0
  19. package/dist/payment-methods.scss +57 -0
  20. package/dist/pickup-locations.scss +10 -162
  21. package/dist/product-actions.scss +3 -1
  22. package/dist/product-basic-elements.scss +329 -0
  23. package/dist/product-highlights.scss +28 -0
  24. package/dist/product-image.scss +572 -0
  25. package/dist/product-inventory.scss +10 -159
  26. package/dist/product-price.scss +11 -3
  27. package/dist/product-promotions.scss +45 -0
  28. package/dist/quantity-selector.scss +265 -0
  29. package/dist/range-slider.module.scss +85 -0
  30. package/dist/scroll.scss +2 -1
  31. package/dist/shipping-estimator.scss +29 -0
  32. package/dist/social.scss +2 -1
  33. package/dist/store-locations.scss +13 -162
  34. package/dist/table.scss +2 -1
  35. package/dist/text-temp.scss +2 -1
  36. package/dist/types/builder/elements/product-image/index.d.ts +30 -0
  37. package/dist/types/builder/index.d.ts +2 -1
  38. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  39. package/dist/types/builder/tools/element-edit/product-image.d.ts +112 -0
  40. package/dist/uom-selector.scss +28 -0
  41. package/dist/variable.scss +128 -0
  42. package/dist/variant-picker.scss +28 -0
  43. package/dist/video.scss +4 -2
  44. package/dist/volume-pricing.scss +18 -0
  45. package/package.json +1 -1
package/dist/map.scss CHANGED
@@ -7,7 +7,8 @@
7
7
  // height: var(--_lt-ht);
8
8
  // margin: var(--_lt-mn);
9
9
  // padding: var(--_lt-pg);
10
- width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
10
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
11
+ width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
11
12
  // width: 50%;
12
13
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
13
14
  margin: var(--_ctm-lt-mn, --_tst-lt-mn);
package/dist/mixin.scss ADDED
@@ -0,0 +1,9 @@
1
+ // mixins
2
+
3
+ @mixin status($border-color, $bg-color, $text-color) {
4
+ border: 1px solid $border-color;
5
+ background-color: $bg-color;
6
+ color: $text-color;
7
+ border-radius: var(--_br-6);
8
+ padding: var(--_pd-2) var(--_pd-10) var(--_pd-4) var(--_pd-10);
9
+ }
package/dist/payment-methods.scss ADDED
@@ -0,0 +1,57 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ [data-div-type="element"] {
5
+ &[data-element-type="paymentMethods"] {
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
+ .payment-methods__container {
28
+ display: flex;
29
+ flex-direction: column;
30
+ align-items: center;
31
+
32
+ h2 {
33
+ font-size: 1.5rem;
34
+ margin-bottom: 1rem;
35
+ }
36
+
37
+ .payment-method {
38
+ display: flex;
39
+ flex-direction: column;
40
+ align-items: center;
41
+ margin: 0.5rem;
42
+
43
+ img {
44
+ width: 50px;
45
+ height: auto;
46
+ margin-bottom: 0.5rem;
47
+ object-fit: contain;
48
+ }
49
+
50
+ .payment-title {
51
+ font-size: 0.9rem;
52
+ text-align: center;
53
+ }
54
+ }
55
+ }
56
+ }
57
+ }
package/dist/pickup-locations.scss CHANGED
@@ -8,173 +8,21 @@
8
8
  aspect-ratio: 1 / var(--_sf-aspect-ratio);
9
9
 
10
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
- }
11
+ width: 100%;
73
12
  }
74
13
 
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
-
14
+ table {
15
+ font-family: arial, sans-serif;
16
+ border-collapse: collapse;
86
17
  width: 100%;
87
18
  height: 100%;
19
+ }
88
20
 
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
- }
21
+ td,
22
+ th {
23
+ border: 1px solid #dddddd;
24
+ text-align: center;
25
+ padding: 8px;
178
26
  }
179
27
  }
180
28
  }
package/dist/product-actions.scss CHANGED
@@ -73,7 +73,9 @@
73
73
  }
74
74
 
75
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)));
76
+ // background-color: var(--_sf-hr-bd-cr, var(--_ctm-dn-dt-se-bd-cr, var(--_tst-dn-dt-se-bd-cr)));
77
+ background-color: #000;
78
+ color: #fff;
77
79
  // padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
78
80
  padding: var(--_sf-element-vt-pd) var(--_sf-element-hr-pd);
79
81
  display: flex;
package/dist/product-basic-elements.scss ADDED
@@ -0,0 +1,329 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ [data-div-type="element"] {
5
+ &[data-element-type="productName"] {
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
+ width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
13
+ margin: var(--_ctm-lt-mn, --_tst-lt-mn);
14
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
15
+ // height: ;
16
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
17
+ // --_aspect-ratio: calc(
18
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
19
+ // );
20
+
21
+ & > .wrapper {
22
+ width: 100%;
23
+ // height: 100%;
24
+ }
25
+ &[data-show-shadow="false"] {
26
+ --_show-shadow: none;
27
+ }
28
+
29
+ .text-element {
30
+ background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
31
+ padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
32
+ display: flex;
33
+ flex-direction: column;
34
+ --_sf-gp: 16px;
35
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
36
+ row-gap: var(--_sf-gp);
37
+ width: 100%;
38
+ // height: 100%;
39
+ border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
40
+ border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
41
+ border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
42
+ border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
43
+ box-shadow: var(
44
+ --_show-shadow,
45
+ var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
46
+ var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
47
+ );
48
+
49
+ // transform: scale(var(--_ctm-dn-zm-ie));
50
+ scale: var(--_ctm-dn-zm-ie);
51
+ &[data-flip-x="true"] {
52
+ transform: scaleX(-1);
53
+ }
54
+ &[data-flip-y="true"] {
55
+ transform: scaleY(-1);
56
+ }
57
+ }
58
+ }
59
+ &[data-element-type="productDescription"] {
60
+ // width: var(--_lt-wh);
61
+ // height: var(--_lt-ht);
62
+ // margin: var(--_lt-mn);
63
+ // padding: var(--_lt-pg);
64
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
65
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
66
+ width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
67
+ margin: var(--_ctm-lt-mn, --_tst-lt-mn);
68
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
69
+ // height: ;
70
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
71
+ // --_aspect-ratio: calc(
72
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
73
+ // );
74
+
75
+ & > .wrapper {
76
+ width: 100%;
77
+ // height: 100%;
78
+ }
79
+ &[data-show-shadow="false"] {
80
+ --_show-shadow: none;
81
+ }
82
+
83
+ .text-element {
84
+ background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
85
+ padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
86
+ display: flex;
87
+ flex-direction: column;
88
+ --_sf-gp: 16px;
89
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
90
+ row-gap: var(--_sf-gp);
91
+ width: 100%;
92
+ // height: 100%;
93
+ border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
94
+ border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
95
+ border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
96
+ border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
97
+ box-shadow: var(
98
+ --_show-shadow,
99
+ var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
100
+ var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
101
+ );
102
+
103
+ // transform: scale(var(--_ctm-dn-zm-ie));
104
+ scale: var(--_ctm-dn-zm-ie);
105
+ &[data-flip-x="true"] {
106
+ transform: scaleX(-1);
107
+ }
108
+ &[data-flip-y="true"] {
109
+ transform: scaleY(-1);
110
+ }
111
+ }
112
+ }
113
+ &[data-element-type="productBrand"] {
114
+ // width: var(--_lt-wh);
115
+ // height: var(--_lt-ht);
116
+ // margin: var(--_lt-mn);
117
+ // padding: var(--_lt-pg);
118
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
119
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
120
+ width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
121
+ margin: var(--_ctm-lt-mn, --_tst-lt-mn);
122
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
123
+ // height: ;
124
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
125
+ // --_aspect-ratio: calc(
126
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
127
+ // );
128
+
129
+ & > .wrapper {
130
+ width: 100%;
131
+ // height: 100%;
132
+ }
133
+ &[data-show-shadow="false"] {
134
+ --_show-shadow: none;
135
+ }
136
+
137
+ .text-element {
138
+ background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
139
+ padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
140
+ display: flex;
141
+ flex-direction: column;
142
+ --_sf-gp: 16px;
143
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
144
+ row-gap: var(--_sf-gp);
145
+ width: 100%;
146
+ // height: 100%;
147
+ border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
148
+ border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
149
+ border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
150
+ border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
151
+ box-shadow: var(
152
+ --_show-shadow,
153
+ var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
154
+ var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
155
+ );
156
+
157
+ // transform: scale(var(--_ctm-dn-zm-ie));
158
+ scale: var(--_ctm-dn-zm-ie);
159
+ &[data-flip-x="true"] {
160
+ transform: scaleX(-1);
161
+ }
162
+ &[data-flip-y="true"] {
163
+ transform: scaleY(-1);
164
+ }
165
+ }
166
+ }
167
+ &[data-element-type="productCode"] {
168
+ // width: var(--_lt-wh);
169
+ // height: var(--_lt-ht);
170
+ // margin: var(--_lt-mn);
171
+ // padding: var(--_lt-pg);
172
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
173
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
174
+ width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
175
+ margin: var(--_ctm-lt-mn, --_tst-lt-mn);
176
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
177
+ // height: ;
178
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
179
+ // --_aspect-ratio: calc(
180
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
181
+ // );
182
+
183
+ & > .wrapper {
184
+ width: 100%;
185
+ // height: 100%;
186
+ }
187
+ &[data-show-shadow="false"] {
188
+ --_show-shadow: none;
189
+ }
190
+
191
+ .text-element {
192
+ background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
193
+ padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
194
+ display: flex;
195
+ flex-direction: column;
196
+ --_sf-gp: 16px;
197
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
198
+ row-gap: var(--_sf-gp);
199
+ width: 100%;
200
+ // height: 100%;
201
+ border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
202
+ border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
203
+ border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
204
+ border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
205
+ box-shadow: var(
206
+ --_show-shadow,
207
+ var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
208
+ var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
209
+ );
210
+
211
+ // transform: scale(var(--_ctm-dn-zm-ie));
212
+ scale: var(--_ctm-dn-zm-ie);
213
+ &[data-flip-x="true"] {
214
+ transform: scaleX(-1);
215
+ }
216
+ &[data-flip-y="true"] {
217
+ transform: scaleY(-1);
218
+ }
219
+ }
220
+ }
221
+ &[data-element-type="productReview"] {
222
+ // width: var(--_lt-wh);
223
+ // height: var(--_lt-ht);
224
+ // margin: var(--_lt-mn);
225
+ // padding: var(--_lt-pg);
226
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
227
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
228
+ width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
229
+ margin: var(--_ctm-lt-mn, --_tst-lt-mn);
230
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
231
+ // height: ;
232
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
233
+ // --_aspect-ratio: calc(
234
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
235
+ // );
236
+
237
+ & > .wrapper {
238
+ width: 100%;
239
+ // height: 100%;
240
+ }
241
+ &[data-show-shadow="false"] {
242
+ --_show-shadow: none;
243
+ }
244
+
245
+ .text-element {
246
+ background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
247
+ padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
248
+ display: flex;
249
+ flex-direction: column;
250
+ --_sf-gp: 16px;
251
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
252
+ row-gap: var(--_sf-gp);
253
+ width: 100%;
254
+ // height: 100%;
255
+ border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
256
+ border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
257
+ border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
258
+ border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
259
+ box-shadow: var(
260
+ --_show-shadow,
261
+ var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
262
+ var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
263
+ );
264
+
265
+ // transform: scale(var(--_ctm-dn-zm-ie));
266
+ scale: var(--_ctm-dn-zm-ie);
267
+ &[data-flip-x="true"] {
268
+ transform: scaleX(-1);
269
+ }
270
+ &[data-flip-y="true"] {
271
+ transform: scaleY(-1);
272
+ }
273
+ }
274
+ }
275
+ &[data-element-type="productRating"] {
276
+ // width: var(--_lt-wh);
277
+ // height: var(--_lt-ht);
278
+ // margin: var(--_lt-mn);
279
+ // padding: var(--_lt-pg);
280
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
281
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
282
+ width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
283
+ margin: var(--_ctm-lt-mn, --_tst-lt-mn);
284
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
285
+ // height: ;
286
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
287
+ // --_aspect-ratio: calc(
288
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
289
+ // );
290
+
291
+ & > .wrapper {
292
+ width: 100%;
293
+ // height: 100%;
294
+ }
295
+ &[data-show-shadow="false"] {
296
+ --_show-shadow: none;
297
+ }
298
+
299
+ .text-element {
300
+ background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
301
+ padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
302
+ display: flex;
303
+ flex-direction: column;
304
+ --_sf-gp: 16px;
305
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
306
+ row-gap: var(--_sf-gp);
307
+ width: 100%;
308
+ // height: 100%;
309
+ border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
310
+ border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
311
+ border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
312
+ border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
313
+ box-shadow: var(
314
+ --_show-shadow,
315
+ var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
316
+ var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
317
+ );
318
+
319
+ // transform: scale(var(--_ctm-dn-zm-ie));
320
+ scale: var(--_ctm-dn-zm-ie);
321
+ &[data-flip-x="true"] {
322
+ transform: scaleX(-1);
323
+ }
324
+ &[data-flip-y="true"] {
325
+ transform: scaleY(-1);
326
+ }
327
+ }
328
+ }
329
+ }
package/dist/product-highlights.scss ADDED
@@ -0,0 +1,28 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ [data-div-type="element"] {
5
+ &[data-element-type="productHighlights"] {
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
+ }