@sc-360-v2/storefront-cms-library 0.3.95 → 0.3.97

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.
@@ -191,6 +191,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
191
191
  opacity: 0.5;
192
192
  pointer-events: none;
193
193
  }
194
+ span {
195
+ display: flex;
196
+ }
197
+ &:has(span) {
198
+ gap: 4px;
199
+ }
194
200
  }
195
201
  }
196
202
  }
@@ -234,15 +234,16 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
234
234
 
235
235
  .view_cart_btn {
236
236
  padding: 10px 15px;
237
- background-color: #243dc6;
238
- color: var(--_base-white);
237
+ background-color: var(--_thm-py-bs-dt-se-bd-cr);
238
+ color: var(--_thm-py-bs-dt-se-tt-cr);
239
239
  border: none;
240
240
  border-radius: 4px;
241
241
  cursor: pointer;
242
242
  margin-bottom: 12px;
243
243
 
244
244
  &:hover {
245
- background-color: #2237ac;
245
+ background-color: var(--_thm-py-bs-hr-se-bd-cr);
246
+ color: var(--_thm-py-bs-dt-se-tt-cr --_thm-py-bs-hr-se-tt-cr);
246
247
  }
247
248
  }
248
249
  }
@@ -48,22 +48,25 @@ $resizeActive: '[data-cms-element-resizer="true"]';
48
48
  --_ctm-mob-dn-hr-cr-bd-cr,
49
49
  var(--_ctm-tab-dn-hr-cr-bd-cr, var(--_ctm-dn-hr-cr-bd-cr))
50
50
  );
51
- border-color: var(
52
- --_ctm-mob-dn-hr-cr-br-cr,
53
- var(--_ctm-tab-dn-hr-cr-br-cr, var(--_ctm-dn-hr-cr-br-cr))
54
- );
55
- border-style: var(
56
- --_ctm-mob-dn-hr-cr-br-se,
57
- var(--_ctm-tab-dn-hr-cr-br-se, var(--_ctm-dn-hr-cr-br-se))
58
- );
59
- border-width: var(
60
- --_ctm-mob-dn-hr-cr-br-wh,
61
- var(--_ctm-tab-dn-hr-cr-br-wh, var(--_ctm-dn-hr-cr-br-wh))
62
- );
63
- border-radius: var(
64
- --_ctm-mob-dn-hr-cr-br-rs,
65
- var(--_ctm-tab-dn-hr-cr-br-rs, var(--_ctm-dn-hr-cr-br-rs))
66
- );
51
+ border-bottom: 0.5px solid #d0d5dd;
52
+ // border-color: var(
53
+ // --_ctm-mob-dn-hr-cr-br-cr,
54
+ // var(--_ctm-tab-dn-hr-cr-br-cr, var(--_ctm-dn-hr-cr-br-cr))
55
+ // );
56
+ // border-style: var(
57
+ // --_ctm-mob-dn-hr-cr-br-se,
58
+ // var(--_ctm-tab-dn-hr-cr-br-se, var(--_ctm-dn-hr-cr-br-se))
59
+ // );
60
+ // border-width: var(
61
+ // --_ctm-mob-dn-hr-cr-br-wh,
62
+ // var(--_ctm-tab-dn-hr-cr-br-wh, var(--_ctm-dn-hr-cr-br-wh))
63
+ // );
64
+ // border-bottom: 1px solid
65
+ // var(--_ctm-mob-dn-hr-cr-br-wh, var(--_ctm-tab-dn-hr-cr-br-wh, var(--_ctm-dn-hr-cr-br-wh)));
66
+ // border-radius: var(
67
+ // --_ctm-mob-dn-hr-cr-br-rs,
68
+ // var(--_ctm-tab-dn-hr-cr-br-rs, var(--_ctm-dn-hr-cr-br-rs))
69
+ // );
67
70
  padding: var(--_ctm-mob-dn-hr-cr-pg, var(--_ctm-tab-dn-hr-cr-pg, var(--_ctm-dn-hr-cr-pg)));
