@sc-360-v2/storefront-cms-library 0.5.70 → 0.5.72

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 (141) hide show
  1. package/dist/add-existing-form.scss +68 -68
  2. package/dist/add-products-tab-details.scss +4071 -4071
  3. package/dist/add-products-tab-uom-details.scss +1106 -1106
  4. package/dist/add-products-tab.scss +2377 -2377
  5. package/dist/allocation-header-quota-details.scss +609 -609
  6. package/dist/allocations-quota-details.scss +525 -525
  7. package/dist/amount-estimator.scss +1192 -1192
  8. package/dist/animation-control.scss +23 -23
  9. package/dist/badge.scss +408 -408
  10. package/dist/brand-basic-elements.scss +387 -387
  11. package/dist/brand.scss +142 -142
  12. package/dist/breadcrumbs.scss +966 -966
  13. package/dist/builder.js +1 -1
  14. package/dist/bulk-order-pad.scss +692 -692
  15. package/dist/bundleDetails.scss +6189 -6189
  16. package/dist/buy-for-tab-container.scss +141 -141
  17. package/dist/buy-for-tab.scss +649 -649
  18. package/dist/buy-for-tabs-container-item.scss +80 -80
  19. package/dist/buyForPopup.scss +339 -339
  20. package/dist/cart-details.scss +3986 -3986
  21. package/dist/cart-products-sidebar.scss +211 -211
  22. package/dist/cart-wrapper.scss +127 -127
  23. package/dist/cartDropdownOverlay.scss +653 -653
  24. package/dist/cartGrouping.scss +89 -89
  25. package/dist/category-groups-element.scss +739 -739
  26. package/dist/category-groups-quota-details.scss +626 -626
  27. package/dist/category.scss +137 -137
  28. package/dist/categoryDetails.scss +61 -61
  29. package/dist/categoryWidget.scss +34 -34
  30. package/dist/checkbox-radio.scss +124 -124
  31. package/dist/code-temp.scss +59 -59
  32. package/dist/colorpicker_v2.scss +62 -62
  33. package/dist/common-element.scss +35 -35
  34. package/dist/confirm-modal.scss +370 -370
  35. package/dist/confirmationModal.scss +139 -139
  36. package/dist/contact-us.scss +105 -105
  37. package/dist/container.scss +168 -168
  38. package/dist/custom-fonts.scss +100 -100
  39. package/dist/customization-tree.scss +162 -162
  40. package/dist/default-dropdown.scss +259 -259
  41. package/dist/dropdownTemplate.scss +699 -699
  42. package/dist/editCartItem.scss +110 -110
  43. package/dist/embed-temp.scss +73 -73
  44. package/dist/embroider-preview-element.scss +94 -94
  45. package/dist/embroider-template-1-v2.scss +1105 -1105
  46. package/dist/embroider-template-1.scss +501 -501
  47. package/dist/embroidery.scss +247 -247
  48. package/dist/employee-bulk-order.scss +4060 -4060
  49. package/dist/emtpy-templates.scss +165 -165
  50. package/dist/faq.scss +696 -696
  51. package/dist/fb-dropdown.scss +135 -135
  52. package/dist/filter-results.scss +361 -361
  53. package/dist/flex-text-editor.scss +271 -271
  54. package/dist/form-preview.scss +530 -530
  55. package/dist/global-styles.scss +198 -198
  56. package/dist/grid.scss +169 -169
  57. package/dist/icon-library.scss +78 -78
  58. package/dist/image-for-product.scss +21 -21
  59. package/dist/image-temp.scss +203 -203
  60. package/dist/item-stock.scss +93 -93
  61. package/dist/kitDetails.scss +5739 -5739
  62. package/dist/kits.scss +305 -305
  63. package/dist/language-selector.scss +948 -948
  64. package/dist/last-x-orders.scss +285 -285
  65. package/dist/layouter-item.scss +141 -141
  66. package/dist/layouter-pro-item.scss +139 -139
  67. package/dist/layouter-pro.scss +134 -134
  68. package/dist/layouter.scss +491 -491
  69. package/dist/light-box-v2.scss +155 -155
  70. package/dist/lightbox.scss +78 -78
  71. package/dist/loader.scss +37 -37
  72. package/dist/login.scss +29 -11
  73. package/dist/marchandiserSets.scss +141 -141
  74. package/dist/mega-menu-container.scss +152 -152
  75. package/dist/menu-item.scss +19 -19
  76. package/dist/menu-v2.scss +999 -999
  77. package/dist/menu.scss +174 -174
  78. package/dist/multi-select-dropdown.scss +316 -316
  79. package/dist/my-templates.scss +477 -477
  80. package/dist/my-wishlist.scss +27 -27
  81. package/dist/option-bar.scss +886 -886
  82. package/dist/order-processing.scss +61 -61
  83. package/dist/order-status.scss +74 -0
  84. package/dist/overflow-module.scss +63 -63
  85. package/dist/past-orders.scss +1039 -1039
  86. package/dist/payment-methods.scss +307 -307
  87. package/dist/phone-input.scss +208 -208
  88. package/dist/pickup-locations.scss +1359 -1359
  89. package/dist/position-module.scss +95 -95
  90. package/dist/prefix-list.scss +86 -86
  91. package/dist/product-actions.scss +2872 -2872
  92. package/dist/product-basic-elements.scss +600 -600
  93. package/dist/product-customizations.scss +155 -155
  94. package/dist/product-inventory.scss +1621 -1621
  95. package/dist/product-labels.scss +265 -265
  96. package/dist/product-price.scss +3392 -3392
  97. package/dist/product-promotions.scss +3224 -3224
  98. package/dist/product-sizechart.scss +1921 -1921
  99. package/dist/product.scss +140 -140
  100. package/dist/profile.scss +824 -824
  101. package/dist/quantity-selector.scss +1074 -1074
  102. package/dist/quick-inventory-check.scss +285 -285
  103. package/dist/quick-links.scss +627 -627
  104. package/dist/quota-details.scss +526 -526
  105. package/dist/repeater-embla-controls.scss +211 -211
  106. package/dist/repeater-grid-toggle.scss +206 -206
  107. package/dist/repeater-item.scss +152 -152
  108. package/dist/repeater.scss +946 -946
  109. package/dist/request-for-quotes.scss +841 -841
  110. package/dist/responsive-behaviour.scss +29 -29
  111. package/dist/rfqs.scss +861 -861
  112. package/dist/scroll.scss +414 -414
  113. package/dist/search.scss +689 -689
  114. package/dist/section.scss +276 -276
  115. package/dist/shareCartSideBar.scss +254 -254
  116. package/dist/shipping-estimator.scss +41 -41
  117. package/dist/shipping-payments.scss +2518 -2518
  118. package/dist/simple-list.scss +338 -338
  119. package/dist/skeleton.scss +64 -64
  120. package/dist/sort.scss +176 -176
  121. package/dist/spotlight.scss +1706 -1706
  122. package/dist/stack.scss +171 -171
  123. package/dist/static-global.scss +292 -292
  124. package/dist/static-text.scss +52 -52
  125. package/dist/stockStatus.scss +70 -70
  126. package/dist/store-locations.scss +1592 -1592
  127. package/dist/sub-category.scss +74 -74
  128. package/dist/submit-quote.scss +275 -275
  129. package/dist/tab-container-item.scss +80 -80
  130. package/dist/tab-container.scss +141 -141
  131. package/dist/table.scss +9 -0
  132. package/dist/tabs.scss +440 -440
  133. package/dist/text-temp.scss +109 -109
  134. package/dist/theme-classes.scss +421 -421
  135. package/dist/toaster.scss +392 -392
  136. package/dist/toggle-button.scss +32 -32
  137. package/dist/transform-properties-module.scss +20 -20
  138. package/dist/types/builder/tools/element-edit/login.d.ts +1 -0
  139. package/dist/types/builder/tools/element-edit/resetPassword.d.ts +1 -0
  140. package/dist/wishlist-overlay.scss +48 -48
  141. package/package.json +1 -1
