@sc-360-v2/storefront-cms-library 0.5.71 → 0.5.73

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.
Files changed (128) hide show
  1. package/dist/add-existing-form.scss +13 -5
  2. package/dist/add-order.scss +126 -236
  3. package/dist/add-products-tab-details.scss +1048 -2097
  4. package/dist/add-products-tab.scss +666 -1204
  5. package/dist/allocation-header-quota-details.scss +189 -407
  6. package/dist/allocationDetails.scss +1661 -2143
  7. package/dist/allocations-quota-details.scss +159 -323
  8. package/dist/allocations.scss +475 -793
  9. package/dist/amount-estimator.scss +405 -743
  10. package/dist/badge.scss +43 -18
  11. package/dist/brand-basic-elements.scss +76 -124
  12. package/dist/brand.scss +28 -55
  13. package/dist/breadcrumbs.scss +356 -718
  14. package/dist/builder.js +1 -1
  15. package/dist/bulk-variant-picker.scss +1128 -2027
  16. package/dist/bundle.scss +841 -1477
  17. package/dist/bundleCategories.scss +301 -301
  18. package/dist/bundleDetails.scss +3774 -5072
  19. package/dist/button.scss +79 -103
  20. package/dist/buy-for-tab-container.scss +77 -106
  21. package/dist/buyForHeaders.scss +1722 -2976
  22. package/dist/cart-details.scss +481 -1012
  23. package/dist/cart-summary.scss +2234 -2826
  24. package/dist/cart-wrapper.scss +37 -79
  25. package/dist/cart.scss +117 -225
  26. package/dist/cartAttributes.scss +1103 -1422
  27. package/dist/category-groups-element.scss +127 -108
  28. package/dist/category-groups-product-grid.scss +120 -147
  29. package/dist/category-groups-product-image.scss +1162 -1457
  30. package/dist/category-groups-product-options.scss +613 -680
  31. package/dist/category-groups-product-price.scss +1966 -3244
  32. package/dist/category-groups-quota-details.scss +210 -464
  33. package/dist/category.scss +26 -50
  34. package/dist/checkout.scss +24 -16
  35. package/dist/confirm-modal.scss +22 -2
  36. package/dist/container.scss +32 -54
  37. package/dist/countdown.scss +711 -899
  38. package/dist/coupon.scss +1160 -1519
  39. package/dist/default-dropdown.scss +12 -1
  40. package/dist/embroider-template-1-v2.scss +123 -172
  41. package/dist/embroider-template-1.scss +68 -104
  42. package/dist/embroidery.scss +30 -31
  43. package/dist/employee-bulk-order.scss +418 -142
  44. package/dist/faq.scss +228 -408
  45. package/dist/filter-results.scss +125 -265
  46. package/dist/filters.scss +2143 -3040
  47. package/dist/gallery-slider-temp.scss +1458 -1776
  48. package/dist/global-styles.scss +218 -198
  49. package/dist/grid.scss +25 -33
  50. package/dist/hotspot.scss +68 -115
  51. package/dist/image-temp.scss +21 -20
  52. package/dist/item-stock.scss +9 -16
  53. package/dist/kitDetails.scss +2719 -4299
  54. package/dist/kits.scss +24 -19
  55. package/dist/language-selector.scss +211 -361
  56. package/dist/last-x-orders.scss +95 -174
  57. package/dist/layouter-item.scss +75 -103
  58. package/dist/layouter-pro-item.scss +89 -95
  59. package/dist/layouter-pro.scss +87 -92
  60. package/dist/layouter.scss +383 -445
  61. package/dist/light-box-v2.scss +89 -104
  62. package/dist/login.scss +287 -566
  63. package/dist/map.scss +1212 -1359
  64. package/dist/marchandiserSets.scss +95 -104
  65. package/dist/mega-menu-container.scss +96 -109
  66. package/dist/mega-menu.scss +624 -731
  67. package/dist/menu-item.scss +2 -2
  68. package/dist/menu-v2.scss +507 -619
  69. package/dist/multi-select-dropdown.scss +27 -3
  70. package/dist/my-templates.scss +38 -9
  71. package/dist/option-bar.scss +215 -375
  72. package/dist/order-status.scss +1790 -2187
  73. package/dist/overflow-module.scss +6 -7
  74. package/dist/past-orders.scss +118 -149
  75. package/dist/payment-methods.scss +46 -30
  76. package/dist/pickup-locations.scss +558 -1118
  77. package/dist/position-module.scss +20 -17
  78. package/dist/prefix-list.scss +21 -10
  79. package/dist/product-actions.scss +1750 -2055
  80. package/dist/product-basic-elements.scss +108 -169
  81. package/dist/product-highlights.scss +303 -348
  82. package/dist/product-image-allocation.scss +1477 -1477
  83. package/dist/product-image-bundles.scss +337 -642
  84. package/dist/product-inventory.scss +673 -1357
  85. package/dist/product-labels.scss +84 -105
  86. package/dist/product-options.scss +1287 -1444
  87. package/dist/product-price.scss +1283 -2561
  88. package/dist/product-promotions.scss +1388 -2830
  89. package/dist/product-sizechart.scss +516 -905
  90. package/dist/product.scss +28 -61
  91. package/dist/productDetails.scss +19 -39
  92. package/dist/profile.scss +207 -447
  93. package/dist/quantity-selector.scss +837 -1074
  94. package/dist/quick-inventory-check.scss +95 -174
  95. package/dist/quick-links.scss +55 -133
  96. package/dist/quick-order-pad.scss +218 -271
  97. package/dist/quota-details.scss +152 -282
  98. package/dist/quotes.scss +814 -847
  99. package/dist/repeater-embla-controls.scss +35 -15
  100. package/dist/repeater-grid-toggle.scss +156 -166
  101. package/dist/repeater-item.scss +41 -64
  102. package/dist/repeater.scss +671 -814
  103. package/dist/request-for-quotes.scss +66 -16
  104. package/dist/responsive-behaviour.scss +3 -1
  105. package/dist/rfqs.scss +118 -181
  106. package/dist/scroll.scss +93 -172
  107. package/dist/search-results-heading.scss +309 -309
  108. package/dist/search.scss +179 -326
  109. package/dist/section.scss +27 -51
  110. package/dist/shipping-payments.scss +198 -58
  111. package/dist/simple-list.scss +74 -164
  112. package/dist/social.scss +80 -145
  113. package/dist/sort.scss +168 -176
  114. package/dist/stack.scss +23 -34
  115. package/dist/static-global.scss +44 -26
  116. package/dist/stockStatus.scss +11 -19
  117. package/dist/store-locations.scss +577 -1105
  118. package/dist/tab-container.scss +81 -108
  119. package/dist/table-common.scss +217 -408
  120. package/dist/table.scss +271 -502
  121. package/dist/text-temp.scss +8 -7
  122. package/dist/theme-classes.scss +17 -13
  123. package/dist/uom-selector.scss +489 -949
  124. package/dist/user-elements.scss +2588 -2896
  125. package/dist/variant-picker.scss +1281 -2555
  126. package/dist/volume-pricing.scss +541 -1037
  127. package/dist/widget.scss +153 -153
  128. package/package.json +1 -1
