@sc-360-v2/storefront-cms-library 0.5.72 → 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 (124) 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/bundleDetails.scss +3774 -5072
  18. package/dist/button.scss +79 -103
  19. package/dist/buy-for-tab-container.scss +77 -106
  20. package/dist/buyForHeaders.scss +1722 -2976
  21. package/dist/cart-details.scss +481 -1012
  22. package/dist/cart-summary.scss +557 -1149
  23. package/dist/cart-wrapper.scss +37 -79
  24. package/dist/cart.scss +117 -225
  25. package/dist/cartAttributes.scss +416 -735
  26. package/dist/category-groups-element.scss +127 -108
  27. package/dist/category-groups-product-grid.scss +120 -147
  28. package/dist/category-groups-product-image.scss +1162 -1457
  29. package/dist/category-groups-product-options.scss +613 -680
  30. package/dist/category-groups-product-price.scss +1966 -3244
  31. package/dist/category-groups-quota-details.scss +210 -464
  32. package/dist/category.scss +26 -50
  33. package/dist/checkout.scss +24 -16
  34. package/dist/confirm-modal.scss +22 -2
  35. package/dist/container.scss +32 -54
  36. package/dist/countdown.scss +255 -443
  37. package/dist/coupon.scss +351 -710
  38. package/dist/default-dropdown.scss +12 -1
  39. package/dist/embroider-template-1-v2.scss +123 -172
  40. package/dist/embroider-template-1.scss +68 -104
  41. package/dist/embroidery.scss +30 -31
  42. package/dist/employee-bulk-order.scss +418 -142
  43. package/dist/faq.scss +228 -408
  44. package/dist/filter-results.scss +125 -265
  45. package/dist/filters.scss +900 -1797
  46. package/dist/gallery-slider-temp.scss +432 -750
  47. package/dist/global-styles.scss +218 -198
  48. package/dist/grid.scss +25 -33
  49. package/dist/hotspot.scss +68 -115
  50. package/dist/image-temp.scss +21 -20
  51. package/dist/item-stock.scss +9 -16
  52. package/dist/kitDetails.scss +2719 -4299
  53. package/dist/kits.scss +24 -19
  54. package/dist/language-selector.scss +211 -361
  55. package/dist/last-x-orders.scss +95 -174
  56. package/dist/layouter-item.scss +75 -103
  57. package/dist/layouter-pro-item.scss +89 -95
  58. package/dist/layouter-pro.scss +87 -92
  59. package/dist/layouter.scss +383 -445
  60. package/dist/light-box-v2.scss +89 -104
  61. package/dist/login.scss +287 -566
  62. package/dist/map.scss +221 -368
  63. package/dist/marchandiserSets.scss +95 -104
  64. package/dist/mega-menu-container.scss +96 -109
  65. package/dist/mega-menu.scss +624 -731
  66. package/dist/menu-item.scss +2 -2
  67. package/dist/menu-v2.scss +507 -619
  68. package/dist/multi-select-dropdown.scss +27 -3
  69. package/dist/my-templates.scss +38 -9
  70. package/dist/option-bar.scss +215 -375
  71. package/dist/order-status.scss +646 -1117
  72. package/dist/overflow-module.scss +6 -7
  73. package/dist/past-orders.scss +118 -149
  74. package/dist/payment-methods.scss +46 -30
  75. package/dist/pickup-locations.scss +558 -1118
  76. package/dist/position-module.scss +20 -17
  77. package/dist/prefix-list.scss +21 -10
  78. package/dist/product-actions.scss +1750 -2055
  79. package/dist/product-basic-elements.scss +108 -169
  80. package/dist/product-highlights.scss +107 -152
  81. package/dist/product-image-bundles.scss +337 -642
  82. package/dist/product-inventory.scss +673 -1357
  83. package/dist/product-labels.scss +84 -105
  84. package/dist/product-options.scss +1117 -1274
  85. package/dist/product-price.scss +1283 -2561
  86. package/dist/product-promotions.scss +1388 -2830
  87. package/dist/product-sizechart.scss +516 -905
  88. package/dist/product.scss +28 -61
  89. package/dist/productDetails.scss +19 -39
  90. package/dist/profile.scss +207 -447
  91. package/dist/quantity-selector.scss +837 -1074
  92. package/dist/quick-inventory-check.scss +95 -174
  93. package/dist/quick-links.scss +55 -133
  94. package/dist/quick-order-pad.scss +218 -271
  95. package/dist/quota-details.scss +152 -282
  96. package/dist/quotes.scss +89 -122
  97. package/dist/repeater-embla-controls.scss +35 -15
  98. package/dist/repeater-grid-toggle.scss +156 -166
  99. package/dist/repeater-item.scss +41 -64
  100. package/dist/repeater.scss +671 -814
  101. package/dist/request-for-quotes.scss +66 -16
  102. package/dist/responsive-behaviour.scss +3 -1
  103. package/dist/rfqs.scss +118 -181
  104. package/dist/scroll.scss +93 -172
  105. package/dist/search.scss +179 -326
  106. package/dist/section.scss +27 -51
  107. package/dist/shipping-payments.scss +198 -58
  108. package/dist/simple-list.scss +74 -164
  109. package/dist/social.scss +80 -145
  110. package/dist/sort.scss +11 -19
  111. package/dist/stack.scss +23 -34
  112. package/dist/static-global.scss +44 -26
  113. package/dist/stockStatus.scss +11 -19
  114. package/dist/store-locations.scss +577 -1105
  115. package/dist/tab-container.scss +81 -108
  116. package/dist/table-common.scss +217 -408
  117. package/dist/table.scss +271 -502
  118. package/dist/text-temp.scss +8 -7
  119. package/dist/theme-classes.scss +17 -13
  120. package/dist/uom-selector.scss +489 -949
  121. package/dist/user-elements.scss +529 -837
  122. package/dist/variant-picker.scss +1281 -2555
  123. package/dist/volume-pricing.scss +541 -1037
  124. 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
+ }