@sc-360-v2/storefront-cms-library 0.3.40 → 0.3.42

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.
@@ -74,6 +74,12 @@
74
74
  letter-spacing: var(--_ctm-buy-dn-me-es-ll-ss-lr-sg);
75
75
  line-height: var(--_ctm-buy-dn-me-es-ll-ss-le-ht);
76
76
  cursor: pointer;
77
+ padding: 6px 12px;
78
+ font-weight: 500;
79
+ border-radius: 6px;
80
+ &:hover {
81
+ background-color: var(--_primary-25);
82
+ }
77
83
  }
78
84
 
79
85
  .employee-switch {
@@ -384,3 +390,8 @@
384
390
  }
385
391
  }
386
392
  }
393
+
394
+ .buyfor_emp_dropdown {
395
+ right: 0 !important;
396
+ left: auto !important;
397
+ }
@@ -468,8 +468,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
468
468
  background-size: 100%;
469
469
  height: 130px;
470
470
  background-repeat: no-repeat;
471
- background-position: center;
472
- background-color: #eaeaea;
471
+ background-position: 0 0;
472
+ background-color: var(--_base-white);
473
473
  border: 1px solid var(--_gray-100);
474
474
  border-radius: 4px;
475
475
  }
@@ -44,23 +44,28 @@ $dark-color: #343a40;
44
44
  }
45
45
 
