@sc-360-v2/storefront-cms-library 0.3.94 → 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%;
@@ -65,31 +65,34 @@
65
65
  --_ctm-mob-mgcon-dn-br-wh,
66
66
  var(--_ctm-tab-mgcon-dn-br-wh, var(--_ctm-mgcon-dn-br-wh))
67
67
  );
68
- box-shadow: var(
69
- --_hover-show-shadow,
70
- var(
71
- --_sf-hr-bx-sw,
72
- var(
73
- --_show-shadow,
74
- var(
75
- --_ctm-mob-dn-dt-se-sw-ae,
76
- var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
77
- )
78
- var(
79
- --_ctm-mob-dn-dt-se-sw-br,
80
- var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
81
- )
82
- var(
83
- --_ctm-mob-dn-dt-se-sw-sd,
84
- var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
85
- )
86
- var(
87
- --_ctm-mob-dn-dt-se-sw-cr,
88
- var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
89
- )
90
- )
91
- )
92
- );
68
+ box-shadow: prepareMediaVariable(--_ctm-mgcon-dn-sw-ae)
69
+ prepareMediaVariable(--_ctm-mgcon-dn-sw-br) prepareMediaVariable(--_ctm-mgcon-dn-sw-sd)
70
+ prepareMediaVariable(--_ctm-mgcon-dn-sw-cr);
71
+ // box-shadow: var(
72
+ // --_hover-show-shadow,
73
+ // var(
74
+ // --_sf-hr-bx-sw,
75
+ // var(
76
+ // --_show-shadow,
77
+ // var(
78
+ // --_ctm-mob-dn-dt-se-sw-ae,
79
+ // var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
80
+ // )
81
+ // var(
82
+ // --_ctm-mob-dn-dt-se-sw-br,
83
+ // var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
84
+ // )
85
+ // var(
86
+ // --_ctm-mob-dn-dt-se-sw-sd,
87
+ // var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
88
+ // )
89
+ // var(
90
+ // --_ctm-mob-dn-dt-se-sw-cr,
91
+ // var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
92
+ // )
93
+ // )
94
+ // )
95
+ // );
93
96
  }
94
97
  }
95
98
  }
@@ -51,7 +51,7 @@ $defaultValues: (
51
51
  overflow: clip;
52
52
  display: var(--_d-flex);
53
53
  flex-direction: column;
54
- gap: prepareMediaVariable(--_ctm-lt-im-gp);
54
+ gap: prepareMediaVariable(--_ctm-meg-lt-im-gp);
55
55
  align-items: flex-start;
56
56
 
57
57
  @each $key, $val in $wrapperData {
@@ -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 {