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

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.
@@ -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(
@@ -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 {