46
46
  .sign_in_section {
47
+ display: flex;
48
+ flex-direction: column;
49
+ gap: 12px;
47
50
  flex: 1;
48
51
  max-width: 500px;
49
52
  word-break: keep-all;
50
53
 
51
54
  h2 {
52
- font-size: 1.75rem;
53
- font-weight: bold;
54
- margin-bottom: 0.5rem;
55
+ margin-bottom: -6px;
56
+ font-family: "Lato";
57
+ font-weight: 700;
58
+ font-size: 24px;
59
+ line-height: 32px;
60
+ color: var(--_gray-900);
55
61
  }
56
62
 
57
63
  p {
58
- font-size: 0.95rem;
59
- margin-bottom: 1rem;
60
- }
61
-
62
- .sign_in_form {
63
- margin-bottom: 0.75rem;
64
+ font-family: "Lato";
65
+ font-weight: 400;
66
+ font-size: 14px;
67
+ line-height: 20px;
68
+ color: var(--_gray-600);
64
69
  }
65
70
 
66
71
  .forgot_password {
@@ -85,20 +90,32 @@ $dark-color: #343a40;
85
90
  .create_account_section {
86
91
  display: flex;
87
92
  justify-content: space-between;
88
- gap: 2rem;
93
+ gap: 12px;
94
+ word-break: keep-all;
89
95
 
90
96
  .create_form_wrapper {
97
+ display: flex;
98
+ flex-direction: column;
99
+ gap: 12px;
91
100
  flex: 1;
92
101
  max-width: 500px;
102
+ word-break: keep-all;
93
103
 
94
104
  h2 {
95
- font-size: 1.5rem;
96
- font-weight: bold;
105
+ margin-bottom: -6px;
106
+ font-family: "Lato";
107
+ font-weight: 700;
108
+ font-size: 24px;
109
+ line-height: 32px;
110
+ color: var(--_gray-900);
97
111
  }
98
112
 
99
113
  p {
100
- font-size: 0.95rem;
101
- margin-bottom: 1rem;
114
+ font-family: "Lato";
115
+ font-weight: 400;
116
+ font-size: 14px;
117
+ line-height: 20px;
118
+ color: var(--_gray-600);
102
119
  }
103
120
 
104
121
  .create_account_text {
@@ -123,21 +140,26 @@ $dark-color: #343a40;
123
140
  display: flex;
124
141
  flex-direction: column;
125
142
  justify-content: center;
126
- gap: 2rem;
143
+ gap: 48px;
127
144
 
128
145
  .guest_box,
129
146
  .create_account_box {
130
- padding: 1.5rem;
131
-
132
147
  h3 {
133
- font-size: 1.25rem;
134
- font-weight: bold;
135
- margin-bottom: 0.5rem;
148
+ margin-bottom: 6px;
149
+ font-family: "Lato";
150
+ font-weight: 700;
151
+ font-size: 24px;
152
+ line-height: 32px;
153
+ color: var(--_gray-900);
136
154
  }
137
155
 
138
156
  p {
139
- font-size: 0.9rem;
140
- margin-bottom: 1rem;
157
+ margin-bottom: 12px;
158
+ font-family: "Lato";
159
+ font-weight: 400;
160
+ font-size: 14px;
161
+ line-height: 20px;
162
+ color: var(--_gray-600);
141
163
  }
142
164
 
143
165
  .btn_secondary {
@@ -244,6 +266,9 @@ $dark-color: #343a40;
244
266
  line-height: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-le-ht);
245
267
  letter-spacing: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-lr-sg);
246
268
  text-decoration: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-ue);
269
+ span {
270
+ display: flex;
271
+ }
247
272
  }
248
273
  .edit-btn {
249
274
  cursor: pointer;
@@ -291,11 +316,83 @@ $dark-color: #343a40;
291
316
  }
292
317
 
293
318
  .accordion-body {
319
+ .summary {
320
+ .chk_shipping_method_label {
321
+ display: flex;
322
+ align-items: center;
323
+ gap: 4px;
324
+ color: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-cr);
325
+ font-family: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-cr);
326
+ font-size: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-se);
327
+ font-style: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-se-ic);
328
+ font-weight: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-wt);
329
+ line-height: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-le-ht);
330
+ letter-spacing: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-lr-sg);
331
+ text-decoration: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ue);
332
+ }
333
+
334
+ .chk_shipping_method_heading {
335
+ color: var(--_ctm-dn-sg-md-dn-hg-dn-cr);
336
+ font-family: var(--_ctm-dn-sg-md-dn-hg-dn-ft-fy);
337
+ font-size: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se);
338
+ font-style: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se-ic);
339
+ font-weight: var(--_ctm-dn-sg-md-dn-hg-dn-ft-wt);
340
+ line-height: var(--_ctm-dn-sg-md-dn-hg-dn-le-ht);
341
+ letter-spacing: var(--_ctm-dn-sg-md-dn-hg-dn-lr-sg);
342
+ text-decoration: var(--_ctm-dn-sg-md-dn-hg-dn-ue);
343
+ }
344
+ }
345
+
294
346
  .shipping-address {
295
347
  display: flex;
296
348
  flex-direction: column;
297
349
  gap: 24px;
298
350
 
351
+ .chk_saved_address_button {
352
+ cursor: pointer;
353
+ align-self: flex-start;
354
+ white-space: nowrap;
355
+ display: flex;
356
+ gap: 4px;
357
+ align-items: flex-start;
358
+ border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-bd-cr);
359
+ border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-cr);
360
+ border-radius: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-rs);
361
+ border-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-se);
362
+ border-width: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-wh);
363
+ color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-cr);
364
+ font-family: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-fy);
365
+ font-size: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-se);
366
+ font-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-se-ic);
367
+ font-weight: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-wt);
368
+ line-height: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-le-ht);
369
+ letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-lr-sg);
370
+ box-shadow: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-ae)
371
+ var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-br)
372
+ var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-sd)
373
+ var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-cr);
374
+ text-decoration: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ue);
375
+ &:hover {
376
+ background-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-bd-cr);
377
+ border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-cr);
378
+ border-radius: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-rs);
379
+ border-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-se);
380
+ border-width: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-wh);
381
+ color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-cr);
382
+ font-family: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-fy);
383
+ font-size: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-se);
384
+ font-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-se-ic);
385
+ font-weight: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-wt);
386
+ line-height: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-le-ht);
387
+ letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-lr-sg);
388
+ box-shadow: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-ae)
389
+ var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-ae)
390
+ var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-sd)
391
+ var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-cr);
392
+ text-decoration: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ue);
393
+ }
394
+ }
395
+
299
396
  .shipping_address_container {
300
397
  display: flex;
301
398
  flex-direction: column;
@@ -630,15 +727,15 @@ $dark-color: #343a40;
630
727
  align-items: center;
631
728
  gap: 4px;
632
729
 
633
- .chk_multi_address_product_label {
634
- color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-cr);
635
- font-family: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ft-fy);
636
- font-size: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ft-se);
637
- font-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ft-se-ic);
638
- font-weight: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ft-wt);
639
- line-height: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-le-ht);
640
- letter-spacing: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-lr-sg);
641
- text-decoration: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ue);
730
+ .chk_multi_address_product_info {
731
+ color: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-cr);
732
+ font-family: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-fy);
733
+ font-size: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-se);
734
+ font-style: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-se-ic);
735
+ font-weight: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-wt);
736
+ line-height: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-le-ht);
737
+ letter-spacing: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-lr-sg);
738
+ text-decoration: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ue);
642
739
  }