package/dist/marchandiserSets.scss CHANGED
@@ -4,6 +4,7 @@
4
4
 
5
5
  $resizerId: "[data-cms-tool='cms-element-resizer']";
6
6
  $resizeActive: '[data-cms-element-resizer="true"]';
7
+
7
8
  [data-div-type="element"] {
8
9
  &[data-element-type="marchandiserSets"] {
9
10
  // width: 500px;
@@ -25,117 +26,107 @@ $resizeActive: '[data-cms-element-resizer="true"]';
25
26
  &[data-background-type="gradient"] {
26
27
  --_sf-march-gradient-angle: calc(#{prepareMediaVariable(--_ctm-march-dn-gt-ae, 90)} * 1deg);
27
28
  --_sf-march-gradient-start-color: #{prepareMediaVariable(
28
- --_ctm-march-dn-gt-st-cr,
29
- transparent
30
- )};
31
- --_sf-march-gradient-start-position: calc(
32
- #{prepareMediaVariable(--_ctm-march-dn-gt-st-pn, 0)} * 1%
33
- );
34
- --_sf-march-gradient-end-color: #{prepareMediaVariable(--_ctm-march-dn-gt-ed-cr, transparent)};
35
- --_sf-march-gradient-end-position: calc(
36
- #{prepareMediaVariable(--_ctm-march-dn-gt-ed-pn, 100)} * 1%
37
- );
38
- --_sf-march-gradient-position: #{prepareMediaVariable(--_ctm-march-dn-gt-pn, center)};
39
-
40
- &[data-gradient-type="Linear Gradient"] {
41
- background-image: linear-gradient(
42
- var(--_sf-march-gradient-angle),
43
- var(--_sf-march-gradient-start-color) var(--_sf-march-gradient-start-position),
44
- var(--_sf-march-gradient-end-color) var(--_sf-march-gradient-end-position)
45
- );
46
- }
29
+ --_ctm-march-dn-gt-st-cr,
30
+ transparent)
31
+ }
47
32
 