@@ -1,338 +1,338 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./functions.scss" as *;
4
- $subMenuContainer: ".flex__submenu__container";
5
- $nodatap: ".no__menu_item__p";
6
- $subMenuItem: ".flex__sub__menu__item";
7
- $subMenuItemText: ".flex__sub__menu__item__text";
8
-
9
- [data-div-type="element"] {
10
- &[data-element-type="simple-list"] {
11
- width: calc(1% * #{prepareMediaVariable(--_ctm-ele-nw-wh-vl)});
12
- margin: prepareMediaVariable(--_ctm-lt-mn);
13
-
14
- & > .wrapper {
15
- width: 100%;
16
-
17
- & > #{$subMenuContainer} {
18
- padding: #{prepareMediaVariable(--_ctm-lt-pg, 0px)};
19
- min-height: prepareMediaVariable(--_ctm-lt-mn-ht);
20
- background: prepareMediaVariable(--_ctm-dn-sb-mu-cr-bd-cr);
21
- border-radius: prepareMediaVariable(--_ctm-dn-sb-mu-cr-br-rs);
22
- width: 100%;
23
- display: var(--_d-flex);
24
- flex-direction: column;
25
- gap: prepareMediaVariable(--_ctm-lt-im-gp);
26
- align-items: prepareMediaVariable(--_ctm-lt-jy-ct);
27
-
28
- // &:is(#{$hrz} *) {
29
- // position: absolute;
30
- // left: calc(50% + #{prepareMediaVariable(--_ctm-dn-sb-mu-cr-cr-ot-x)});
31
- // width: calc(100% + #{prepareMediaVariable(--_ctm-dn-sb-mu-cr-cr-wh)});
32
- // top: calc(100% + #{prepareMediaVariable(--_ctm-dn-sb-mu-cr-cr-ot-y)});
33
- // transform: translateX(-50%);
34
- // z-index: 2;
35
- // }
36
- // &:is(#{$vtl} *) {
37
- // width: 100%;
38
- // }
39
-
40
- // max-height: 0px;
41
- // overflow: clip;
42
- // max-height: 500px;
43
- // overflow-y: auto;
44
- // animation: animTwo var(--_transition-duration)
45
- // var(--_transition-timing-function) 1 forwards alternate;
46
-
47
- // @keyframes animTwo {
48
- // 100% {
49
- // max-height: 500px;
50
- // overflow-y: auto;
51
- // }
52
- // }
53
-
54
- &[data-show-border="true"] {
55
- border-width: prepareMediaVariable(--_ctm-dn-sb-mu-cr-br-wh);
56
- border-color: prepareMediaVariable(--_ctm-dn-sb-mu-cr-br-cr);
57
- border-style: prepareMediaVariable(--_ctm-dn-sb-mu-cr-br-se);
58
- }
59
-
60
- &[data-show-boxshadow="true"] {
61
- box-shadow: prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-ae)
62
- prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-br)
63
- prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-sd)
64
- prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-cr);
65
- }
66
-
67
- & > li {
68
- &#{$subMenuItem} {
69
- display: var(--_d-flex);
70
- flex-direction: column;
71
- width: 100%;
72
- padding: var(
73
- --_sf-sb-it-at-pd,
74
- var(--_sf-sb-it-hr-pd, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-pg, 0px)})
75
- );
76
- background: var(
77
- --_sf-sb-it-at-bd,
78
- var(--_sf-sb-it-hr-bd, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-bd-cr)})
79
- );
80
- border-radius: var(
81
- --_sf-sb-it-at-br,
82
- var(--_sf-sb-it-hr-br, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-rs)})
83
- );
84
-
85
- &[data-show-border="true"] {
86
- border-color: var(
87
- --_sf-sb-it-at-brc,
88
- var(--_sf-sb-it-hr-brc, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-cr)})
89
- );
90
- border-width: var(
91
- --_sf-sb-it-at-bw,
92
- var(--_sf-sb-it-hr-bw, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-wh)})
93
- );
94
- border-style: var(
95
- --_sf-sb-it-at-bs,
96
- var(--_sf-sb-it-hr-bs, prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-se))
97
- );
98
- }
99
-
100
- &[data-show-boxshadow="true"] {
101
- box-shadow: var(
102
- --_sf-sb-it-at-bsa,
103
- var(
104
- --_sf-sb-it-hr-bsa,
105
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-ae)}
106
- )
107
- )
108
- var(
109
- --_sf-sb-it-at-blr,
110
- var(
111
- --_sf-sb-it-hr-blr,
112
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-br)}
113
- )
114
- )
115
- var(
116
- --_sf-sb-it-at-spr,
117
- var(
118
- --_sf-sb-it-hr-spr,
119
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-sd)}
120
- )
121
- )
122
- var(
123
- --_sf-sb-it-at-bscl,
124
- var(--_sf-sb-it-hr-bscl, prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-cr))
125
- );
126
- }
127
-
128
- &:hover {
129
- --_sf-sb-it-hr-pd: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-pg, 0px)};
130
- --_sf-sb-it-hr-bd: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-bd-cr)};
131
- --_sf-sb-it-hr-br: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-br-rs)};
132
- --_sf-sb-it-hr-brc: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-br-cr)};
133
- --_sf-sb-it-hr-bw: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-br-wh)};
134
- --_sf-sb-it-hr-bs: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-br-se)};
135
- --_sf-sb-it-hr-bsa: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-sw-ae)};
136
- --_sf-sb-it-hr-blr: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-sw-br)};
137
- --_sf-sb-it-hr-spr: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-sw-sd)};
138
- --_sf-sb-it-hr-bscl: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-sw-cr)};
139
-
140
- --_sf-sb-it-hr-ff: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-ft-fy)};
141
- --_sf-sb-it-hr-fs: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-ft-se)};
142
- --_sf-sb-it-hr-fclr: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-cr)};
143
- --_sf-sb-it-hr-fw: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-ft-wt)};
144
-
145
- --_sf-sb-it-hr-fsi: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-ft-se-ic)};
146
- --_sf-sb-it-hr-td: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-ue)};
147
- --_sf-sb-it-hr-tae: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-tt-an)};
148
- --_sf-sb-it-hr-ls: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-lr-sg)};
149
- --_sf-sb-it-hr-lh: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-le-ht)};
150
-
151
- // Per-item leading icon hover overrides.
152
- --_sf-sb-it-hr-isz-im: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-in-se-im)};
153
- --_sf-sb-it-hr-icr-im: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-in-c1-im)};
154
- }
155
-
156
- &.active {
157
- --_sf-sb-it-at-pd: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-pg)};
158
- --_sf-sb-it-at-bd: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-bd-cr)};
159
- --_sf-sb-it-at-br: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-br-rs)};
160
- --_sf-sb-it-at-brc: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-br-cr)};
161
- --_sf-sb-it-at-bw: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-br-wh)};
162
- --_sf-sb-it-at-bs: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-br-se)};
163
- --_sf-sb-it-hr-bsa: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-sw-ae)};
164
- --_sf-sb-it-at-blr: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-sw-br)};
165
- --_sf-sb-it-at-spr: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-sw-sd)};
166
- --_sf-sb-it-at-bscl: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-sw-cr)};
167
-
168
- --_sf-sb-it-at-ff: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-ft-fy)};
169
- --_sf-sb-it-at-fs: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-ft-se)};
170
- --_sf-sb-it-at-fclr: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-cr)};
171
- --_sf-sb-it-at-fw: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-ft-wt)};
172
- --_sf-sb-it-at-fsi: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-ft-se-ic)};
173
- --_sf-sb-it-at-td: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-ue)};
174
- --_sf-sb-it-at-tae: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-tt-an)};
175
- --_sf-sb-it-at-ls: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-lr-sg)};
176
- --_sf-sb-it-at-lh: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-le-ht)};
177
-
178
- // Per-item leading icon selected-state overrides.
179
- --_sf-sb-it-at-isz-im: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-in-se-im)};
180
- --_sf-sb-it-at-icr-im: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-in-c1-im)};
181
- }
182
-
183
- & > a {
184
- display: var(--_d-flex);
185
- justify-content: space-between;
186
- align-items: center;
187
- width: 100%;
188
-
189
- & > span {
190
- display: var(--_d-flex);
191
- width: 100%;
192
- justify-content: var(
193
- --_sf-sb-it-at-tae,
194
- var(
195
- --_sf-sb-it-hr-tae,
196
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-tt-an)}
197
- )
198
- );
199
-
200
- // Per-item leading glyph, styled from the list item scope's own
201
- // `Item` vars — the glyph itself is picked per item under Content.
202
- &.flex__sub__menu__item__leading__icon {
203
- flex: 0 0 auto;
204
- width: auto;
205
- align-items: center;
206
- margin-inline-end: prepareMediaVariable(
207
- --_ctm-dn-sb-mu-im-se-dt-se-in-gp-im,
208
- 0px
209
- );
210
-
211
- svg {
212
- width: var(
213
- --_sf-sb-it-at-isz-im,
214
- var(
215
- --_sf-sb-it-hr-isz-im,
216
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-in-se-im)}
217
- )
218
- );
219
- height: var(
220
- --_sf-sb-it-at-isz-im,
221
- var(
222
- --_sf-sb-it-hr-isz-im,
223
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-in-se-im)}
224
- )
225
- );
226
-
227
- path {
228
- stroke: var(
229
- --_sf-sb-it-at-icr-im,
230
- var(
231
- --_sf-sb-it-hr-icr-im,
232
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-in-c1-im)}
233
- )
234
- );
235
- stroke-width: prepareMediaVariable(
236
- --_ctm-dn-sb-mu-im-se-dt-se-se-wh-im,
237
- 1.25
238
- );
239
- }
240
- }
241
- }
242
-
243
- &#{$subMenuItemText} {
244
- flex: 1 1 auto;
245
- // Lets the clamp actually bind: a flex item defaults to
246
- // min-width:auto and would grow past the row instead.
247
- min-width: 0;
248
-
249
- // Text Overflow: the renderer adds `.flex__overflow` and publishes
250
- // the line count, so the clamp only applies once the toggle is on.
251
- &.flex__overflow {
252
- white-space: normal;
253
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
254
- }
255
-
256
- font-family: var(
257
- --_sf-it-at-ff,
258
- var(--_sf-it-hr-ff, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-fy)})
259
- );
260
- text-transform: var(
261
- --_sf-it-at-ff,
262
- var(--_sf-it-hr-ff, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-tt-tm)})
263
- );
264
- word-wrap: var(
265
- --_sf-it-at-ff,
266
- var(--_sf-it-hr-ff, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-wd-wp)})
267
- );
268
- word-break: var(
269
- --_sf-it-at-ff,
270
- var(--_sf-it-hr-ff, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-wd-bk)})
271
- );
272
- font-size: var(
273
- --_sf-sb-it-at-fs,
274
- var(
275
- --_sf-sb-it-hr-fs,
276
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-se)}
277
- )
278
- );
279
- color: var(
280
- --_sf-sb-it-at-fclr,
281
- var(
282
- --_sf-sb-it-hr-fclr,
283
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-cr)}
284
- )
285
- );
286
- font-weight: var(
287
- --_sf-sb-it-at-fw,
288
- var(
289
- --_sf-sb-it-hr-fw,
290
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-wt)}
291
- )
292
- );
293
- font-style: var(
294
- --_sf-sb-it-at-fsi,
295
- var(
296
- --_sf-sb-it-hr-fsi,
297
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-se-ic)}
298
- )
299
- );
300
- text-decoration: var(
301
- --_sf-sb-it-at-td,
302
- var(--_sf-sb-it-hr-td, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ue)})
303
- );
304
- text-align: var(
305
- --_sf-sb-it-at-tae,
306
- var(
307
- --_sf-sb-it-hr-tae,
308
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-tt-an)}
309
- )
310
- );
311
- letter-spacing: var(
312
- --_sf-sb-it-at-ls,
313
- var(
314
- --_sf-sb-it-hr-ls,
315
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-lr-sg)}
316
- )
317
- );
318
- line-height: var(
319
- --_sf-sb-it-at-lh,
320
- var(
321
- --_sf-sb-it-hr-lh,
322
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-le-ht)}
323
- )
324
- );
325
- }
326
- }
327
- }
328
- }
329
-
330
- &#{$nodatap} {
331
- font-size: 14px;
332
- color: var(--_gray-500);
333
- }
334
- }
335
- }
336
- }
337
- }
338
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+ $subMenuContainer: ".flex__submenu__container";
5
+ $nodatap: ".no__menu_item__p";
6
+ $subMenuItem: ".flex__sub__menu__item";
7
+ $subMenuItemText: ".flex__sub__menu__item__text";
8
+
9
+ [data-div-type="element"] {
10
+ &[data-element-type="simple-list"] {
11
+ width: calc(1% * #{prepareMediaVariable(--_ctm-ele-nw-wh-vl)});
12
+ margin: prepareMediaVariable(--_ctm-lt-mn);
13
+
14
+ & > .wrapper {
15
+ width: 100%;
16
+
17
+ & > #{$subMenuContainer} {
18
+ padding: #{prepareMediaVariable(--_ctm-lt-pg, 0px)};
19
+ min-height: prepareMediaVariable(--_ctm-lt-mn-ht);
20
+ background: prepareMediaVariable(--_ctm-dn-sb-mu-cr-bd-cr);
21
+ border-radius: prepareMediaVariable(--_ctm-dn-sb-mu-cr-br-rs);
22
+ width: 100%;
23
+ display: var(--_d-flex);
24
+ flex-direction: column;
25
+ gap: prepareMediaVariable(--_ctm-lt-im-gp);
26
+ align-items: prepareMediaVariable(--_ctm-lt-jy-ct);
27
+
28
+ // &:is(#{$hrz} *) {
29
+ // position: absolute;
30
+ // left: calc(50% + #{prepareMediaVariable(--_ctm-dn-sb-mu-cr-cr-ot-x)});
31
+ // width: calc(100% + #{prepareMediaVariable(--_ctm-dn-sb-mu-cr-cr-wh)});
32
+ // top: calc(100% + #{prepareMediaVariable(--_ctm-dn-sb-mu-cr-cr-ot-y)});
33
+ // transform: translateX(-50%);
34
+ // z-index: 2;
35
+ // }
36
+ // &:is(#{$vtl} *) {
37
+ // width: 100%;
38
+ // }
39
+
40
+ // max-height: 0px;
41
+ // overflow: clip;
42
+ // max-height: 500px;
43
+ // overflow-y: auto;
44
+ // animation: animTwo var(--_transition-duration)
45
+ // var(--_transition-timing-function) 1 forwards alternate;
46
+
47
+ // @keyframes animTwo {
48
+ // 100% {
49
+ // max-height: 500px;
50
+ // overflow-y: auto;
51
+ // }
52
+ // }
53
+
54
+ &[data-show-border="true"] {
55
+ border-width: prepareMediaVariable(--_ctm-dn-sb-mu-cr-br-wh);
56
+ border-color: prepareMediaVariable(--_ctm-dn-sb-mu-cr-br-cr);
57
+ border-style: prepareMediaVariable(--_ctm-dn-sb-mu-cr-br-se);
58
+ }
59
+
60
+ &[data-show-boxshadow="true"] {
61
+ box-shadow: prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-ae)
62
+ prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-br)
63
+ prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-sd)
64
+ prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-cr);
65
+ }
66
+
67
+ & > li {
68
+ &#{$subMenuItem} {
69
+ display: var(--_d-flex);
70
+ flex-direction: column;
71
+ width: 100%;
72
+ padding: var(
73
+ --_sf-sb-it-at-pd,
74
+ var(--_sf-sb-it-hr-pd, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-pg, 0px)})
75
+ );
76
+ background: var(
77
+ --_sf-sb-it-at-bd,
78
+ var(--_sf-sb-it-hr-bd, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-bd-cr)})
79
+ );
80
+ border-radius: var(
81
+ --_sf-sb-it-at-br,
82
+ var(--_sf-sb-it-hr-br, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-rs)})
83
+ );
84
+
85
+ &[data-show-border="true"] {
86
+ border-color: var(
87
+ --_sf-sb-it-at-brc,
88
+ var(--_sf-sb-it-hr-brc, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-cr)})
89
+ );
90
+ border-width: var(
91
+ --_sf-sb-it-at-bw,
92
+ var(--_sf-sb-it-hr-bw, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-wh)})
93
+ );
94
+ border-style: var(
95
+ --_sf-sb-it-at-bs,
96
+ var(--_sf-sb-it-hr-bs, prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-se))
97
+ );
98
+ }
99
+
100
+ &[data-show-boxshadow="true"] {
101
+ box-shadow: var(
102
+ --_sf-sb-it-at-bsa,
103
+ var(
104
+ --_sf-sb-it-hr-bsa,
105
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-ae)}
106
+ )
107
+ )
108
+ var(
109
+ --_sf-sb-it-at-blr,
110
+ var(
111
+ --_sf-sb-it-hr-blr,
112
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-br)}
113
+ )
114
+ )
115
+ var(
116
+ --_sf-sb-it-at-spr,
117
+ var(
118
+ --_sf-sb-it-hr-spr,
119
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-sd)}
120
+ )
121
+ )
122
+ var(
123
+ --_sf-sb-it-at-bscl,
124
+ var(--_sf-sb-it-hr-bscl, prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-cr))
125
+ );
126
+ }
127
+
128
+ &:hover {
129
+ --_sf-sb-it-hr-pd: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-pg, 0px)};
130
+ --_sf-sb-it-hr-bd: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-bd-cr)};
131
+ --_sf-sb-it-hr-br: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-br-rs)};
132
+ --_sf-sb-it-hr-brc: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-br-cr)};
133
+ --_sf-sb-it-hr-bw: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-br-wh)};
134
+ --_sf-sb-it-hr-bs: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-br-se)};
135
+ --_sf-sb-it-hr-bsa: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-sw-ae)};
136
+ --_sf-sb-it-hr-blr: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-sw-br)};
137
+ --_sf-sb-it-hr-spr: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-sw-sd)};
138
+ --_sf-sb-it-hr-bscl: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-sw-cr)};
139
+
140
+ --_sf-sb-it-hr-ff: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-ft-fy)};
141
+ --_sf-sb-it-hr-fs: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-ft-se)};
142
+ --_sf-sb-it-hr-fclr: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-cr)};
143
+ --_sf-sb-it-hr-fw: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-ft-wt)};
144
+
145
+ --_sf-sb-it-hr-fsi: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-ft-se-ic)};
146
+ --_sf-sb-it-hr-td: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-ue)};
147
+ --_sf-sb-it-hr-tae: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-tt-an)};
148
+ --_sf-sb-it-hr-ls: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-lr-sg)};
149
+ --_sf-sb-it-hr-lh: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-le-ht)};
150
+
151
+ // Per-item leading icon hover overrides.
152
+ --_sf-sb-it-hr-isz-im: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-in-se-im)};
153
+ --_sf-sb-it-hr-icr-im: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-in-c1-im)};
154
+ }
155
+
156
+ &.active {
157
+ --_sf-sb-it-at-pd: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-pg)};
158
+ --_sf-sb-it-at-bd: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-bd-cr)};
159
+ --_sf-sb-it-at-br: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-br-rs)};
160
+ --_sf-sb-it-at-brc: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-br-cr)};
161
+ --_sf-sb-it-at-bw: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-br-wh)};
162
+ --_sf-sb-it-at-bs: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-br-se)};
163
+ --_sf-sb-it-hr-bsa: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-sw-ae)};
164
+ --_sf-sb-it-at-blr: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-sw-br)};
165
+ --_sf-sb-it-at-spr: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-sw-sd)};
166
+ --_sf-sb-it-at-bscl: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-sw-cr)};
167
+
168
+ --_sf-sb-it-at-ff: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-ft-fy)};
169
+ --_sf-sb-it-at-fs: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-ft-se)};
170
+ --_sf-sb-it-at-fclr: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-cr)};
171
+ --_sf-sb-it-at-fw: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-ft-wt)};
172
+ --_sf-sb-it-at-fsi: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-ft-se-ic)};
173
+ --_sf-sb-it-at-td: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-ue)};
174
+ --_sf-sb-it-at-tae: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-tt-an)};
175
+ --_sf-sb-it-at-ls: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-lr-sg)};
176
+ --_sf-sb-it-at-lh: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-le-ht)};
177
+
178
+ // Per-item leading icon selected-state overrides.
179
+ --_sf-sb-it-at-isz-im: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-in-se-im)};
180
+ --_sf-sb-it-at-icr-im: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-in-c1-im)};
181
+ }
182
+
183
+ & > a {
184
+ display: var(--_d-flex);
185
+ justify-content: space-between;
186
+ align-items: center;
187
+ width: 100%;
188
+
189
+ & > span {
190
+ display: var(--_d-flex);
191
+ width: 100%;
192
+ justify-content: var(
193
+ --_sf-sb-it-at-tae,
194
+ var(
195
+ --_sf-sb-it-hr-tae,
196
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-tt-an)}
197
+ )
198
+ );
199
+
200
+ // Per-item leading glyph, styled from the list item scope's own
201
+ // `Item` vars — the glyph itself is picked per item under Content.
202
+ &.flex__sub__menu__item__leading__icon {
203
+ flex: 0 0 auto;
204
+ width: auto;
205
+ align-items: center;
206
+ margin-inline-end: prepareMediaVariable(
207
+ --_ctm-dn-sb-mu-im-se-dt-se-in-gp-im,
208
+ 0px
209
+ );
210
+
211
+ svg {
212
+ width: var(
213
+ --_sf-sb-it-at-isz-im,
214
+ var(
215
+ --_sf-sb-it-hr-isz-im,
216
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-in-se-im)}
217
+ )
218
+ );
219
+ height: var(
220
+ --_sf-sb-it-at-isz-im,
221
+ var(
222
+ --_sf-sb-it-hr-isz-im,
223
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-in-se-im)}
224
+ )
225
+ );
226
+
227
+ path {
228
+ stroke: var(
229
+ --_sf-sb-it-at-icr-im,
230
+ var(
231
+ --_sf-sb-it-hr-icr-im,
232
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-in-c1-im)}
233
+ )
234
+ );
235
+ stroke-width: prepareMediaVariable(
236
+ --_ctm-dn-sb-mu-im-se-dt-se-se-wh-im,
237
+ 1.25
238
+ );
239
+ }
240
+ }
241
+ }
242
+
243
+ &#{$subMenuItemText} {
244
+ flex: 1 1 auto;
245
+ // Lets the clamp actually bind: a flex item defaults to
246
+ // min-width:auto and would grow past the row instead.
247
+ min-width: 0;
248
+
249
+ // Text Overflow: the renderer adds `.flex__overflow` and publishes
250
+ // the line count, so the clamp only applies once the toggle is on.
251
+ &.flex__overflow {
252
+ white-space: normal;
253
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
254
+ }
255
+
256
+ font-family: var(
257
+ --_sf-it-at-ff,
258
+ var(--_sf-it-hr-ff, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-fy)})
259
+ );
260
+ text-transform: var(
261
+ --_sf-it-at-ff,
262
+ var(--_sf-it-hr-ff, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-tt-tm)})
263
+ );
264
+ word-wrap: var(
265
+ --_sf-it-at-ff,
266
+ var(--_sf-it-hr-ff, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-wd-wp)})
267
+ );
268
+ word-break: var(
269
+ --_sf-it-at-ff,
270
+ var(--_sf-it-hr-ff, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-wd-bk)})
271
+ );
272
+ font-size: var(
273
+ --_sf-sb-it-at-fs,
274
+ var(
275
+ --_sf-sb-it-hr-fs,
276
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-se)}
277
+ )
278
+ );
279
+ color: var(
280
+ --_sf-sb-it-at-fclr,
281
+ var(
282
+ --_sf-sb-it-hr-fclr,
283
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-cr)}
284
+ )
285
+ );
286
+ font-weight: var(
287
+ --_sf-sb-it-at-fw,
288
+ var(
289
+ --_sf-sb-it-hr-fw,
290
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-wt)}
291
+ )
292
+ );
293
+ font-style: var(
294
+ --_sf-sb-it-at-fsi,
295
+ var(
296
+ --_sf-sb-it-hr-fsi,
297
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-se-ic)}
298
+ )
299
+ );
300
+ text-decoration: var(
301
+ --_sf-sb-it-at-td,
302
+ var(--_sf-sb-it-hr-td, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ue)})
303
+ );
304
+ text-align: var(
305
+ --_sf-sb-it-at-tae,
306
+ var(
307
+ --_sf-sb-it-hr-tae,
308
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-tt-an)}
309
+ )
310
+ );
311
+ letter-spacing: var(
312
+ --_sf-sb-it-at-ls,
313
+ var(
314
+ --_sf-sb-it-hr-ls,
315
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-lr-sg)}
316
+ )
317
+ );
318
+ line-height: var(
319
+ --_sf-sb-it-at-lh,
320
+ var(
321
+ --_sf-sb-it-hr-lh,
322
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-le-ht)}
323
+ )
324
+ );
325
+ }
326
+ }
327
+ }
328
+ }
329
+
330
+ &#{$nodatap} {
331
+ font-size: 14px;
332
+ color: var(--_gray-500);
333
+ }
334
+ }
335
+ }
336
+ }
337
+ }
338
+ }