68
71
  box-shadow: var(
69
72
  var(
@@ -17,6 +17,10 @@ $button-padding: 6px 12px;
17
17
  position: relative;
18
18
  display: inline-block;
19
19
 
20
+ &.push_right {
21
+ margin-left: auto;
22
+ }
23
+
20
24
  .overlay-panel {
21
25
  margin-top: 10px;
22
26
  }
@@ -116,9 +120,10 @@ $button-padding: 6px 12px;
116
120
  }
117
121
  }
118
122
 
119
- .options-container {
120
- min-height: 150px;
121
- max-height: 250px;
123
+ .options-container,
124
+ .menu-container {
125
+ min-height: 200px;
126
+ max-height: 200px;
122
127
  padding: 4px;
123
128
  overflow-y: auto;
124
129
  display: flex;
@@ -129,7 +134,7 @@ $button-padding: 6px 12px;
129
134
  display: flex;
130
135
  justify-content: center;
131
136
  align-items: center;
132
- padding: 24px;
137
+ // padding: 24px;
133
138
  font-size: 16px;
134
139
  font-weight: 500;
135
140
  text-align: center;
@@ -200,7 +205,7 @@ $button-padding: 6px 12px;
200
205
  display: flex;
201
206
  flex-direction: column;
202
207
  font-weight: 400;
203
- margin-top: -3px;
208
+ // margin-top: -3px;
204
209
  &.selected {
205
210
  color: var(--_thm-cs-tt-ls-as);
206
211
  }
@@ -240,6 +245,30 @@ $button-padding: 6px 12px;
240
245
  background-color: var(--_gray-200);
241
246
  }
242
247
  }
248
+
249
+ .menu_dropdown_option {
250
+ a {
251
+ display: block;
252
+ text-decoration: none;
253
+ width: 100%;
254
+ &:hover {
255
+ color: var(--_primary-400);
256
+ }
257
+ }
258
+ button {
259
+ display: block;
260
+ padding: 12px;
261
+ text-align: left;
262
+ width: 100%;
263
+ &:hover {
264
+ background-color: var(--_gray-100);
265
+ color: var(--_primary-400);
266
+ }
267
+ }
268
+ }
269
+ }
270
+ .menu-container {
271
+ min-height: fit-content;
243
272
  }
244
273
 
245
274
  .footer {
@@ -5165,6 +5165,12 @@ $dark-color: #343a40;
5165
5165
  }
5166
5166
 
5167
5167
  .summary-content {
5168
+ &.show_button_only {
5169
+ &:hover {
5170
+ display: block !important;
5171
+ background-color: var(--_base-white);
5172
+ }
5173
+ }
5168
5174
  display: flex;
5169
5175
  flex-direction: row;
5170
5176
  justify-content: space-between;
@@ -5297,7 +5303,13 @@ $dark-color: #343a40;
5297
5303
  display: flex;
5298
5304
  align-items: center;
5299
5305
  gap: 4px;
5300
- color: var(--_primary-400);
5306
+ color: var(
5307
+ --_ctm-mob-dn-an-tb-bs-ty-py-hr-se-cr,
5308
+ var(
5309
+ --_ctm-tab-dn-an-tb-bs-ty-py-hr-se-cr,
5310
+ var(--_ctm-dn-an-tb-bs-ty-py-hr-se-cr)
5311
+ )
5312
+ );
5301
5313
  & > span {
5302
5314
  display: flex;
5303
5315
  }
@@ -5865,73 +5877,10 @@ $dark-color: #343a40;
5865
5877
  var(--_ctm-tab-dn-an-tb-bs-ty-py-dt-se-tt-an, var(--_ctm-dn-an-tb-bs-ty-py-dt-se-tt-an))
5866
5878
  );