643
740
 
644
741
  .chk_multi_address_product_qty {
@@ -795,7 +892,7 @@ $dark-color: #343a40;
795
892
  &__grid {
796
893
  display: grid;
797
894
  grid-template-columns: 1fr;
798
- gap: var(--_ctm-lt-im-gp);
895
+ gap: var(--_ctm-lt-sg-md-le-gp);
799
896
 
800
897
  @media (min-width: 768px) {
801
898
  grid-template-columns: 1fr 1fr;
@@ -835,7 +932,7 @@ $dark-color: #343a40;
835
932
  width: 20px;
836
933
  margin-right: 12px;
837
934
  height: 20px;
838
- border: 1px solid #d0d5dd; /* blue ring */
935
+ border: 1px solid transparent; /* blue ring */
839
936
  border-radius: 50%;
840
937
  display: inline-block;
841
938
  box-sizing: border-box;
@@ -935,6 +1032,7 @@ $dark-color: #343a40;
935
1032
  var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-sd)
936
1033
  var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-cr);
937
1034
  text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ue);
1035
+ text-align: left;
938
1036
 
939
1037
  &:hover {
940
1038
  background-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-bd-cr);
@@ -1205,6 +1303,17 @@ $dark-color: #343a40;
1205
1303
  gap: 24px;
1206
1304
  }
1207
1305
 
1306
+ .chk_payment_options_heading {
1307
+ color: var(--_ctm-dn-pt-os-dn-pt-hg-dn-cr);
1308
+ font-family: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-fy);
1309
+ font-size: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-se);
1310
+ font-style: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-se-ic);
1311
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-wt);
1312
+ line-height: var(--_ctm-dn-pt-os-dn-pt-hg-dn-le-ht);
1313
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-hg-dn-lr-sg);
1314
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ue);
1315
+ }
1316
+
1208
1317
  &_form_wrapper {
1209
1318
  display: flex;
1210
1319
  flex-direction: column;
@@ -1588,6 +1697,44 @@ $dark-color: #343a40;
1588
1697
  }
1589
1698
  }
1590
1699
 
1700
+ .chk_shipping_address_use_as_billing_address_chkbx {
1701
+ display: flex;
1702
+ align-items: center;
1703
+ cursor: pointer;
1704
+ gap: 10px;
1705
+ color: var(--_ctm-dn-pt-os-dn-cx-ll-dn-cr);
1706
+ font-family: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-fy);
1707
+ font-size: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se);
1708
+ font-style: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se-ic);
1709
+ font-weight: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-wt);
1710
+ line-height: var(--_ctm-dn-pt-os-dn-cx-ll-dn-le-ht);
1711
+ letter-spacing: var(--_ctm-dn-pt-os-dn-cx-ll-dn-lr-sg);
1712
+ text-decoration: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ue);
1713
+
1714
+ .custom-checkbox {
1715
+ width: 20px;
1716
+ height: 20px;
1717
+ border: 1px solid #d0d5dd;
1718
+ border-radius: 4px;
1719
+ position: relative;
1720
+ background-color: #fff;
1721
+ transition: all 0.2s ease;
1722
+
1723
+ &::after {
1724
+ content: "";
1725
+ position: absolute;
1726
+ display: none;
1727
+ left: 5px;
1728
+ top: 0.5px;
1729
+ width: 5px;
1730
+ height: 10px;
1731
+ border: solid #fff;
1732
+ border-width: 0 2px 2px 0;
1733
+ transform: rotate(45deg);
1734
+ }
1735
+ }
1736
+ }
1737
+
1591
1738
  input[type="checkbox"]:checked + label {
1592
1739
  .custom-checkbox {
1593
1740
  background-color: #004dff;
@@ -1707,16 +1854,20 @@ $dark-color: #343a40;
1707
1854
  }
1708
1855
 
1709
1856
  .right-btn {
1710
- display: flex;
1857
+ display: none;
1711
1858
  gap: 24px;
1712
1859
 
1860
+ &:has(.chk_saved_address_button.selected) {
1861
+ display: flex !important;
1862
+ }
1863
+
1713
1864
  .chk_saved_address_button {
1714
1865
  cursor: pointer;
1715
1866
  align-self: flex-start;
1716
1867
  white-space: nowrap;
1717
1868
  display: flex;
1718
1869
  gap: 4px;
1719
- align-items: center;
1870
+ align-items: flex-start;
1720
1871
  border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-bd-cr);
1721
1872
  border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-cr);
1722
1873
  border-radius: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-rs);
