@sc-360-v2/storefront-cms-library 0.3.2 → 0.3.4

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.
@@ -824,31 +824,33 @@ $resizeActive: '[data-cms-element-resizer="true"]';
824
824
  flex-direction: column;
825
825
  gap: 6px;
826
826
 
827
+ .add_to_cart_qty {
828
+ width: 205px;
829
+ border: 1px solid #d0d5dd !important;
830
+ border-radius: 2px !important;
831
+ outline: none;
832
+ padding: 8px 12px !important;
833
+ background-color: #f9fafb;
834
+ }
835
+
836
+ .add_to_cart_price {
837
+ background-color: transparent;
838
+ color: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-cr);
839
+ font-family: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-fy);
840
+ font-size: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-se);
841
+ font-style: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-se-ic);
842
+ font-weight: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-wt);
843
+ line-height: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-le-ht);
844
+ letter-spacing: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-lr-sg);
845
+ text-align: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-tt-an);
846
+ text-decoration: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ue);
847
+ }
848
+
827
849
  .add_to_cart_estimate_label {
828
850
  font-family: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-fy);
829
851
  line-height: 150%;
830
852
  font-size: 16px;
831
853
  color: #000000;
832
-
833
- .add_to_cart_qty {
834
- width: 205px;
835
- border: 1px solid #d0d5dd !important;
836
- border-radius: 2px !important;
837
- outline: none;
838
- padding: 8px 12px !important;
839
- }
840
-
841
- .add_to_cart_price {
842
- color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-cr);
843
- font-family: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-fy);
844
- font-size: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-se);
845
- font-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-se-ic);
846
- font-weight: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-wt);
847
- line-height: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-le-ht);
848
- letter-spacing: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-lr-sg);
849
- text-align: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-tt-an);
850
- text-decoration: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ue);
851
- }
852
854
  }
853
855
  }
854
856
  }
@@ -878,6 +880,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
878
880
  text-align: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-tt-an);
879
881
  text-decoration: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ue);
880
882
 
883
+ &:disabled {
884
+ cursor: not-allowed;
885
+ }
886
+
881
887
  &:hover {
882
888
  background-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-bd-cr);
883
889
  border-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-cr);
@@ -1353,6 +1359,25 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1353
1359
  align-items: center;
1354
1360
  width: 100%;
1355
1361
 