48
- &[data-gradient-type="Radial Gradient"] {
49
- background-image: radial-gradient(
50
- circle at var(--_sf-march-gradient-position),
33
+ ;
34
+ --_sf-march-gradient-start-position: calc(#{prepareMediaVariable(--_ctm-march-dn-gt-st-pn, 0)} * 1%);
35
+ --_sf-march-gradient-end-color: #{prepareMediaVariable(--_ctm-march-dn-gt-ed-cr, transparent)};
36
+ --_sf-march-gradient-end-position: calc(#{prepareMediaVariable(--_ctm-march-dn-gt-ed-pn, 100)} * 1%);
37
+ --_sf-march-gradient-position: #{prepareMediaVariable(--_ctm-march-dn-gt-pn, center)};
38
+
39
+ &[data-gradient-type="Linear Gradient"] {
40
+ background-image: linear-gradient(var(--_sf-march-gradient-angle),
51
41
  var(--_sf-march-gradient-start-color) var(--_sf-march-gradient-start-position),
52
- var(--_sf-march-gradient-end-color) var(--_sf-march-gradient-end-position)
53
- );
54
- }
42
+ var(--_sf-march-gradient-end-color) var(--_sf-march-gradient-end-position));
55
43
  }
56
44
 
57
- &[data-background-type="image"] {
58
- background-image: prepareMediaVariable(--_ctm-march-dn-bd-ie);
59
- background-attachment: prepareMediaVariable(--_ctm-march-dn-bd-at);
60
- background-position: prepareMediaVariable(--_ctm-march-dn-bd-pn);
61
- background-position-y: prepareMediaVariable(--_ctm-march-dn-bd-pn-y);
62
- background-repeat: prepareMediaVariable(--_ctm-march-dn-bd-rt);
63
- background-size: prepareMediaVariable(--_ctm-march-dn-bd-se);
45
+ &[data-gradient-type="Radial Gradient"] {
46
+ background-image: radial-gradient(circle at var(--_sf-march-gradient-position),
47
+ var(--_sf-march-gradient-start-color) var(--_sf-march-gradient-start-position),
48
+ var(--_sf-march-gradient-end-color) var(--_sf-march-gradient-end-position));
64
49
  }
50
+ }
65
51
 
66
- // background-color: var(
67
- // --_ctm-mob-march-dn-bd-cr,
68
- // var(--_ctm-tab-march-dn-bd-cr, var(--_ctm-march-dn-bd-cr))
69
- // );
70
- // background-image: var(
71
- // --_ctm-mob-march-dn-bd-ie,
72
- // var(--_ctm-tab-march-dn-bd-ie, var(--_ctm-march-dn-bd-ie))
73
- // );
74
- // background-attachment: var(
75
- // --_ctm-mob-march-dn-bd-at,
76
- // var(--_ctm-tab-march-dn-bd-at, var(--_ctm-march-dn-bd-at))
77
- // );
78
- // background-position: var(
79
- // --_ctm-mob-march-dn-bd-pn,
80
- // var(--_ctm-tab-march-dn-bd-pn, var(--_ctm-march-dn-bd-pn))
81
- // );
82
- // background-repeat: var(
83
- // --_ctm-mob-march-dn-bd-rt,
84
- // var(--_ctm-tab-march-dn-bd-rt, var(--_ctm-march-dn-bd-rt))
85
- // );
86
- // background-size: var(
87
- // --_ctm-mob-march-dn-bd-se,
88
- // var(--_ctm-tab-march-dn-bd-se, var(--_ctm-march-dn-bd-se))
89
- // );
90
- min-height: var(--_ctm-mob-march-lt-ht, var(--_ctm-tab-march-lt-ht, var(--_ctm-march-lt-ht)));
91
-
92
- // Layout padding, and the design section's border and shadow. None of these were
93
- // consumed here before — the schema declares all of them, but this stylesheet only
94
- // handled width, margin, min-height and the background, so Padding, Border Style,
95
- // Border Radius and Box Shadow each had nothing reading the value they wrote.
96
- // Every variable carries an explicit fallback so elements saved before this keep
97
- // rendering bare rather than inheriting the parent's border or background.
98
- padding: prepareMediaVariable(--_ctm-march-lt-pg, 0);
99
- // Padding and border are drawn inside the width and height set in layout instead of
100
- // adding to them, so the element keeps the size the user asked for.
101
- box-sizing: border-box;
102
-
103
- border-color: prepareMediaVariable(--_ctm-march-dn-br-cr, transparent);
104
- border-style: prepareMediaVariable(--_ctm-march-dn-br-se, none);
105
- border-width: prepareMediaVariable(--_ctm-march-dn-br-wh, 0);
106
- border-radius: prepareMediaVariable(--_ctm-march-dn-br-rs, 0);
107
-
108
- box-shadow: var(
109
- --_show-shadow,
110
- prepareMediaVariable(--_ctm-march-dn-sw-ae, 0 0)
111
- prepareMediaVariable(--_ctm-march-dn-sw-br, 0)
112
- prepareMediaVariable(--_ctm-march-dn-sw-sd, 0)
113
- prepareMediaVariable(--_ctm-march-dn-sw-cr, transparent)
114
- );
115
-
116
- // "Show Border" / "Show Shadow" switches, surfaced as data attributes by the
117
- // element since the properties above are painted from variables.
118
- &[data-show-border="false"] {
119
- border-width: 0;
120
- border-style: none;
121
- }
122
- &[data-show-shadow="false"] {
123
- --_show-shadow: none;
124
- }
52
+ &[data-background-type="image"] {
53
+ background-image: prepareMediaVariable(--_ctm-march-dn-bd-ie);
54
+ background-attachment: prepareMediaVariable(--_ctm-march-dn-bd-at);
55
+ background-position: prepareMediaVariable(--_ctm-march-dn-bd-pn);
56
+ background-position-y: prepareMediaVariable(--_ctm-march-dn-bd-pn-y);
57
+ background-repeat: prepareMediaVariable(--_ctm-march-dn-bd-rt);
58
+ background-size: prepareMediaVariable(--_ctm-march-dn-bd-se);
59
+ }
60
+
61
+ // background-color: var(
62
+ // --_ctm-mob-march-dn-bd-cr,
63
+ // var(--_ctm-tab-march-dn-bd-cr, var(--_ctm-march-dn-bd-cr))
64
+ // );
65
+ // background-image: var(
66
+ // --_ctm-mob-march-dn-bd-ie,
67
+ // var(--_ctm-tab-march-dn-bd-ie, var(--_ctm-march-dn-bd-ie))
68
+ // );
69
+ // background-attachment: var(
70
+ // --_ctm-mob-march-dn-bd-at,
71
+ // var(--_ctm-tab-march-dn-bd-at, var(--_ctm-march-dn-bd-at))
72
+ // );
73
+ // background-position: var(
74
+ // --_ctm-mob-march-dn-bd-pn,
75
+ // var(--_ctm-tab-march-dn-bd-pn, var(--_ctm-march-dn-bd-pn))
76
+ // );
77
+ // background-repeat: var(
78
+ // --_ctm-mob-march-dn-bd-rt,
79
+ // var(--_ctm-tab-march-dn-bd-rt, var(--_ctm-march-dn-bd-rt))
80
+ // );
81
+ // background-size: var(
82
+ // --_ctm-mob-march-dn-bd-se,
83
+ // var(--_ctm-tab-march-dn-bd-se, var(--_ctm-march-dn-bd-se))
84
+ // );
85
+ min-height: var(--_ctm-mob-march-lt-ht, var(--_ctm-tab-march-lt-ht, var(--_ctm-march-lt-ht)));
86
+
87
+ // Layout padding, and the design section's border and shadow. None of these were
88
+ // consumed here before — the schema declares all of them, but this stylesheet only
89
+ // handled width, margin, min-height and the background, so Padding, Border Style,
90
+ // Border Radius and Box Shadow each had nothing reading the value they wrote.
91
+ // Every variable carries an explicit fallback so elements saved before this keep
92
+ // rendering bare rather than inheriting the parent's border or background.
93
+ padding: prepareMediaVariable(--_ctm-march-lt-pg, 0);
94
+ // Padding and border are drawn inside the width and height set in layout instead of
95
+ // adding to them, so the element keeps the size the user asked for.
96
+ box-sizing: border-box;
97
+
98
+ border-color: prepareMediaVariable(--_ctm-march-dn-br-cr, transparent);
99
+ border-style: prepareMediaVariable(--_ctm-march-dn-br-se, none);
100
+ border-width: prepareMediaVariable(--_ctm-march-dn-br-wh, 0);
101
+ border-radius: prepareMediaVariable(--_ctm-march-dn-br-rs, 0);
102
+
103
+ box-shadow: var(--_show-shadow,
104
+ prepareMediaVariable(--_ctm-march-dn-sw-ae, 0 0) prepareMediaVariable(--_ctm-march-dn-sw-br, 0) prepareMediaVariable(--_ctm-march-dn-sw-sd, 0) prepareMediaVariable(--_ctm-march-dn-sw-cr, transparent));
105
+
106
+ // "Show Border" / "Show Shadow" switches, surfaced as data attributes by the
107
+ // element since the properties above are painted from variables.
108
+ &[data-show-border="false"] {
109
+ border-width: 0;
110
+ border-style: none;
111
+ }
112
+
113
+ &[data-show-shadow="false"] {
114
+ --_show-shadow: none;
115
+ }
116
+
117
+ // &:not(:has(#{$resizerId}#{$resizeActive})) {
118
+ // min-height: 100px !important;
119
+ // }
125
120
 
126
- // &:not(:has(#{$resizerId}#{$resizeActive})) {
127
- // min-height: 100px !important;
128
- // }
129
-
130
- & > div {
131
- &.wrapper {
132
- width: 100%;
133
- height: 100%;
134
- height: var(--_ctm-march-lt-ht);
135
- // grid-template-rows: auto !important;
136
- grid-template-columns: 100% !important;
137
- // grid-template-rows: max(var(--_ctm-pro-lt-ht), auto) !important;
138
- }
121
+ &>div {
122
+ &.wrapper {
123
+ width: 100%;
124
+ height: 100%;
125
+ height: var(--_ctm-march-lt-ht);
126
+ // grid-template-rows: auto !important;
127
+ grid-template-columns: 100% !important;
128
+ // grid-template-rows: max(var(--_ctm-pro-lt-ht), auto) !important;
139
129
  }
140
130
  }
141
131
  }
132
+ }
package/dist/mega-menu-container.scss CHANGED
@@ -2,6 +2,7 @@
2
2
  @use "sass:list";
3
3
  @use "./functions.scss" as *;
4
4
  $vtl: "[data-element-type='mega-menu'] > .vtl";
5
+
5
6
  [data-div-type="element"] {
6
7
  &[data-element-type="mgContainer"] {
7
8
  // width: var(--_sf-con-nw-wh);
@@ -17,11 +18,12 @@ $vtl: "[data-element-type='mega-menu'] > .vtl";
17
18
  &:is(#{$vtl} *) {
18
19
  --_sf-bm-gls-wdth-vl: prepareMediaVariable(--_ctm-mgcon-lt-wh);
19
20
  }
21
+
20
22
  width: var(--_sf-bm-gls-wdth-vl, 100vw);
21
23
  min-height: var(--_ctm-mgcon-lt-mn-ht);
22
24
  margin: prepareMediaVariable(--_ctm-mgcon-lt-mn);
23
25
 
24
- & > div {
26
+ &>div {
25
27
  &.wrapper {
26
28
  // width: 100%;
27
29
  width: prepareMediaVariable(--_ctm-mgcon-lt-wh);
@@ -34,119 +36,104 @@ $vtl: "[data-element-type='mega-menu'] > .vtl";
34
36
  }
35
37
 
36
38
  &:is([data-background-type="gradient"] > *).wrapper {
37
- --_sf-mgcon-gradient-angle: calc(
38
- #{prepareMediaVariable(--_ctm-mgcon-dn-gt-ae, 90)} * 1deg
39
- );
39
+ --_sf-mgcon-gradient-angle: calc(#{prepareMediaVariable(--_ctm-mgcon-dn-gt-ae, 90)} * 1deg);
40
40
  --_sf-mgcon-gradient-start-color: #{prepareMediaVariable(
41
- --_ctm-mgcon-dn-gt-st-cr,
42
- transparent
43
- )};
44
- --_sf-mgcon-gradient-start-position: calc(
45
- #{prepareMediaVariable(--_ctm-mgcon-dn-gt-st-pn, 0)} * 1%
46
- );
47
- --_sf-mgcon-gradient-end-color: #{prepareMediaVariable(
48
- --_ctm-mgcon-dn-gt-ed-cr,
49
- transparent
50
- )};
51
- --_sf-mgcon-gradient-end-position: calc(
52
- #{prepareMediaVariable(--_ctm-mgcon-dn-gt-ed-pn, 100)} * 1%
53
- );
54
- --_sf-mgcon-gradient-position: #{prepareMediaVariable(--_ctm-mgcon-dn-gt-pn, center)};
41
+ --_ctm-mgcon-dn-gt-st-cr,
42
+ transparent)
55
43
  }
56
44
 
57
- &:is([data-gradient-type="Linear Gradient"] > *).wrapper {
58
- background-image: linear-gradient(
59
- var(--_sf-mgcon-gradient-angle),
60
- var(--_sf-mgcon-gradient-start-color) var(--_sf-mgcon-gradient-start-position),
61
- var(--_sf-mgcon-gradient-end-color) var(--_sf-mgcon-gradient-end-position)
62
- );
63
- }
45
+ ;
46
+ --_sf-mgcon-gradient-start-position: calc(#{prepareMediaVariable(--_ctm-mgcon-dn-gt-st-pn, 0)} * 1%);
47
+ --_sf-mgcon-gradient-end-color: #{prepareMediaVariable(
48
+ --_ctm-mgcon-dn-gt-ed-cr,
49
+ transparent)
50
+ }
64
51
 