5867
5879
  &:hover {
5868
- background-color: var(
5869
- --_ctm-mob-dn-an-tb-bs-ty-py-hr-se-bd-cr,
5870
- var(--_ctm-tab-dn-an-tb-bs-ty-py-hr-se-bd-cr, var(--_ctm-dn-an-tb-bs-ty-py-hr-se-bd-cr))
5871
- );
5872
- border-color: var(
5873
- --_ctm-mob-dn-an-tb-bs-ty-py-hr-se-br-cr,
5874
- var(--_ctm-tab-dn-an-tb-bs-ty-py-hr-se-br-cr, var(--_ctm-dn-an-tb-bs-ty-py-hr-se-br-cr))
5875
- );
5876
- border-radius: var(
5877
- --_ctm-mob-dn-an-tb-bs-ty-py-hr-se-br-rs,
5878
- var(--_ctm-tab-dn-an-tb-bs-ty-py-hr-se-br-rs, var(--_ctm-dn-an-tb-bs-ty-py-hr-se-br-rs))
5879
- );
5880
- border-style: var(
5881
- --_ctm-mob-dn-an-tb-bs-ty-py-hr-se-br-se,
5882
- var(--_ctm-tab-dn-an-tb-bs-ty-py-hr-se-br-se, var(--_ctm-dn-an-tb-bs-ty-py-hr-se-br-se))
5883
- );
5884
- border-width: var(
5885
- --_ctm-mob-dn-an-tb-bs-ty-py-hr-se-br-wh,
5886
- var(--_ctm-tab-dn-an-tb-bs-ty-py-hr-se-br-wh, var(--_ctm-dn-an-tb-bs-ty-py-hr-se-br-wh))
5887
- );
5888
- color: var(
5889
- --_ctm-mob-dn-an-tb-bs-ty-py-hr-se-cr,
5890
- var(--_ctm-tab-dn-an-tb-bs-ty-py-hr-se-cr, var(--_ctm-dn-an-tb-bs-ty-py-hr-se-cr))
5891
- );
5892
- font-family: var(
5893
- --_ctm-mob-dn-an-tb-bs-ty-py-hr-se-ft-fy,
5894
- var(--_ctm-tab-dn-an-tb-bs-ty-py-hr-se-ft-fy, var(--_ctm-dn-an-tb-bs-ty-py-hr-se-ft-fy))
5895
- );
5896
- font-size: var(
5897
- --_ctm-mob-dn-an-tb-bs-ty-py-hr-se-ft-se,
5898
- var(--_ctm-tab-dn-an-tb-bs-ty-py-hr-se-ft-se, var(--_ctm-dn-an-tb-bs-ty-py-hr-se-ft-se))
5899
- );
5900
- font-style: var(
5901
- --_ctm-mob-dn-an-tb-bs-ty-py-hr-se-ft-se-ic,
5902
- var(
5903
- --_ctm-tab-dn-an-tb-bs-ty-py-hr-se-ft-se-ic,
5904
- var(--_ctm-dn-an-tb-bs-ty-py-hr-se-ft-se-ic)
5905
- )
5906
- );
5907
- font-weight: var(
5908
- --_ctm-mob-dn-an-tb-bs-ty-py-hr-se-ft-wt,
5909
- var(--_ctm-tab-dn-an-tb-bs-ty-py-hr-se-ft-wt, var(--_ctm-dn-an-tb-bs-ty-py-hr-se-ft-wt))
5910
- );
5911
- // line-height: var(
5912
- // --_ctm-mob-dn-an-tb-bs-ty-py-hr-se-le-ht,
5913
- // var(--_ctm-tab-dn-an-tb-bs-ty-py-hr-se-le-ht, var(--_ctm-dn-an-tb-bs-ty-py-hr-se-le-ht))
5914
- // );
5915
- // letter-spacing: var(
5916
- // --_ctm-mob-dn-an-tb-bs-ty-py-hr-se-lr-sg,
5917
- // var(--_ctm-tab-dn-an-tb-bs-ty-py-hr-se-lr-sg, var(--_ctm-dn-an-tb-bs-ty-py-hr-se-lr-sg))
5918
- // );
5919
- -webkit-text-decoration: var(
5920
- --_ctm-mob-dn-an-tb-bs-ty-py-hr-se-ue,
5921
- var(--_ctm-tab-dn-an-tb-bs-ty-py-hr-se-ue, var(--_ctm-dn-an-tb-bs-ty-py-hr-se-ue))
5922
- );
5923
5880
  text-decoration: var(
5924
5881
  --_ctm-mob-dn-an-tb-bs-ty-py-hr-se-ue,
5925
5882
  var(--_ctm-tab-dn-an-tb-bs-ty-py-hr-se-ue, var(--_ctm-dn-an-tb-bs-ty-py-hr-se-ue))
5926
5883
  );
5927
- padding: var(
5928
- --_ctm-mob-dn-an-tb-bs-ty-py-hr-se-pg,
5929
- var(--_ctm-tab-dn-an-tb-bs-ty-py-hr-se-pg, var(--_ctm-dn-an-tb-bs-ty-py-hr-se-pg))
5930
- );
5931
- text-align: var(
5932
- --_ctm-mob-dn-an-tb-bs-ty-py-hr-se-tt-an,
5933
- var(--_ctm-tab-dn-an-tb-bs-ty-py-hr-se-tt-an, var(--_ctm-dn-an-tb-bs-ty-py-hr-se-tt-an))
5934
- );
5935
5884
  }