1362
+ .add_to_cart_qty_wrapper {
1363
+ display: flex;
1364
+ flex-direction: column;
1365
+ gap: 6px;
1366
+
1367
+ .add_to_cart_qty {
1368
+ width: 205px;
1369
+ border: 1px solid #d0d5dd !important;
1370
+ border-radius: 2px !important;
1371
+ outline: none;
1372
+ padding: 8px 12px !important;
1373
+ background-color: #f9fafb;
1374
+ }
1375
+
1376
+ small {
1377
+ color: red;
1378
+ }
1379
+ }
1380
+
1356
1381
  .select-button {
1357
1382
  display: flex;
1358
1383
  align-items: center;
@@ -0,0 +1,275 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ @use "./functions.scss" as *;
5
+
6
+ [data-div-type="element"] {
7
+ &[data-element-type="button"] {
8
+ height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
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(
30
+ --_ctm-mob-dn-hr-se-bd-cr,
31
+ var(--_ctm-tab-dn-hr-se-bd-cr, var(--_ctm-dn-hr-se-bd-cr))
32
+ );
33
+ --_sf-hr-br-cr: var(
34
+ --_ctm-mob-dn-hr-se-br-cr,
35
+ var(--_ctm-tab-dn-hr-se-br-cr, var(--_ctm-dn-hr-se-br-cr))
36
+ );
37
+ --_sf-hr-br-st: var(
38
+ --_ctm-mob-dn-hr-se-br-se,
39
+ var(--_ctm-tab-dn-hr-se-br-se, var(--_ctm-dn-hr-se-br-se))
40
+ );
41
+ --_sf-hr-br-wt: var(
42
+ --_ctm-mob-dn-hr-se-br-wh,
43
+ var(--_ctm-tab-dn-hr-se-br-wh, var(--_ctm-dn-hr-se-br-wh))
44
+ );
45
+ --_sf-hr-br-br: var(
46
+ --_ctm-mob-dn-hr-se-br-rs,
47
+ var(--_ctm-tab-dn-hr-se-br-rs, var(--_ctm-dn-hr-se-br-rs))
48
+ );
49
+ --_sf-hr-bx-sw: var(
50
+ --_ctm-mob-dn-hr-se-sw-ae,
51
+ var(--_ctm-tab-dn-hr-se-sw-ae, var(--_ctm-dn-hr-se-sw-ae))
52
+ )
53
+ var(--_ctm-mob-dn-hr-se-sw-br, var(--_ctm-tab-dn-hr-se-sw-br, var(--_ctm-dn-hr-se-sw-br)))
54
+ var(--_ctm-mob-dn-hr-se-sw-sd, var(--_ctm-tab-dn-hr-se-sw-sd, var(--_ctm-dn-hr-se-sw-sd)))
55
+ var(--_ctm-mob-dn-hr-se-sw-cr, var(--_ctm-tab-dn-hr-se-sw-cr, var(--_ctm-dn-hr-se-sw-cr)));
56
+
57
+ --_sf-hr-fc: var(
58
+ --_ctm-mob-dn-hr-se-cr,
59
+ var(--_ctm-tab-dn-hr-se-cr, var(--_ctm-dn-hr-se-cr))
60
+ );
61
+ --_sf-hr-ff: var(
62
+ --_ctm-mob-dn-hr-se-ft-fy,
63
+ var(--_ctm-tab-dn-hr-se-ft-fy, var(--_ctm-dn-hr-se-ft-fy))
64
+ );
65
+ --_sf-hr-fs: var(
66
+ --_ctm-mob-dn-hr-se-ft-se,
67
+ var(--_ctm-tab-dn-hr-se-ft-se, var(--_ctm-dn-hr-se-ft-se))
68
+ );
69
+ --_sf-hr-fw: var(
70
+ --_ctm-mob-dn-hr-se-ft-wt,
71
+ var(--_ctm-tab-dn-hr-se-ft-wt, var(--_ctm-dn-hr-se-ft-wt))
72
+ );
73
+ --_sf-hr-ft: var(
74
+ --_ctm-mob-dn-hr-se-ft-se-ic,
75
+ var(--_ctm-tab-dn-hr-se-ft-se-ic, var(--_ctm-dn-hr-se-ft-se-ic))
76
+ );
77
+ --_sf-hr-ta: var(
78
+ --_ctm-mob-dn-hr-se-tt-an,
79
+ var(--_ctm-tab-dn-hr-se-tt-an, var(--_ctm-dn-hr-se-tt-an))
80
+ );
81
+ --_sf-hr-ls: var(
82
+ --_ctm-mob-dn-hr-se-lr-sg,
83
+ var(--_ctm-tab-dn-hr-se-lr-sg, var(--_ctm-dn-hr-se-lr-sg))
84
+ );
85
+ --_sf-hr-lh: var(
86
+ --_ctm-mob-dn-hr-se-le-ht,
87
+ var(--_ctm-tab-dn-hr-se-le-ht, var(--_ctm-dn-hr-se-le-ht))
88
+ );
89
+
90
+ --_sf-hr-ic-wt: var(
91
+ --_ctm-mob-dn-hr-se-in-se,
92
+ var(--_ctm-tab-dn-hr-se-in-se, var(--_ctm-dn-hr-se-in-se))
93
+ );
94
+ --_sf-hr-ic-ht: var(
95
+ --_ctm-mob-dn-hr-se-in-se,
96
+ var(--_ctm-tab-dn-hr-se-in-se, var(--_ctm-dn-hr-se-in-se))
97
+ );
98
+ --_sf-hr-ic-st: var(
99
+ --_ctm-mob-dn-hr-se-in-c1,
100
+ var(--_ctm-tab-dn-hr-se-in-c1, var(--_ctm-dn-hr-se-in-c1))
101
+ );
102
+ --_sf-hr-tt-dn: var(
103
+ --_ctm-mob-dn-hr-se-ue,
104
+ var(--_ctm-tab-dn-hr-se-ue, var(--_ctm-dn-hr-se-ue))
105
+ );
106
+
107
+ &[data-hover-show-shadow="false"] {
108
+ --_hover-show-shadow: none;
109
+ }
110
+ &[data-hover-show-icon="false"] {
111
+ --_hover-show-icon: none;
112
+ }
113
+ }
114
+ &[data-show-icon="false"] {
115
+ --_show-icon: none;
116
+ }
117
+ &[data-element-style="Icon"] {
118
+ &[data-icon-position="left"] {
119
+ --_sf-jc: start;
120
+ }
121
+ &[data-icon-position="right"] {
122
+ --_sf-jc: end;
123
+ }
124
+ &[data-icon-position="center"] {
125
+ --_sf-jc: center;
126
+ }
127
+ }
128
+
129
+ .btn__with__text {
130
+ background-color: var(
131
+ --_sf-hr-bd-cr,
132
+ var(--_ctm-mob-dn-dt-se-bd-cr, var(--_ctm-tab-dn-dt-se-bd-cr, var(--_ctm-dn-dt-se-bd-cr)))
133
+ );
134
+ // padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
135
+ padding: prepareMediaVariable(--_ctm-lt-pg);
136
+ // (8px, var(--_sf-element-vt-pd)) min(15px, var(--_sf-element-hr-pd));
137
+ display: flex;
138
+ flex-direction: var(--_sf-fd-bn);
139
+ align-items: center;
140
+ // justify-content: var(--_sf-jc, center);
141
+ justify-content: var(
142
+ --_ctm-mob-lt-tt-an,
143
+ var(--_ctm-tab-lt-tt-an, var(--_ctm-lt-tt-an, center))
144
+ );
145
+ gap: var(--_ctm-mob-lt-gp, var(--_ctm-tab-lt-gp, var(--_ctm-lt-gp)));
146
+
147
+ width: 100%;
148
+ height: 100%;
149
+
150
+ border-radius: var(
151
+ --_sf-hr-br-br,
152
+ var(--_ctm-mob-dn-dt-se-br-rs, var(--_ctm-tab-dn-dt-se-br-rs, var(--_ctm-dn-dt-se-br-rs)))
153
+ );
154
+ box-shadow: var(
155
+ --_hover-show-shadow,
156
+ var(
157
+ --_sf-hr-bx-sw,
158
+ var(
159
+ --_show-shadow,
160
+ var(
161
+ --_ctm-mob-dn-dt-se-sw-ae,
162
+ var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
163
+ )
164
+ var(
165
+ --_ctm-mob-dn-dt-se-sw-br,
166
+ var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
167
+ )
168
+ var(
169
+ --_ctm-mob-dn-dt-se-sw-sd,
170
+ var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
171
+ )
172
+ var(
173
+ --_ctm-mob-dn-dt-se-sw-cr,
174
+ var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
175
+ )
176
+ )
177
+ )
178
+ );
179
+ &[data-show-border="true"] {
180
+ border-color: var(
181
+ --_sf-hr-br-cr,
182
+ var(--_ctm-mob-dn-dt-se-br-cr, var(--_ctm-tab-dn-dt-se-br-cr, var(--_ctm-dn-dt-se-br-cr)))
183
+ );
184
+ border-style: var(
185
+ --_sf-hr-br-st,
186
+ var(--_ctm-mob-dn-dt-se-br-se, var(--_ctm-tab-dn-dt-se-br-se, var(--_ctm-dn-dt-se-br-se)))
187
+ );
188
+ border-width: var(
189
+ --_sf-hr-br-wt,
190
+ var(--_ctm-mob-dn-dt-se-br-wh, var(--_ctm-tab-dn-dt-se-br-wh, var(--_ctm-dn-dt-se-br-wh)))
191
+ );
192
+ }
193
+
194
+ .txt {
195
+ display: flex;
196
+ color: var(
197
+ --_sf-hr-fc,
198
+ var(--_ctm-mob-dn-dt-se-cr, var(--_ctm-tab-dn-dt-se-cr, var(--_ctm-dn-dt-se-cr)))
199
+ );
200
+ font-family: var(
201
+ --_sf-hr-ff,
202
+ var(
203
+ --_ctm-mob-dn-dt-se-ft-fy,
204
+ var(--_ctm-tab-dn-dt-se-ft-fy, var(--_ctm-dn-dt-se-ft-fy))
205
+ )
206
+ ),
207
+ sans-serif;
208
+ font-size: var(
209
+ --_sf-hr-fs,
210
+ var(--_ctm-mob-dn-dt-se-ft-se, var(--_ctm-tab-dn-dt-se-ft-se, var(--_ctm-dn-dt-se-ft-se)))
211
+ );
212
+ font-weight: var(
213
+ --_sf-hr-fw,
214
+ var(--_ctm-mob-dn-dt-se-ft-wt, var(--_ctm-tab-dn-dt-se-ft-wt, var(--_ctm-dn-dt-se-ft-wt)))
215
+ );
216
+ font-style: var(
217
+ --_sf-hr-ft,
218
+ var(
219
+ --_ctm-mob-dn-dt-se-ft-se-ic,
220
+ var(--_ctm-tab-dn-dt-se-ft-se-ic, var(--_ctm-dn-dt-se-ft-se-ic))
221
+ )
222
+ );
223
+ text-align: var(
224
+ --_sf-hr-ta,
225
+ var(--_ctm-mob-dn-dt-se-tt-an, var(--_ctm-tab-dn-dt-se-tt-an, var(--_ctm-dn-dt-se-tt-an)))
226
+ );
227
+ letter-spacing: var(
228
+ --_sf-hr-ls,
229
+ var(--_ctm-mob-dn-dt-se-lr-sg, var(--_ctm-tab-dn-dt-se-lr-sg, var(--_ctm-dn-dt-se-lr-sg)))
230
+ );
231
+ line-height: var(
232
+ --_sf-hr-lh,
233
+ var(--_ctm-mob-dn-dt-se-le-ht, var(--_ctm-tab-dn-dt-se-le-ht, var(--_ctm-dn-dt-se-le-ht)))
234
+ );
235
+ text-decoration: var(
236
+ --_sf-hr-tt-dn,
237
+ var(--_ctm-mob-dn-dt-se-ue, var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue)))
238
+ );
239
+ }
240
+
241
+ .icon {
242
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
243
+ svg {
244
+ width: var(
245
+ --_sf-hr-ic-wt,
246
+ var(
247
+ --_ctm-mob-dn-dt-se-in-se,
248
+ var(--_ctm-tab-dn-dt-se-in-se, var(--_ctm-dn-dt-se-in-se))
249
+ )
250
+ );
251
+ height: var(
252
+ --_sf-hr-ic-ht,
253
+ var(
254
+ --_ctm-mob-dn-dt-se-in-se,
255
+ var(--_ctm-tab-dn-dt-se-in-se, var(--_ctm-dn-dt-se-in-se))
256
+ )
257
+ );
258
+ path {
259
+ stroke: var(
260
+ --_sf-hr-ic-st,
261
+ var(
262
+ --_ctm-mob-dn-dt-se-in-c1,
263
+ var(--_ctm-tab-dn-dt-se-in-c1, var(--_ctm-dn-dt-se-in-c1))
264
+ )
265
+ );
266
+ }
267
+ }
268
+ }
269
+ [data-element-style="Text"] {
270
+ display: inline-block;
271
+ width: 100%;
272
+ }
273
+ }
274
+ }
275
+ }