65
- &:is([data-gradient-type="Radial Gradient"] > *).wrapper {
66
- background-image: radial-gradient(
67
- circle at var(--_sf-mgcon-gradient-position),
68
- var(--_sf-mgcon-gradient-start-color) var(--_sf-mgcon-gradient-start-position),
69
- var(--_sf-mgcon-gradient-end-color) var(--_sf-mgcon-gradient-end-position)
70
- );
71
- }
72
- &:is([data-background-type="image"] > *).wrapper {
73
- background-image: prepareMediaVariable(--_ctm-mgcon-dn-bd-ie);
74
- background-attachment: prepareMediaVariable(--_ctm-mgcon-dn-bd-at);
75
- background-position: prepareMediaVariable(--_ctm-mgcon-dn-bd-pn);
76
- background-position-y: prepareMediaVariable(--_ctm-mgcon-dn-bd-pn-y);
77
- background-repeat: prepareMediaVariable(--_ctm-mgcon-dn-bd-rt);
78
- background-size: prepareMediaVariable(--_ctm-mgcon-dn-bd-se);
79
- }
52
+ ;
53
+ --_sf-mgcon-gradient-end-position: calc(#{prepareMediaVariable(--_ctm-mgcon-dn-gt-ed-pn, 100)} * 1%);
54
+ --_sf-mgcon-gradient-position: #{prepareMediaVariable(--_ctm-mgcon-dn-gt-pn, center)};
55
+ }
80
56
 