@@ -1755,6 +1906,12 @@ $dark-color: #343a40;
1755
1906
  }
1756
1907
  }
1757
1908
  }
1909
+
1910
+ &:hover {
1911
+ .right-btn {
1912
+ display: flex;
1913
+ }
1914
+ }
1758
1915
  }
1759
1916
  }
1760
1917
  }
@@ -98,6 +98,8 @@ $link-color: #243dc6;
98
98
  font-weight: 400;
99
99
  line-height: 20px;
100
100
  white-space: nowrap;
101
+ display: inline-block;
102
+ margin-left: 8px;
101
103
 
102
104
  &:hover {
103
105
  text-decoration: underline;
@@ -34,6 +34,12 @@ $prefixList: (
34
34
  spotlight: spo,
35
35
  );
36
36
 
37
+ $VariableTypes: (
38
+ width: "lt-wh",
39
+ maxHeight: "lt-mx-ht",
40
+ transform: "trsnf-vl",
41
+ );
42
+
37
43
  @function convertListToCommaSeparateString($list) {
38
44
  $items: ();
39
45
  @each $key, $value in $list {
@@ -45,14 +51,16 @@ $prefixList: (
45
51
  }
46
52
 
47
53
  @function convertIntoActualVariable($prefix, $type) {
48
- $types: (
49
- width: "lt-wh",
50
- );
51
- $suffix: map.get($types, $type);
54
+ // $types: (
55
+ // width: "lt-wh",
56
+ // maxHeight: "lt-mx-ht",
57
+ // transform: "trsnf-vl",
58
+ // );
59
+ $suffix: map.get($VariableTypes, $type);
52
60
  @return --_ctm-#{$prefix}-#{$suffix};
53
61
  }
54
62
 
55
- @mixin FlexUpdatedPrefixCSSVariable($var, $isLayer: false) {
63
+ @mixin FlexUpdatedPrefixCSSVariable($var, $isLayer: false, $type: width, $defaultValue: inherit) {
56
64
  $selector: "";
57
65
  @if ($isLayer == false) {
58
66
  $selector: $dataElementType;
@@ -61,13 +69,14 @@ $prefixList: (
61
69
  }
62
70
  @each $key, $value in $prefixList {
63
71
  &[#{$selector}="#{$key}"] {
64
- #{$var}: #{prepareMediaVariable(convertIntoActualVariable($value, width))};
72
+ #{$var}: #{prepareMediaVariable(convertIntoActualVariable($value, $type), $defaultValue)};
65
73
  }
66
74
  }
67
-
68
- &#{$elementSelector} {
69
- &:is(:not(#{convertListToCommaSeparateString($prefixList)})) {
70
- #{$var}: #{prepareMediaVariable(--_ctm-lt-wh)};
75
+ @if ($type != maxHeight) {
76
+ &#{$elementSelector} {
77
+ &:is(:not(#{convertListToCommaSeparateString($prefixList)})) {
78
+ #{$var}: #{prepareMediaVariable(--_ctm-#{map.get($VariableTypes, $type), $defaultValue})};
79
+ }
71
80
  }
72
81
  }
73
82
  }
@@ -139,6 +139,9 @@ $input-padding: 10px 12px;
139
139
  }
140
140
  }
141
141
  .cart_products_wrapper {
142
+ display: flex;
143
+ flex-direction: column;
144
+ gap: 24px;
142
145
  padding: 12px;
143
146
  .emptyData {
144
147
  color: $text-color;
@@ -120,6 +120,7 @@
120
120
  grid-template-columns: repeat(2, 1fr);
121
121
  gap: 24px 38px;
122
122
  padding-right: 12px;
123
+ margin-top: 24px;
123
124
  .cart_item-card {
124
125
  display: flex;
125
126
  gap: 12px;
package/dist/section.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  @use "./animation-control.scss" as *;
6
6
  @use "./responsive-behaviour.scss" as *;
7
7
  @use "./overflow-module.scss" as *;
8
+ @use "./transform-properties-module.scss" as *;
8
9
 
9
10
  $activeElementSelector: "[data-has-clicked='true']";
10
11
  $repeterLElement: '[data-element-type="repeater"]';
@@ -45,8 +46,11 @@ body {
45
46
  // Responsive
46
47
  @include FlexElementResponsiveBehaviourStyles();
47
48
 
48
- // overflow
49
+ // Overflow
49
50
  @include FlexOverflowModuleStyles();
51
+
52
+ // Additional Tranform Properties
53
+ @include FlexElementTransformProps();
50
54
  }
51
55
 
52
56
  section {
@@ -0,0 +1,20 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./prefix-list.scss" as *;
4
+ $editorBodySelector: '[data-iframe-body="true"]';
5
+ $sectionWrapper: '[data-div-type="cms-section-wrapper"]';
6
+ $le: '[data-element-type="lightboxv2"]';
7
+ $elementSelector: '[data-div-type="element"]';
8
+ $gridSelector: '[data-div-type="grid"]';
9
+ $var: "--_sf-transform-pr-vl";
10
+
11
+ @mixin FlexElementTransformProps() {
12
+ &:not(#{$editorBodySelector}) {
13
+ :is(#{$sectionWrapper} *, #{$le} *) {
14
+ &:is(#{$gridSelector}, #{$elementSelector}) {
15
+ @include FlexUpdatedPrefixCSSVariable($var, false, transform, none);
16
+ transform: var(#{$var}, none);
17
+ }
18
+ }
19
+ }
20
+ }
@@ -331,6 +331,7 @@ export declare const CMSElementsListEnum: {
331
331
  LOADER: string;
332
332
  PRODUCT_BRAND_IMAGE: string;
333
333
  ADD_PRODUCTS_TAB: string;
334
+ QUOTA_DETAILS: string;
334
335
  };
335
336
  export declare enum CMSResponsiveModeEnums {
336
337
  DESKTOP = "desktop",
@@ -56,6 +56,14 @@ export interface CMSIBCommonInterface {
56
56
  isReadOnly?: boolean;
57
57
  parentRef?: string;
58
58
  }
59
+ export interface CMSIBCommonTypeV2 {
60
+ value: any;
61
+ property: string;
62
+ isDefault: boolean;
63
+ }
64
+ export interface CMSIBSizeInterfaceV2 extends CMSIBCommonTypeV2 {
65
+ unit?: number | string;
66
+ }
59
67
  export interface CMSIBSizeInterface extends CMSIBCommonInterface {
60
68
  unit?: number | string;
61
69
  }
@@ -167,3 +175,20 @@ export type FlexOverFlowDataType = {
167
175
  scrollDirection: Record<string, CMSIBCommonInterface>;
168
176
  maxHeight: Record<string, CMSIBCommonInterface>;
169
177
  };
178
+ export type FlexTranformDirectionType = {
179
+ x: CMSIBSizeInterfaceV2;
180
+ y: CMSIBSizeInterfaceV2;
181
+ };
182
+ export type FlexTransformDatatype = {
183
+ rotate: CMSIBCommonTypeV2;
184
+ translate: CMSIBCommonTypeV2 & {
185
+ value: FlexTranformDirectionType;
186
+ };
187
+ skew: CMSIBCommonTypeV2 & {
188
+ value: FlexTranformDirectionType;
189
+ };
190
+ scale: CMSIBCommonTypeV2 & {
191
+ value: FlexTranformDirectionType;
192
+ isAll: boolean;
193
+ };
194
+ };