@sc-360-v2/storefront-cms-library 0.3.45 → 0.3.47

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.
@@ -0,0 +1,265 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ [data-div-type="element"] {
5
+ &[data-element-type="quotaDetails"] {
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: 50%;
12
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
13
+ width: var(
14
+ --_sf-el-wh-st-mx,
15
+ calc(
16
+ 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
17
+ )
18
+ );
19
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
20
+ aspect-ratio: 1 / var(--_sf-aspect-ratio);
21
+
22
+ --_aspect-ratio: calc(
23
+ 1 *
24
+ (
25
+ var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
26
+ var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
27
+ )
28
+ );
29
+ // height: clamp(var(--_ctm-lt-ht, 50px), 100px, auto) !important;
30
+ // height: var(--_ctm-lt-ht);
31
+ // height: ;
32
+ // height: auto;
33
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
34
+ // --_aspect-ratio: calc(
35
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
36
+ // );
37
+
38
+ // &[data-element-sub-child="true"] {
39
+ // // width: max(var(--_sf-nw-wh, var(--_tst-lt-wh)));
40
+ // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
41
+ // }
42
+
43
+ & > .wrapper {
44
+ width: 100%;
45
+ height: 100%;
46
+ }
47
+ &[data-show-shadow="false"] {
48
+ --_show-shadow: none;
49
+ }
50
+
51
+ .quota__details__element {
52
+ background-color: var(
53
+ --_ctm-mob-dn-wt-se-bd-cr,
54
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
55
+ );
56
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
57
+ display: flex;
58
+ flex-direction: column;
59
+ --_sf-gp: var(
60
+ --_ctm-mob-lt-im-sg,
61
+ var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
62
+ );
63
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
64
+ row-gap: var(--_sf-gp);
65
+ width: 100%;
66
+ height: 100%;
67
+ border-color: var(
68
+ --_ctm-mob-dn-wt-se-br-cr,
69
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
70
+ );
71
+ border-style: var(
72
+ --_ctm-mob-dn-wt-se-br-se,
73
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
74
+ );
75
+ border-width: var(
76
+ --_ctm-mob-dn-wt-se-br-wh,
77
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
78
+ );
79
+ border-radius: var(
80
+ --_ctm-mob-dn-wt-se-br-rs,
81
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
82
+ );
83
+ box-shadow: var(
84
+ --_show-shadow,
85
+ var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
86
+ var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
87
+ var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
88
+ var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
89
+ );
90
+
91
+ .product__hilights {
92
+ display: flex;
93
+ align-items: var(--_ctm-mob-lt-wt-at, var(--_ctm-tab-lt-wt-at, var(--_ctm-lt-wt-at)));
94
+ justify-content: var(--_ctm-mob-lt-hl-at, var(--_ctm-tab-lt-hl-at, var(--_ctm-lt-hl-at)));
95
+ gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
96
+ width: 100%;
97
+
98
+ height: 100%;
99
+
100
+ &[data-show-dividers="true"] {
101
+ .product__list__item {
102
+ position: relative;
103
+ &:not(:last-child)::after {
104
+ content: "";
105
+ width: var(
106
+ --_ctm-mob-dn-dr-dr-wh,
107
+ var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh))
108
+ );
109
+ height: 100%;
110
+ position: absolute;
111
+ right: calc(
112
+ (
113
+ -1 * var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) /
114
+ 2
115
+ ) -
116
+ (
117
+ var(
118
+ --_ctm-mob-dn-dr-dr-wh,
119
+ var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh))
120
+ ) /
121
+ 2
122
+ )
123
+ );
124
+ background-color: var(
125
+ --_ctm-mob-dn-dr-dr-cr,
126
+ var(--_ctm-tab-dn-dr-dr-cr, var(--_ctm-dn-dr-dr-cr))
127
+ );
128
+ }
129
+ }
130
+ }
131
+ .product__list__item {
132
+ display: flex;
133
+ align-items: center;
134
+ gap: 4px;
135
+
136
+ .svg_icon {
137
+ display: flex;
138
+ }
139
+ }
140
+ .quota__left {
141
+ .count {
142
+ // padding-inline: var(--_sf-cd-gp);
143
+ color: var(
144
+ --_ctm-mob-dn-qa-lt-cr,
145
+ var(--_ctm-tab-dn-qa-lt-cr, var(--_ctm-dn-qa-lt-cr))
146
+ );
147
+ font-family: var(
148
+ --_ctm-mob-dn-qa-lt-ft-fy,
149
+ var(--_ctm-tab-dn-qa-lt-ft-fy, var(--_ctm-dn-qa-lt-ft-fy))
150
+ ),
151
+ sans-serif;
152
+ font-size: var(
153
+ --_ctm-mob-dn-qa-lt-ft-se,
154
+ var(--_ctm-tab-dn-qa-lt-ft-se, var(--_ctm-dn-qa-lt-ft-se))
155
+ );
156
+ font-weight: var(
157
+ --_ctm-mob-dn-qa-lt-ft-wt,
158
+ var(--_ctm-tab-dn-qa-lt-ft-wt, var(--_ctm-dn-qa-lt-ft-wt))
159
+ );
160
+ font-style: var(
161
+ --_ctm-mob-dn-qa-lt-ft-se-ic,
162
+ var(--_ctm-tab-dn-qa-lt-ft-se-ic, var(--_ctm-dn-qa-lt-ft-se-ic))
163
+ );
164
+ text-align: var(
165
+ --_ctm-mob-dn-qa-lt-tt-an,
166
+ var(--_ctm-tab-dn-qa-lt-tt-an, var(--_ctm-dn-qa-lt-tt-an))
167
+ );
168
+ letter-spacing: var(
169
+ --_ctm-mob-dn-qa-lt-lr-sg,
170
+ var(--_ctm-tab-dn-qa-lt-lr-sg, var(--_ctm-dn-qa-lt-lr-sg))
171
+ );
172
+ line-height: var(
173
+ --_ctm-mob-dn-qa-lt-le-ht,
174
+ var(--_ctm-tab-dn-qa-lt-le-ht, var(--_ctm-dn-qa-lt-le-ht-dc))
175
+ );
176
+ text-decoration: var(
177
+ --_ctm-mob-dn-qa-lt-ue,
178
+ var(--_ctm-tab-dn-qa-lt-ue, var(--_ctm-dn-qa-lt-ue))
179
+ );
180
+ }
181
+ .icon {
182
+ display: var(--_sf-show-icon-ff, flex);
183
+ svg {
184
+ width: var(
185
+ --_ctm-mab-dn-qa-lt-in-se,
186
+ var(--_ctm-tab-dn-qa-lt-in-se, var(--_ctm-dn-qa-lt-in-se))
187
+ );
188
+ height: var(
189
+ --_ctm-mob-dn-qa-lt-in-se,
190
+ var(--_ctm-tab-dn-qa-lt-in-se, var(--_ctm-dn-qa-lt-in-se))
191
+ );
192
+ path {
193
+ stroke: var(
194
+ --_ctm-mob-dn-qa-lt-in-c1,
195
+ var(--_ctm-tab-dn-qa-lt-in-c1, var(--_ctm-dn-qa-lt-in-c1))
196
+ );
197
+ }
198
+ }
199
+ }
200
+ }
201
+ .days__left {
202
+ .count {
203
+ // padding-inline: var(--_sf-cd-gp);
204
+ color: var(
205
+ --_ctm-mob-dn-ds-lt-cr,
206
+ var(--_ctm-tab-dn-ds-lt-cr, var(--_ctm-dn-ds-lt-cr))
207
+ );
208
+ font-family: var(
209
+ --_ctm-mob-dn-ds-lt-ft-fy,
210
+ var(--_ctm-tab-dn-ds-lt-ft-fy, var(--_ctm-dn-ds-lt-ft-fy))
211
+ ),
212
+ sans-serif;
213
+ font-size: var(
214
+ --_ctm-mob-dn-ds-lt-ft-se,
215
+ var(--_ctm-tab-dn-ds-lt-ft-se, var(--_ctm-dn-ds-lt-ft-se))
216
+ );
217
+ font-weight: var(
218
+ --_ctm-mob-dn-ds-lt-ft-wt,
219
+ var(--_ctm-tab-dn-ds-lt-ft-wt, var(--_ctm-dn-ds-lt-ft-wt))
220
+ );
221
+ font-style: var(
222
+ --_ctm-mob-dn-ds-lt-ft-se-ic,
223
+ var(--_ctm-tab-dn-ds-lt-ft-se-ic, var(--_ctm-dn-ds-lt-ft-se-ic))
224
+ );
225
+ text-align: var(
226
+ --_ctm-mob-dn-ds-lt-tt-an,
227
+ var(--_ctm-tab-dn-ds-lt-tt-an, var(--_ctm-dn-ds-lt-tt-an))
228
+ );
229
+ letter-spacing: var(
230
+ --_ctm-mob-dn-ds-lt-lr-sg,
231
+ var(--_ctm-tab-dn-ds-lt-lr-sg, var(--_ctm-dn-ds-lt-lr-sg))
232
+ );
233
+ line-height: var(
234
+ --_ctm-mob-dn-ds-lt-le-ht,
235
+ var(--_ctm-tab-dn-ds-lt-le-ht, var(--_ctm-dn-ds-lt-le-ht-dc))
236
+ );
237
+ text-decoration: var(
238
+ --_ctm-mob-dn-ds-lt-ue,
239
+ var(--_ctm-tab-dn-ds-lt-ue, var(--_ctm-dn-ds-lt-ue))
240
+ );
241
+ }
242
+ .icon {
243
+ display: var(--_sf-show-icon-ff, flex);
244
+ svg {
245
+ width: var(
246
+ --_ctm-mab-dn-ds-lt-in-se,
247
+ var(--_ctm-tab-dn-ds-lt-in-se, var(--_ctm-dn-ds-lt-in-se))
248
+ );
249
+ height: var(
250
+ --_ctm-mob-dn-ds-lt-in-se,
251
+ var(--_ctm-tab-dn-ds-lt-in-se, var(--_ctm-dn-ds-lt-in-se))
252
+ );
253
+ path {
254
+ stroke: var(
255
+ --_ctm-mob-dn-ds-lt-in-c1,
256
+ var(--_ctm-tab-dn-ds-lt-in-c1, var(--_ctm-dn-ds-lt-in-c1))
257
+ );
258
+ }
259
+ }
260
+ }
261
+ }
262
+ }
263
+ }
264
+ }
265
+ }
package/dist/section.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  @use "./position-module.scss" as *;
5
5
  @use "./animation-control.scss" as *;
6
6
  @use "./responsive-behaviour.scss" as *;
7
- // @use "./overflow-module.scss" as *;
7
+ @use "./overflow-module.scss" as *;
8
8
  @use "./transform-properties-module.scss" as *;
9
9
 
10
10
  $activeElementSelector: "[data-has-clicked='true']";