81
- // background-color: var(
82
- // --_ctm-mob-mgcon-dn-bd-cr,
83
- // var(--_ctm-tab-mgcon-dn-bd-cr, var(--_ctm-mgcon-dn-bd-cr))
84
- // );
85
- // background-image: var(
86
- // --_ctm-mob-mgcon-dn-bd-ie,
87
- // var(--_ctm-tab-mgcon-dn-bd-ie, var(--_ctm-mgcon-dn-bd-ie))
88
- // );
89
- // background-attachment: var(
90
- // --_ctm-mob-mgcon-dn-bd-at,
91
- // var(--_ctm-tab-mgcon-dn-bd-at, var(--_ctm-mgcon-dn-bd-at))
92
- // );
93
- // background-position: var(
94
- // --_ctm-mob-mgcon-dn-bd-pn,
95
- // var(--_ctm-tab-mgcon-dn-bd-pn, var(--_ctm-mgcon-dn-bd-pn))
96
- // );
97
- // background-repeat: var(
98
- // --_ctm-mob-mgcon-dn-bd-rt,
99
- // var(--_ctm-tab-mgcon-dn-bd-rt, var(--_ctm-mgcon-dn-bd-rt))
100
- // );
101
- // background-size: var(
102
- // --_ctm-mob-mgcon-dn-bd-se,
103
- // var(--_ctm-tab-mgcon-dn-bd-se, var(--_ctm-mgcon-dn-bd-se))
104
- // );
105
- border-radius: var(
106
- --_ctm-mob-mgcon-dn-br-rs,
107
- var(--_ctm-tab-mgcon-dn-br-rs, var(--_ctm-mgcon-dn-br-rs))
108
- );
109
- border-color: var(
110
- --_ctm-mob-mgcon-dn-br-cr,
111
- var(--_ctm-tab-mgcon-dn-br-cr, var(--_ctm-mgcon-dn-br-cr))
112
- );
113
- border-style: var(
114
- --_ctm-mob-mgcon-dn-br-se,
115
- var(--_ctm-tab-mgcon-dn-br-se, var(--_ctm-mgcon-dn-br-se))
116
- );
117
- border-width: var(
118
- --_ctm-mob-mgcon-dn-br-wh,
119
- var(--_ctm-tab-mgcon-dn-br-wh, var(--_ctm-mgcon-dn-br-wh))
120
- );
121
- box-shadow: prepareMediaVariable(--_ctm-mgcon-dn-sw-ae)
122
- prepareMediaVariable(--_ctm-mgcon-dn-sw-br) prepareMediaVariable(--_ctm-mgcon-dn-sw-sd)
123
- prepareMediaVariable(--_ctm-mgcon-dn-sw-cr);
124
- // box-shadow: var(
125
- // --_hover-show-shadow,
126
- // var(
127
- // --_sf-hr-bx-sw,
128
- // var(
129
- // --_show-shadow,
130
- // var(
131
- // --_ctm-mob-dn-dt-se-sw-ae,
132
- // var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
133
- // )
134
- // var(
135
- // --_ctm-mob-dn-dt-se-sw-br,
136
- // var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
137
- // )
138
- // var(
139
- // --_ctm-mob-dn-dt-se-sw-sd,
140
- // var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
141
- // )
142
- // var(
143
- // --_ctm-mob-dn-dt-se-sw-cr,
144
- // var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
145
- // )
146
- // )
147
- // )
148
- // );
149
- }
57
+ &:is([data-gradient-type="Linear Gradient"] > *).wrapper {
58
+ background-image: linear-gradient(var(--_sf-mgcon-gradient-angle),
59
+ var(--_sf-mgcon-gradient-start-color) var(--_sf-mgcon-gradient-start-position),
60
+ var(--_sf-mgcon-gradient-end-color) var(--_sf-mgcon-gradient-end-position));
61
+ }
62
+
63
+ &:is([data-gradient-type="Radial Gradient"] > *).wrapper {
64
+ background-image: radial-gradient(circle at var(--_sf-mgcon-gradient-position),
65
+ var(--_sf-mgcon-gradient-start-color) var(--_sf-mgcon-gradient-start-position),
66
+ var(--_sf-mgcon-gradient-end-color) var(--_sf-mgcon-gradient-end-position));
150
67
  }