5936
5885
  }
5937
5886
  .chk_primary_bnt {
@@ -249,6 +249,62 @@ $previewMainOuput: ".output__ele__v1";
249
249
  line-height: 24px;
250
250
  }
251
251
 
252
+ // Image Upload
253
+
254
+ & > .img__div {
255
+ background: var(--_gray-100);
256
+ height: 100px;
257
+ width: 100%;
258
+ border-radius: var(--_br-6);
259
+ border: 1px dashed var(--_primary-100);
260
+ position: var(--_p-relative);
261
+ cursor: pointer;
262
+
263
+ &[data-has-content="true"] {
264
+ --_sf-vt-im: hidden;
265
+ --_sf-vt-op: 0;
266
+
267
+ & > .output__div {
268
+ display: var(--_d-flex);
269
+ align-self: stretch;
270
+ justify-self: stretch;
271
+ height: 100%;
272
+
273
+ img {
274
+ width: 100%;
275
+ height: 100%;
276
+ object-fit: contain;
277
+ }
278
+ }
279
+ }
280
+
281
+ & > span {
282
+ &.label__span {
283
+ position: var(--_p-absolute);
284
+ pointer-events: none;
285
+ left: 50%;
286
+ top: 50%;
287
+ transform: translate(-50%, -50%);
288
+ font-size: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se, 12px);
289
+ font-family: prepareMediaVariable(--_ctm-dn-dt-tt-ft-fy), sans-serif;
290
+ text-transform: uppercase;
291
+ line-height: 1;
292
+ cursor: pointer;
293
+ visibility: var(--_sf-vt-im, visible);
294
+ opacity: var(--_sf-op-im, 1);
295
+ }
296
+ }
297
+
298
+ & > input {
299
+ &[type="file"] {
300
+ position: var(--_p-absolute);
301
+ inset: 0 0 0 0;
302
+ opacity: 0;
303
+ height: 100%;
304
+ }
305
+ }
306
+ }
307
+
252
308
  // Text Editor
253
309
  & > .text__div {
254
310
  --_perc-clr-bb: 50%;
@@ -213,8 +213,8 @@
213
213
  justify-content: center;
214
214
  align-items: center;
215
215
  gap: 8px;
216
- background-color: var(--_primary-400);
217
- color: var(--_base-white);
216
+ background-color: var(--_thm-py-bs-dt-se-bd-cr);
217
+ color: var(--_thm-py-bs-dt-se-tt-cr);
218
218
  &.disabled {
219
219
  opacity: 0.5;
220
220
  pointer-events: none;
@@ -230,7 +230,8 @@
230
230
  }
231
231
 
232
232
  &:hover {
233
- background-color: var(--_primary-500);
233
+ background-color: var(--_thm-py-bs-hr-se-bd-cr);
234
+ color: var(--_thm-py-bs-hr-se-tt-cr);
234
235
  }
235
236
  }
236
237
  .discard-btn {