68
+
69
+ &:is([data-background-type="image"] > *).wrapper {
70
+ background-image: prepareMediaVariable(--_ctm-mgcon-dn-bd-ie);
71
+ background-attachment: prepareMediaVariable(--_ctm-mgcon-dn-bd-at);
72
+ background-position: prepareMediaVariable(--_ctm-mgcon-dn-bd-pn);
73
+ background-position-y: prepareMediaVariable(--_ctm-mgcon-dn-bd-pn-y);
74
+ background-repeat: prepareMediaVariable(--_ctm-mgcon-dn-bd-rt);
75
+ background-size: prepareMediaVariable(--_ctm-mgcon-dn-bd-se);
76
+ }
77
+
78
+ // background-color: var(
79
+ // --_ctm-mob-mgcon-dn-bd-cr,
80
+ // var(--_ctm-tab-mgcon-dn-bd-cr, var(--_ctm-mgcon-dn-bd-cr))
81
+ // );
82
+ // background-image: var(
83
+ // --_ctm-mob-mgcon-dn-bd-ie,
84
+ // var(--_ctm-tab-mgcon-dn-bd-ie, var(--_ctm-mgcon-dn-bd-ie))
85
+ // );
86
+ // background-attachment: var(
87
+ // --_ctm-mob-mgcon-dn-bd-at,
88
+ // var(--_ctm-tab-mgcon-dn-bd-at, var(--_ctm-mgcon-dn-bd-at))
89
+ // );
90
+ // background-position: var(
91
+ // --_ctm-mob-mgcon-dn-bd-pn,
92
+ // var(--_ctm-tab-mgcon-dn-bd-pn, var(--_ctm-mgcon-dn-bd-pn))
93
+ // );
94
+ // background-repeat: var(
95
+ // --_ctm-mob-mgcon-dn-bd-rt,
96
+ // var(--_ctm-tab-mgcon-dn-bd-rt, var(--_ctm-mgcon-dn-bd-rt))
97
+ // );
98
+ // background-size: var(
99
+ // --_ctm-mob-mgcon-dn-bd-se,
100
+ // var(--_ctm-tab-mgcon-dn-bd-se, var(--_ctm-mgcon-dn-bd-se))
101
+ // );
102
+ border-radius: var(--_ctm-mob-mgcon-dn-br-rs,
103
+ var(--_ctm-tab-mgcon-dn-br-rs, var(--_ctm-mgcon-dn-br-rs)));
104
+ border-color: var(--_ctm-mob-mgcon-dn-br-cr,
105
+ var(--_ctm-tab-mgcon-dn-br-cr, var(--_ctm-mgcon-dn-br-cr)));
106
+ border-style: var(--_ctm-mob-mgcon-dn-br-se,
107
+ var(--_ctm-tab-mgcon-dn-br-se, var(--_ctm-mgcon-dn-br-se)));
108
+ border-width: var(--_ctm-mob-mgcon-dn-br-wh,
109
+ var(--_ctm-tab-mgcon-dn-br-wh, var(--_ctm-mgcon-dn-br-wh)));
110
+ box-shadow: prepareMediaVariable(--_ctm-mgcon-dn-sw-ae) prepareMediaVariable(--_ctm-mgcon-dn-sw-br) prepareMediaVariable(--_ctm-mgcon-dn-sw-sd) prepareMediaVariable(--_ctm-mgcon-dn-sw-cr);
111
+ // box-shadow: var(
112
+ // --_hover-show-shadow,
113
+ // var(
114
+ // --_sf-hr-bx-sw,
115
+ // var(
116
+ // --_show-shadow,
117
+ // var(
118
+ // --_ctm-mob-dn-dt-se-sw-ae,
119
+ // var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
120
+ // )
121
+ // var(
122
+ // --_ctm-mob-dn-dt-se-sw-br,
123
+ // var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
124
+ // )
125
+ // var(
126
+ // --_ctm-mob-dn-dt-se-sw-sd,
127
+ // var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
128
+ // )
129
+ // var(
130
+ // --_ctm-mob-dn-dt-se-sw-cr,
131
+ // var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
132
+ // )
133
+ // )
134
+ // )
135
+ // );
151
136
  }
152
137
  }
138
+ }
139
+ }