@sc-360-v2/storefront-cms-library 0.4.57 → 0.4.58

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 (147) hide show
  1. package/dist/add-existing-form.scss +66 -66
  2. package/dist/add-order.scss +377 -377
  3. package/dist/add-products-tab copy.scss +1132 -1132
  4. package/dist/allocations.scss +1603 -1603
  5. package/dist/amount-estimator.scss +1083 -1083
  6. package/dist/animation-control.scss +23 -23
  7. package/dist/badge.scss +388 -388
  8. package/dist/brand-basic-elements.scss +292 -292
  9. package/dist/brand.scss +93 -93
  10. package/dist/breadcrumbs.scss +802 -802
  11. package/dist/bulk-order-pad.scss +677 -677
  12. package/dist/bulk-variant-picker copy.scss +1121 -1121
  13. package/dist/bulk-variant-picker.scss +3294 -3294
  14. package/dist/bundle copy.scss +2805 -2805
  15. package/dist/bundle.scss +2383 -2383
  16. package/dist/bundleDetails copy.scss +1431 -1431
  17. package/dist/button copy.scss +271 -271
  18. package/dist/button.scss +292 -292
  19. package/dist/buy-for-tab-container.scss +90 -90
  20. package/dist/buy-for-tabs-container-item.scss +80 -80
  21. package/dist/buyForHeaders.scss +6718 -6718
  22. package/dist/cart-products-sidebar.scss +211 -211
  23. package/dist/cart-summary.scss +2728 -2728
  24. package/dist/cart-wrapper.scss +127 -127
  25. package/dist/cartGrouping.scss +89 -89
  26. package/dist/category-groups-element.scss +138 -138
  27. package/dist/category.scss +73 -73
  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 +58 -58
  32. package/dist/colorpicker_v2.scss +52 -52
  33. package/dist/common-element.scss +35 -35
  34. package/dist/confirm-modal.scss +351 -351
  35. package/dist/confirmationModal.scss +139 -139
  36. package/dist/container.scss +114 -114
  37. package/dist/countdown.scss +751 -751
  38. package/dist/coupon.scss +1254 -1254
  39. package/dist/custom-fonts.scss +100 -100
  40. package/dist/customization-tree.scss +160 -160
  41. package/dist/default-dropdown.scss +240 -240
  42. package/dist/editCartItem.scss +111 -111
  43. package/dist/embed-temp.scss +72 -72
  44. package/dist/embroider-preview-element.scss +94 -94
  45. package/dist/embroider-template-1-v2.scss +937 -937
  46. package/dist/embroider-template-1.scss +482 -482
  47. package/dist/embroidery.scss +213 -213
  48. package/dist/employee-bulk-order.scss +4057 -4057
  49. package/dist/emtpy-templates.scss +165 -165
  50. package/dist/faq.scss +564 -564
  51. package/dist/fb-dropdown.scss +125 -125
  52. package/dist/filter-results.scss +323 -323
  53. package/dist/flex-text-editor.scss +271 -271
  54. package/dist/form-preview.scss +290 -290
  55. package/dist/form-zindex-module.scss +24 -24
  56. package/dist/gallery-slider-temp.scss +1234 -1234
  57. package/dist/global-styles.scss +86 -86
  58. package/dist/grid.scss +119 -119
  59. package/dist/hotspot.scss +397 -397
  60. package/dist/icon-library.scss +74 -74
  61. package/dist/image-for-product.scss +21 -21
  62. package/dist/image-temp.scss +168 -168
  63. package/dist/item-stock.scss +87 -87
  64. package/dist/layouter-item.scss +89 -89
  65. package/dist/layouter-pro-item.scss +80 -80
  66. package/dist/layouter-pro.scss +88 -88
  67. package/dist/light-box-v2.scss +105 -105
  68. package/dist/lightbox.scss +78 -78
  69. package/dist/line.scss +166 -166
  70. package/dist/loader.scss +37 -37
  71. package/dist/map.scss +962 -962
  72. package/dist/marchandiserSets.scss +60 -60
  73. package/dist/mega-menu-container.scss +99 -99
  74. package/dist/mega-menu.scss +838 -838
  75. package/dist/menu-item.scss +19 -19
  76. package/dist/menu.scss +162 -162
  77. package/dist/modal.scss +2267 -2267
  78. package/dist/multi-select-dropdown.scss +282 -282
  79. package/dist/my-wishlist.scss +17 -17
  80. package/dist/option-bar.scss +845 -845
  81. package/dist/order-processing.scss +61 -61
  82. package/dist/overflow-module.scss +63 -63
  83. package/dist/past-orders.scss +975 -975
  84. package/dist/payment-methods.scss +289 -289
  85. package/dist/pickup-locations.scss +1167 -1167
  86. package/dist/position-module.scss +95 -95
  87. package/dist/prefix-list.scss +86 -86
  88. package/dist/product-actions copy.scss +2765 -2765
  89. package/dist/product-actions.scss +2286 -2286
  90. package/dist/product-basic-elements.scss +770 -770
  91. package/dist/product-customizations.scss +149 -149
  92. package/dist/product-highlights copy.scss +217 -217
  93. package/dist/product-highlights.scss +311 -311
  94. package/dist/product-image copy.scss +787 -787
  95. package/dist/product-inventory.scss +1378 -1378
  96. package/dist/product-options.scss +1144 -1144
  97. package/dist/product-price.scss +2598 -2598
  98. package/dist/product-promotions.scss +2759 -2759
  99. package/dist/product.scss +97 -97
  100. package/dist/productDetails.scss +70 -70
  101. package/dist/quick-links.scss +552 -552
  102. package/dist/quick-order-pad.scss +237 -237
  103. package/dist/quota-details.scss +263 -263
  104. package/dist/quotes.scss +737 -737
  105. package/dist/repeater copy.scss +635 -635
  106. package/dist/repeater-grid-toggle.scss +58 -58
  107. package/dist/repeater-item.scss +90 -90
  108. package/dist/request-for-quotes.scss +746 -746
  109. package/dist/responsive-behaviour.scss +29 -29
  110. package/dist/rfqs.scss +736 -736
  111. package/dist/scroll.scss +222 -222
  112. package/dist/search-results-heading.scss +279 -279
  113. package/dist/shareCartSideBar.scss +254 -254
  114. package/dist/shipping-estimator.scss +41 -41
  115. package/dist/shipping-payments.scss +2467 -2467
  116. package/dist/simple-list.scss +259 -259
  117. package/dist/skeleton.scss +74 -74
  118. package/dist/social.scss +276 -276
  119. package/dist/sort.scss +89 -89
  120. package/dist/spotlight.scss +1663 -1663
  121. package/dist/stack.scss +129 -129
  122. package/dist/static-text.scss +52 -52
  123. package/dist/stockStatus.scss +64 -64
  124. package/dist/store-locations.scss +1398 -1398
  125. package/dist/sub-category.scss +74 -74
  126. package/dist/submit-quote.scss +275 -275
  127. package/dist/tab-container-item.scss +80 -80
  128. package/dist/tab-container.scss +89 -89
  129. package/dist/tab-v2.scss +583 -583
  130. package/dist/table-common.scss +506 -506
  131. package/dist/table.scss +685 -685
  132. package/dist/tabs.scss +395 -395
  133. package/dist/text-temp-v2.scss +139 -139
  134. package/dist/text-temp.scss +109 -109
  135. package/dist/toaster.scss +350 -350
  136. package/dist/toggle-button.scss +32 -32
  137. package/dist/transform-properties-module.scss +20 -20
  138. package/dist/uom-selector.scss +1169 -1169
  139. package/dist/user-elements copy.scss +1437 -1437
  140. package/dist/variant-picker.scss +2384 -2384
  141. package/dist/video.scss +476 -476
  142. package/dist/volume-pricing copy 2.scss +1468 -1468
  143. package/dist/volume-pricing copy.scss +1077 -1077
  144. package/dist/volume-pricing.scss +1175 -1175
  145. package/dist/widget.scss +148 -148
  146. package/dist/wishlist-overlay.scss +48 -48
  147. package/package.json +1 -1
package/dist/tab-v2.scss CHANGED
@@ -1,583 +1,583 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./functions.scss" as *;
4
- $activeElementSelector: "[data-has-clicked='true']";
5
- $root: "flex__tbs";
6
- $sfKey: "--_flex-tbs-";
7
- $tabHeader: "#{$root}__header";
8
- $tabHeaderWrapper: "#{$tabHeader}__wrapper";
9
- $tabBody: "#{$root}__body";
10
- $tabBodyWrapper: #{$tabBody}__wrapper;
11
-
12
- [data-div-type="element"] {
13
- &[data-element-type="tbs-v2"] {
14
- width: calc(
15
- 1% *
16
- var(
17
- --_ctm-mob-tbs-ele-nw-wh-vl,
18
- var(--_ctm-tab-tbs-ele-nw-wh-vl, var(--_ctm-tbs-ele-nw-wh-vl, auto))
19
- )
20
- );
21
- margin: var(
22
- --_ctm-mob-tbs-lt-mn,
23
- var(--_ctm-tab-tbs-lt-mn, var(--_ctm-tbs-lt-mn, var(--_ctm-lt-mn)))
24
- );
25
-
26
- & > div {
27
- &.wrapper {
28
- width: 100%;
29
- padding: var(--_ctm-mob-tbs-lt-pg, var(--_ctm-tab-tbs-lt-pg, var(--_ctm-tbs-lt-pg)));
30
-
31
- background-color: var(
32
- --_ctm-mob-tbs-dn-tb-cr-bd-cr,
33
- var(--_ctm-tab-tbs-dn-tb-cr-bd-cr, var(--_ctm-tbs-dn-tb-cr-bd-cr))
34
- );
35
- // background-image: var(
36
- // --_ctm-mob-tbs-dn-bd-ie,
37
- // var(--_ctm-tab-tbs-dn-bd-ie, var(--_ctm-tbs-dn-bd-ie))
38
- // );
39
- // background-attachment: var(
40
- // --_ctm-mob-tbs-dn-bd-at,
41
- // var(--_ctm-tab-tbs-dn-bd-at, var(--_ctm-tbs-dn-bd-at))
42
- // );
43
- // background-position: var(
44
- // --_ctm-mob-tbs-dn-bd-pn,
45
- // var(--_ctm-tab-tbs-dn-bd-pn, var(--_ctm-tbs-dn-bd-pn))
46
- // );
47
- // background-repeat: var(
48
- // --_ctm-mob-tbs-dn-bd-rt,
49
- // var(--_ctm-tab-tbs-dn-bd-rt, var(--_ctm-tbs-dn-bd-rt))
50
- // );
51
- // background-size: var(
52
- // --_ctm-mob-tbs-dn-bd-se,
53
- // var(--_ctm-tab-tbs-dn-bd-se, var(--_ctm-tbs-dn-bd-se))
54
- // );
55
- border-radius: var(
56
- --_hide-tbs-own-border,
57
- var(
58
- --_ctm-mob-tbs-dn-tb-cr-br-rs,
59
- var(--_ctm-tab-tbs-dn-tb-cr-br-rs, var(--_ctm-tbs-dn-tb-cr-br-rs))
60
- )
61
- );
62
- border-color: var(
63
- --_hide-tbs-own-border,
64
- var(
65
- --_ctm-mob-tbs-dn-tb-cr-br-cr,
66
- var(--_ctm-tab-tbs-dn-tb-cr-br-cr, var(--_ctm-tbs-dn-tb-cr-br-cr))
67
- )
68
- );
69
- border-style: var(
70
- --_hide-tbs-own-border,
71
- var(
72
- --_ctm-mob-tbs-dn-tb-cr-br-se,
73
- var(--_ctm-tab-tbs-dn-tb-cr-br-se, var(--_ctm-tbs-dn-tb-cr-br-se))
74
- )
75
- );
76
- border-width: var(
77
- --_hide-tbs-own-border,
78
- var(
79
- --_ctm-mob-tbs-dn-tb-cr-br-wh,
80
- var(--_ctm-tab-tbs-dn-tb-cr-br-wh, var(--_ctm-tbs-dn-tb-cr-br-wh))
81
- )
82
- );
83
- box-shadow: var(
84
- --_hide-tbs-own-shadow,
85
- var(
86
- --_ctm-mob-tbs-dn-tb-cr-sw-ae,
87
- var(--_ctm-tab-tbs-dn-tb-cr-sw-ae, var(--_ctm-tbs-dn-tb-cr-sw-ae))
88
- )
89
- var(
90
- --_ctm-mob-tbs-dn-tb-cr-sw-br,
91
- var(--_ctm-tab-tbs-dn-tb-cr-sw-br, var(--_ctm-tbs-dn-tb-cr-sw-br))
92
- )
93
- var(
94
- --_ctm-mob-tbs-dn-tb-cr-sw-sd,
95
- var(--_ctm-tab-tbs-dn-tb-cr-sw-sd, var(--_ctm-tbs-dn-tb-cr-sw-sd))
96
- )
97
- var(
98
- --_ctm-mob-tbs-dn-tb-cr-sw-cr,
99
- var(--_ctm-tab-tbs-dn-tb-cr-sw-cr, var(--_ctm-tbs-dn-tb-cr-sw-cr))
100
- )
101
- );
102
-
103
- display: var(--_d-flex) !important;
104
- min-height: var(
105
- --_ctm-mob-tbs-lt-ht,
106
- var(--_ctm-tab-tbs-lt-ht, var(--_ctm-tbs-lt-ht))
107
- ) !important;
108
- flex-direction: var(#{$sfKey}fd, column);
109
-
110
- &.hrz {
111
- #{$sfKey}fd: column;
112
- #{$sfKey}fd-header: row;
113
- #{$sfKey}fd-jst: var(
114
- --_ctm-mob-tbs-lt-jy-ct,
115
- var(--_ctm-tab-tbs-lt-jy-ct, var(--_ctm-tbs-lt-jy-ct))
116
- );
117
- }
118
- &.vtl {
119
- #{$sfKey}fd: row;
120
- #{$sfKey}fd-header: column;
121
- #{$sfKey}fd-algn: var(
122
- --_ctm-mob-tbs-lt-an-is,
123
- var(--_ctm-tab-tbs-lt-an-is, var(--_ctm-tbs-lt-an-is))
124
- );
125
- }
126
-
127
- & > div {
128
- &.#{$tabHeader} {
129
- display: var(--_d-flex);
130
-
131
- &[data-hs-br="false"] {
132
- --_hide-btn-border: none;
133
- }
134
- &[data-hs-bs="false"] {
135
- --_hide-btn-shadow: none;
136
- }
137
- &[data-tl-vl="stretched"] {
138
- --_sf-tl-vl-al: space-between;
139
- }
140
- & > .#{$tabHeaderWrapper} {
141
- --_sf-gap-vl: var(
142
- --_ctm-mob-tbs-lt-tb-sg,
143
- var(--_ctm-tab-tbs-lt-tb-sg, var(--_ctm-tbs-lt-tb-sg))
144
- );
145
- // width: 100%;
146
- width: prepareMediaVariable(--_ctm-tbs-dn-tb-cr-cr-wh, 100%);
147
- min-height: prepareMediaVariable(--_ctm-tbs-dn-tb-cr-cr-mn-ht, auto);
148
- padding: prepareMediaVariable(--_ctm-tbs-dn-tb-cr-pg, 0px);
149
- display: var(--_d-flex);
150
- flex-direction: var(#{$sfKey}fd-header, row);
151
- &:is(.vtl *) {
152
- justify-content: var(--_sf-tl-vl-al, var(#{$sfKey}fd-algn));
153
- row-gap: var(--_sf-gap-vl);
154
- }
155
- &:is(.hrz *) {
156
- justify-content: var(--_sf-tl-vl-al, var(#{$sfKey}fd-jst));
157
- column-gap: var(--_sf-gap-vl);
158
-
159
- &[data-ovf-vl="wrap"] {
160
- flex-wrap: wrap;
161
- }
162
- &[data-ovf-vl="no wrap"] {
163
- overflow-x: auto;
164
- scrollbar-width: none;
165
- }
166
- }
167
-
168
- & > button {
169
- display: var(--_d-flex);
170
- padding-inline: var(
171
- --_ctm-mob-tbs-lt-hl-pg,
172
- var(--_ctm-tab-tbs-lt-hl-pg, var(--_ctm-tbs-lt-hl-pg))
173
- );
174
- padding-block: var(
175
- --_ctm-mob-tbs-lt-vl-pg,
176
- var(--_ctm-tab-tbs-lt-vl-pg, var(--_ctm-tbs-lt-vl-pg))
177
- );
178
- background-color: var(
179
- --_sf-tbs-sd-bg-cr,
180
- var(
181
- --_sf-tbs-hr-bg-cr,
182
- var(
183
- --_ctm-mob-tbs-dn-ts-dt-se-bd-cr,
184
- var(--_ctm-tab-tbs-dn-ts-dt-se-bd-cr, var(--_ctm-tbs-dn-ts-dt-se-bd-cr))
185
- )
186
- )
187
- );
188
-
189
- border-color: var(
190
- --_hide-btn-border,
191
- var(
192
- --_sf-tbs-sd-br-cr,
193
- var(
194
- --_sf-tbs-hr-br-cr,
195
- var(
196
- --_ctm-mob-tbs-dn-ts-dt-se-br-cr,
197
- var(--_ctm-tab-tbs-dn-ts-dt-se-br-cr, var(--_ctm-tbs-dn-ts-dt-se-br-cr))
198
- )
199
- )
200
- )
201
- );
202
- border-style: var(
203
- --_hide-btn-border,
204
- var(
205
- --_sf-tbs-sd-br-sty,
206
- var(
207
- --_sf-tbs-hr-br-sty,
208
- var(
209
- --_ctm-mob-tbs-dn-ts-dt-se-br-se,
210
- var(--_ctm-tab-tbs-dn-ts-dt-se-br-se, var(--_ctm-tbs-dn-ts-dt-se-br-se))
211
- )
212
- )
213
- )
214
- );
215
- border-width: var(
216
- --_hide-btn-border,
217
- var(
218
- --_sf-tbs-sd-br-wt,
219
- var(
220
- --_sf-tbs-hr-br-wt,
221
- var(
222
- --_ctm-mob-tbs-dn-ts-dt-se-br-wh,
223
- var(--_ctm-tab-tbs-dn-ts-dt-se-br-wh, var(--_ctm-tbs-dn-ts-dt-se-br-wh))
224
- )
225
- )
226
- )
227
- );
228
- border-radius: var(
229
- --_sf-tbs-sd-br-rs,
230
- var(
231
- --_sf-tbs-hr-br-rs,
232
- var(
233
- --_ctm-mob-tbs-dn-ts-dt-se-br-rs,
234
- var(--_ctm-tab-tbs-dn-ts-dt-se-br-rs, var(--_ctm-tbs-dn-ts-dt-se-br-rs))
235
- )
236
- )
237
- );
238
-
239
- box-shadow: var(
240
- --_hide-btn-shadow,
241
- var(
242
- --_sf-tbs-sd-sw-ae,
243
- var(
244
- --_sf-tbs-hr-sw-ae,
245
- var(
246
- --_ctm-mob-tbs-dn-tb-cr-sw-ae,
247
- var(--_ctm-tab-tbs-dn-tb-cr-sw-ae, var(--_ctm-tbs-dn-tb-cr-sw-ae))
248
- )
249
- )
250
- )
251
- var(
252
- --_sf-tbs-sd-sw-br,
253
- var(
254
- --_sf-tbs-hr-sw-br,
255
- var(
256
- --_ctm-mob-tbs-dn-tb-cr-sw-br,
257
- var(--_ctm-tab-tbs-dn-tb-cr-sw-br, var(--_ctm-tbs-dn-tb-cr-sw-br))
258
- )
259
- )
260
- )
261
- var(
262
- --_sf-tbs-sd-sw-sd,
263
- var(
264
- --_sf-tbs-hr-sw-sd,
265
- var(
266
- --_ctm-mob-tbs-dn-tb-cr-sw-sd,
267
- var(--_ctm-tab-tbs-dn-tb-cr-sw-sd, var(--_ctm-tbs-dn-tb-cr-sw-sd))
268
- )
269
- )
270
- )
271
- var(
272
- --_sf-tbs-sd-sw-cr,
273
- var(
274
- --_sf-tbs-hr-sw-cr,
275
- var(
276
- --_ctm-mob-tbs-dn-tb-cr-sw-cr,
277
- var(--_ctm-tab-tbs-dn-tb-cr-sw-cr, var(--_ctm-tbs-dn-tb-cr-sw-cr))
278
- )
279
- )
280
- )
281
- );
282
-
283
- &.active {
284
- --_sf-tbs-sd-bg-cr: var(
285
- --_ctm-mob-tbs-dn-ts-sd-se-bd-cr,
286
- var(--_ctm-tab-tbs-dn-ts-sd-se-bd-cr, var(--_ctm-tbs-dn-ts-sd-se-bd-cr))
287
- );
288
-
289
- --_sf-tbs-sd-br-cr: var(
290
- --_ctm-mob-tbs-dn-ts-sd-se-br-cr,
291
- var(--_ctm-tab-tbs-dn-ts-sd-se-br-cr, var(--_ctm-tbs-dn-ts-sd-se-br-cr))
292
- );
293
- --_sf-tbs-sd-br-wt: var(
294
- --_ctm-mob-tbs-dn-ts-sd-se-br-wh,
295
- var(--_ctm-tab-tbs-dn-ts-sd-se-br-wh, var(--_ctm-tbs-dn-ts-sd-se-br-wh))
296
- );
297
- --_sf-tbs-sd-br-sty: var(
298
- --_ctm-mob-tbs-dn-ts-sd-se-br-se,
299
- var(--_ctm-tab-tbs-dn-ts-sd-se-br-se, var(--_ctm-tbs-dn-ts-sd-se-br-se))
300
- );
301
- --_sf-tbs-sd-br-rs: var(
302
- --_ctm-mob-tbs-dn-ts-sd-se-br-rs,
303
- var(--_ctm-tab-tbs-dn-ts-sd-se-br-rs, var(--_ctm-tbs-dn-ts-sd-se-br-rs))
304
- );
305
- --_sf-tbs-sd-sw-ae: var(
306
- --_ctm-mob-tbs-dn-ts-sd-se-sw-ae,
307
- var(--_ctm-tab-tbs-dn-ts-sd-se-sw-ae, var(--_ctm-tbs-dn-ts-sd-se-sw-ae))
308
- );
309
- --_sf-tbs-sd-sw-cr: var(
310
- --_ctm-mob-tbs-dn-ts-sd-se-sw-cr,
311
- var(--_ctm-tab-tbs-dn-ts-sd-se-sw-cr, var(--_ctm-tbs-dn-ts-sd-se-sw-cr))
312
- );
313
- --_sf-tbs-sd-sw-sd: var(
314
- --_ctm-mob-tbs-dn-ts-sd-se-sw-sd,
315
- var(--_ctm-tab-tbs-dn-ts-sd-se-sw-sd, var(--_ctm-tbs-dn-ts-sd-se-sw-sd))
316
- );
317
- --_sf-tbs-sd-sw-br: var(
318
- --_ctm-mob-tbs-dn-ts-sd-se-sw-br,
319
- var(--_ctm-tab-tbs-dn-ts-sd-se-sw-br, var(--_ctm-tbs-dn-ts-sd-se-sw-br))
320
- );
321
-
322
- --_sf-tbs-sd-ft-fy: var(
323
- --_ctm-mob-tbs-dn-ts-sd-se-ft-fy,
324
- var(--_ctm-tab-tbs-dn-ts-sd-se-ft-fy, var(--_ctm-tbs-dn-ts-sd-se-ft-fy))
325
- );
326
- --_sf-tbs-sd-ft-sz: var(
327
- --_ctm-mob-tbs-dn-ts-sd-se-ft-se,
328
- var(--_ctm-tab-tbs-dn-ts-sd-se-ft-se, var(--_ctm-tbs-dn-ts-sd-se-ft-se))
329
- );
330
- --_sf-tbs-sd-ft-cr: var(
331
- --_ctm-mob-tbs-dn-ts-sd-se-cr,
332
- var(--_ctm-tab-tbs-dn-ts-sd-se-cr, var(--_ctm-tbs-dn-ts-sd-se-cr))
333
- );
334
- --_sf-tbs-sd-ft-wt: var(
335
- --_ctm-mob-tbs-dn-ts-sd-se-ft-wt,
336
- var(--_ctm-tab-tbs-dn-ts-sd-se-ft-wt, var(--_ctm-tbs-dn-ts-sd-se-ft-wt))
337
- );
338
- --_sf-tbs-sd-ft-sty: var(
339
- --_ctm-mob-tbs-dn-ts-sd-se-ft-se-ic,
340
- var(--_ctm-tab-tbs-dn-ts-sd-se-ft-se-ic, var(--_ctm-tbs-dn-ts-sd-se-ft-se-ic))
341
- );
342
- --_sf-tbs-sd-ft-tdc: var(
343
- --_ctm-mob-tbs-dn-ts-sd-se-ue,
344
- var(--_ctm-tab-tbs-dn-ts-sd-se-ue, var(--_ctm-tbs-dn-ts-sd-se-ue))
345
- );
346
- --_sf-tbs-sd-ft-tln: var(
347
- --_ctm-mob-tbs-dn-ts-sd-se-tt-an,
348
- var(--_ctm-tab-tbs-dn-ts-sd-se-tt-an, var(--_ctm-tbs-dn-ts-sd-se-tt-an))
349
- );
350
- --_sf-tbs-sd-ft-lts: var(
351
- --_ctm-mob-tbs-dn-ts-sd-se-lr-sg,
352
- var(--_ctm-tab-tbs-dn-ts-sd-se-lr-sg, var(--_ctm-tbs-dn-ts-sd-se-lr-sg))
353
- );
354
- --_sf-tbs-sd-ft-lht: var(
355
- --_ctm-mob-tbs-dn-ts-sd-se-le-ht,
356
- var(--_ctm-tab-tbs-dn-ts-sd-se-le-ht, var(--_ctm-tbs-dn-ts-sd-se-le-ht))
357
- );
358
- }
359
-
360
- &:not(.active) {
361
- &:hover {
362
- --_sf-tbs-hr-bg-cr: var(
363
- --_ctm-mob-tbs-dn-ts-hr-se-bd-cr,
364
- var(--_ctm-tab-tbs-dn-ts-hr-se-bd-cr, var(--_ctm-tbs-dn-ts-hr-se-bd-cr))
365
- );
366
-
367
- --_sf-tbs-hr-br-cr: var(
368
- --_ctm-mob-tbs-dn-ts-hr-se-br-cr,
369
- var(--_ctm-tab-tbs-dn-ts-hr-se-br-cr, var(--_ctm-tbs-dn-ts-hr-se-br-cr))
370
- );
371
- --_sf-tbs-hr-br-wt: var(
372
- --_ctm-mob-tbs-dn-ts-hr-se-br-wh,
373
- var(--_ctm-tab-tbs-dn-ts-hr-se-br-wh, var(--_ctm-tbs-dn-ts-hr-se-br-wh))
374
- );
375
- --_sf-tbs-hr-br-sty: var(
376
- --_ctm-mob-tbs-dn-ts-hr-se-br-se,
377
- var(--_ctm-tab-tbs-dn-ts-hr-se-br-se, var(--_ctm-tbs-dn-ts-hr-se-br-se))
378
- );
379
- --_sf-tbs-hr-br-rs: var(
380
- --_ctm-mob-tbs-dn-ts-hr-se-br-rs,
381
- var(--_ctm-tab-tbs-dn-ts-hr-se-br-rs, var(--_ctm-tbs-dn-ts-hr-se-br-rs))
382
- );
383
- --_sf-tbs-hr-sw-ae: var(
384
- --_ctm-mob-tbs-dn-ts-hr-se-sw-ae,
385
- var(--_ctm-tab-tbs-dn-ts-hr-se-sw-ae, var(--_ctm-tbs-dn-ts-hr-se-sw-ae))
386
- );
387
- --_sf-tbs-hr-sw-cr: var(
388
- --_ctm-mob-tbs-dn-ts-hr-se-sw-cr,
389
- var(--_ctm-tab-tbs-dn-ts-hr-se-sw-cr, var(--_ctm-tbs-dn-ts-hr-se-sw-cr))
390
- );
391
- --_sf-tbs-hr-sw-sd: var(
392
- --_ctm-mob-tbs-dn-ts-hr-se-sw-sd,
393
- var(--_ctm-tab-tbs-dn-ts-hr-se-sw-sd, var(--_ctm-tbs-dn-ts-hr-se-sw-sd))
394
- );
395
- --_sf-tbs-hr-sw-br: var(
396
- --_ctm-mob-tbs-dn-ts-hr-se-sw-br,
397
- var(--_ctm-tab-tbs-dn-ts-hr-se-sw-br, var(--_ctm-tbs-dn-ts-hr-se-sw-br))
398
- );
399
-
400
- --_sf-tbs-hr-ft-fy: var(
401
- --_ctm-mob-tbs-dn-ts-hr-se-ft-fy,
402
- var(--_ctm-tab-tbs-dn-ts-hr-se-ft-fy, var(--_ctm-tbs-dn-ts-hr-se-ft-fy))
403
- );
404
- --_sf-tbs-hr-ft-sz: var(
405
- --_ctm-mob-tbs-dn-ts-hr-se-ft-se,
406
- var(--_ctm-tab-tbs-dn-ts-hr-se-ft-se, var(--_ctm-tbs-dn-ts-hr-se-ft-se))
407
- );
408
- --_sf-tbs-hr-ft-cr: var(
409
- --_ctm-mob-tbs-dn-ts-hr-se-cr,
410
- var(--_ctm-tab-tbs-dn-ts-hr-se-cr, var(--_ctm-tbs-dn-ts-hr-se-cr))
411
- );
412
- --_sf-tbs-hr-ft-wt: var(
413
- --_ctm-mob-tbs-dn-ts-hr-se-ft-wt,
414
- var(--_ctm-tab-tbs-dn-ts-hr-se-ft-wt, var(--_ctm-tbs-dn-ts-hr-se-ft-wt))
415
- );
416
- --_sf-tbs-hr-ft-sty: var(
417
- --_ctm-mob-tbs-dn-ts-hr-se-ft-se-ic,
418
- var(--_ctm-tab-tbs-dn-ts-hr-se-ft-se-ic, var(--_ctm-tbs-dn-ts-hr-se-ft-se-ic))
419
- );
420
- --_sf-tbs-hr-ft-tdc: var(
421
- --_ctm-mob-tbs-dn-ts-hr-se-ue,
422
- var(--_ctm-tab-tbs-dn-ts-hr-se-ue, var(--_ctm-tbs-dn-ts-hr-se-ue))
423
- );
424
- --_sf-tbs-hr-ft-tln: var(
425
- --_ctm-mob-tbs-dn-ts-hr-se-tt-an,
426
- var(--_ctm-tab-tbs-dn-ts-hr-se-tt-an, var(--_ctm-tbs-dn-ts-hr-se-tt-an))
427
- );
428
- --_sf-tbs-hr-ft-lts: var(
429
- --_ctm-mob-tbs-dn-ts-hr-se-lr-sg,
430
- var(--_ctm-tab-tbs-dn-ts-hr-se-lr-sg, var(--_ctm-tbs-dn-ts-hr-se-lr-sg))
431
- );
432
- --_sf-tbs-hr-ft-lht: var(
433
- --_ctm-mob-tbs-dn-ts-hr-se-le-ht,
434
- var(--_ctm-tab-tbs-dn-ts-hr-se-le-ht, var(--_ctm-tbs-dn-ts-hr-se-le-ht))
435
- );
436
- }
437
- }
438
-
439
- &:is([data-tl-vl="stretched"] > div.#{$tabHeaderWrapper} > *) {
440
- flex: 1 0 auto;
441
- }
442
-
443
- & > span {
444
- // display: var(--_d-flex);
445
- width: 100%;
446
-
447
- &:is(.vtl *) {
448
- width: max-content;
449
- }
450
- // width: max-content;
451
-
452
- font-family: var(
453
- --_sf-tbs-sd-ft-fy,
454
- var(
455
- --_sf-tbs-hr-ft-fy,
456
- var(
457
- --_ctm-mob-tbs-dn-ts-dt-se-ft-fy,
458
- var(--_ctm-tab-tbs-dn-ts-dt-se-ft-fy, var(--_ctm-tbs-dn-ts-dt-se-ft-fy))
459
- )
460
- )
461
- );
462
- font-size: var(
463
- --_sf-tbs-sd-ft-sz,
464
- var(
465
- --_sf-tbs-hr-ft-sz,
466
- var(
467
- --_ctm-mob-tbs-dn-ts-dt-se-ft-se,
468
- var(--_ctm-tab-tbs-dn-ts-dt-se-ft-se, var(--_ctm-tbs-dn-ts-dt-se-ft-se))
469
- )
470
- )
471
- );
472
- color: var(
473
- --_sf-tbs-sd-ft-cr,
474
- var(
475
- --_sf-tbs-hr-ft-cr,
476
- var(
477
- --_ctm-mob-tbs-dn-ts-dt-se-cr,
478
- var(--_ctm-tab-tbs-dn-ts-dt-se-cr, var(--_ctm-tbs-dn-ts-dt-se-cr))
479
- )
480
- )
481
- );
482
- font-weight: var(
483
- --_sf-tbs-sd-ft-wt,
484
- var(
485
- --_sf-tbs-hr-ft-wt,
486
- var(
487
- --_ctm--mob-tbs-dn-ts-dt-se-ft-wt,
488
- var(--_ctm-tab-tbs-dn-ts-dt-se-ft-wt, var(--_ctm-tbs-dn-ts-dt-se-ft-wt))
489
- )
490
- )
491
- );
492
- font-style: var(
493
- --_sf-tbs-sd-ft-sty,
494
- var(
495
- --_sf-tbs-hr-ft-sty,
496
- var(
497
- --_ctm-mob-tbs-dn-ts-dt-se-ft-se-ic,
498
- var(
499
- --_ctm-tab-tbs-dn-ts-dt-se-ft-se-ic,
500
- var(--_ctm-tbs-dn-ts-dt-se-ft-se-ic, normal)
501
- )
502
- )
503
- )
504
- );
505
- text-decoration: var(
506
- --_sf-tbs-sd-ft-tdc,
507
- var(
508
- --_sf-tbs-hr-ft-tdc,
509
- var(
510
- --_ctm-mob-tbs-dn-ts-dt-se-ue,
511
- var(--_ctm-tab-tbs-dn-ts-dt-se-ue, var(--_ctm-tbs-dn-ts-dt-se-ue))
512
- )
513
- )
514
- );
515
- text-align: var(
516
- --_sf-tbs-sd-ft-tln,
517
- var(
518
- --_sf-tbs-hr-ft-tln,
519
- var(
520
- --_ctm-mob-tbs-dn-ts-dt-se-tt-an,
521
- var(--_ctm-tab-tbs-dn-ts-dt-se-tt-an, var(--_ctm-tbs-dn-ts-dt-se-tt-an))
522
- )
523
- )
524
- );
525
- letter-spacing: var(
526
- --_sf-tbs-sd-ft-lts,
527
- var(
528
- --_sf-tbs-hr-ft-lts,
529
- var(
530
- --_ctm-mob-tbs-dn-ts-dt-se-lr-sg,
531
- var(--_ctm-tab-tbs-dn-ts-dt-se-lr-sg, var(--_ctm-tbs-dn-ts-dt-se-lr-sg))
532
- )
533
- )
534
- );
535
- line-height: var(
536
- --_sf-tbs-sd-ft-lht,
537
- var(
538
- --_sf-tbs-hr-ft-lht,
539
- var(
540
- --_ctm-mob-tbs-dn-ts-dt-se-le-ht,
541
- var(--_ctm-tab-tbs-dn-ts-dt-se-le-ht, var(--_ctm-tbs-dn-ts-dt-se-le-ht))
542
- )
543
- )
544
- );
545
- }
546
- }
547
- }
548
- }
549
-
550
- &.#{$tabBody} {
551
- display: var(--_d-flex);
552
- flex: 1 1 auto;
553
-
554
- & > div {
555
- &.#{$tabBodyWrapper} {
556
- display: var(--_d-grid);
557
- grid-template-columns: 100%;
558
- grid-template-rows: 100%;
559
- width: 100%;
560
- }
561
- }
562
- }
563
- }
564
- }
565
- }
566
-
567
- // &[data-view-state="full"] {
568
- // width: auto;
569
- // margin: 0;
570
- // justify-self: stretch !important;
571
- // align-self: stretch !important;
572
- // cursor: auto;
573
- // &:is(#{$activeElementSelector}) {
574
- // & > div {
575
- // &[data-div-type="wrapper__layer"] {
576
- // --_sf-vt-zz: visible;
577
- // --_sf-op-zz: 1;
578
- // }
579
- // }
580
- // }
581
- // }
582
- }
583
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+ $activeElementSelector: "[data-has-clicked='true']";
5
+ $root: "flex__tbs";
6
+ $sfKey: "--_flex-tbs-";
7
+ $tabHeader: "#{$root}__header";
8
+ $tabHeaderWrapper: "#{$tabHeader}__wrapper";
9
+ $tabBody: "#{$root}__body";
10
+ $tabBodyWrapper: #{$tabBody}__wrapper;
11
+
12
+ [data-div-type="element"] {
13
+ &[data-element-type="tbs-v2"] {
14
+ width: calc(
15
+ 1% *
16
+ var(
17
+ --_ctm-mob-tbs-ele-nw-wh-vl,
18
+ var(--_ctm-tab-tbs-ele-nw-wh-vl, var(--_ctm-tbs-ele-nw-wh-vl, auto))
19
+ )
20
+ );
21
+ margin: var(
22
+ --_ctm-mob-tbs-lt-mn,
23
+ var(--_ctm-tab-tbs-lt-mn, var(--_ctm-tbs-lt-mn, var(--_ctm-lt-mn)))
24
+ );
25
+
26
+ & > div {
27
+ &.wrapper {
28
+ width: 100%;
29
+ padding: var(--_ctm-mob-tbs-lt-pg, var(--_ctm-tab-tbs-lt-pg, var(--_ctm-tbs-lt-pg)));
30
+
31
+ background-color: var(
32
+ --_ctm-mob-tbs-dn-tb-cr-bd-cr,
33
+ var(--_ctm-tab-tbs-dn-tb-cr-bd-cr, var(--_ctm-tbs-dn-tb-cr-bd-cr))
34
+ );
35
+ // background-image: var(
36
+ // --_ctm-mob-tbs-dn-bd-ie,
37
+ // var(--_ctm-tab-tbs-dn-bd-ie, var(--_ctm-tbs-dn-bd-ie))
38
+ // );
39
+ // background-attachment: var(
40
+ // --_ctm-mob-tbs-dn-bd-at,
41
+ // var(--_ctm-tab-tbs-dn-bd-at, var(--_ctm-tbs-dn-bd-at))
42
+ // );
43
+ // background-position: var(
44
+ // --_ctm-mob-tbs-dn-bd-pn,
45
+ // var(--_ctm-tab-tbs-dn-bd-pn, var(--_ctm-tbs-dn-bd-pn))
46
+ // );
47
+ // background-repeat: var(
48
+ // --_ctm-mob-tbs-dn-bd-rt,
49
+ // var(--_ctm-tab-tbs-dn-bd-rt, var(--_ctm-tbs-dn-bd-rt))
50
+ // );
51
+ // background-size: var(
52
+ // --_ctm-mob-tbs-dn-bd-se,
53
+ // var(--_ctm-tab-tbs-dn-bd-se, var(--_ctm-tbs-dn-bd-se))
54
+ // );
55
+ border-radius: var(
56
+ --_hide-tbs-own-border,
57
+ var(
58
+ --_ctm-mob-tbs-dn-tb-cr-br-rs,
59
+ var(--_ctm-tab-tbs-dn-tb-cr-br-rs, var(--_ctm-tbs-dn-tb-cr-br-rs))
60
+ )
61
+ );
62
+ border-color: var(
63
+ --_hide-tbs-own-border,
64
+ var(
65
+ --_ctm-mob-tbs-dn-tb-cr-br-cr,
66
+ var(--_ctm-tab-tbs-dn-tb-cr-br-cr, var(--_ctm-tbs-dn-tb-cr-br-cr))
67
+ )
68
+ );
69
+ border-style: var(
70
+ --_hide-tbs-own-border,
71
+ var(
72
+ --_ctm-mob-tbs-dn-tb-cr-br-se,
73
+ var(--_ctm-tab-tbs-dn-tb-cr-br-se, var(--_ctm-tbs-dn-tb-cr-br-se))
74
+ )
75
+ );
76
+ border-width: var(
77
+ --_hide-tbs-own-border,
78
+ var(
79
+ --_ctm-mob-tbs-dn-tb-cr-br-wh,
80
+ var(--_ctm-tab-tbs-dn-tb-cr-br-wh, var(--_ctm-tbs-dn-tb-cr-br-wh))
81
+ )
82
+ );
83
+ box-shadow: var(
84
+ --_hide-tbs-own-shadow,
85
+ var(
86
+ --_ctm-mob-tbs-dn-tb-cr-sw-ae,
87
+ var(--_ctm-tab-tbs-dn-tb-cr-sw-ae, var(--_ctm-tbs-dn-tb-cr-sw-ae))
88
+ )
89
+ var(
90
+ --_ctm-mob-tbs-dn-tb-cr-sw-br,
91
+ var(--_ctm-tab-tbs-dn-tb-cr-sw-br, var(--_ctm-tbs-dn-tb-cr-sw-br))
92
+ )
93
+ var(
94
+ --_ctm-mob-tbs-dn-tb-cr-sw-sd,
95
+ var(--_ctm-tab-tbs-dn-tb-cr-sw-sd, var(--_ctm-tbs-dn-tb-cr-sw-sd))
96
+ )
97
+ var(
98
+ --_ctm-mob-tbs-dn-tb-cr-sw-cr,
99
+ var(--_ctm-tab-tbs-dn-tb-cr-sw-cr, var(--_ctm-tbs-dn-tb-cr-sw-cr))
100
+ )
101
+ );
102
+
103
+ display: var(--_d-flex) !important;
104
+ min-height: var(
105
+ --_ctm-mob-tbs-lt-ht,
106
+ var(--_ctm-tab-tbs-lt-ht, var(--_ctm-tbs-lt-ht))
107
+ ) !important;
108
+ flex-direction: var(#{$sfKey}fd, column);
109
+
110
+ &.hrz {
111
+ #{$sfKey}fd: column;
112
+ #{$sfKey}fd-header: row;
113
+ #{$sfKey}fd-jst: var(
114
+ --_ctm-mob-tbs-lt-jy-ct,
115
+ var(--_ctm-tab-tbs-lt-jy-ct, var(--_ctm-tbs-lt-jy-ct))
116
+ );
117
+ }
118
+ &.vtl {
119
+ #{$sfKey}fd: row;
120
+ #{$sfKey}fd-header: column;
121
+ #{$sfKey}fd-algn: var(
122
+ --_ctm-mob-tbs-lt-an-is,
123
+ var(--_ctm-tab-tbs-lt-an-is, var(--_ctm-tbs-lt-an-is))
124
+ );
125
+ }
126
+
127
+ & > div {
128
+ &.#{$tabHeader} {
129
+ display: var(--_d-flex);
130
+
131
+ &[data-hs-br="false"] {
132
+ --_hide-btn-border: none;
133
+ }
134
+ &[data-hs-bs="false"] {
135
+ --_hide-btn-shadow: none;
136
+ }
137
+ &[data-tl-vl="stretched"] {
138
+ --_sf-tl-vl-al: space-between;
139
+ }
140
+ & > .#{$tabHeaderWrapper} {
141
+ --_sf-gap-vl: var(
142
+ --_ctm-mob-tbs-lt-tb-sg,
143
+ var(--_ctm-tab-tbs-lt-tb-sg, var(--_ctm-tbs-lt-tb-sg))
144
+ );
145
+ // width: 100%;
146
+ width: prepareMediaVariable(--_ctm-tbs-dn-tb-cr-cr-wh, 100%);
147
+ min-height: prepareMediaVariable(--_ctm-tbs-dn-tb-cr-cr-mn-ht, auto);
148
+ padding: prepareMediaVariable(--_ctm-tbs-dn-tb-cr-pg, 0px);
149
+ display: var(--_d-flex);
150
+ flex-direction: var(#{$sfKey}fd-header, row);
151
+ &:is(.vtl *) {
152
+ justify-content: var(--_sf-tl-vl-al, var(#{$sfKey}fd-algn));
153
+ row-gap: var(--_sf-gap-vl);
154
+ }
155
+ &:is(.hrz *) {
156
+ justify-content: var(--_sf-tl-vl-al, var(#{$sfKey}fd-jst));
157
+ column-gap: var(--_sf-gap-vl);
158
+
159
+ &[data-ovf-vl="wrap"] {
160
+ flex-wrap: wrap;
161
+ }
162
+ &[data-ovf-vl="no wrap"] {
163
+ overflow-x: auto;
164
+ scrollbar-width: none;
165
+ }
166
+ }
167
+
168
+ & > button {
169
+ display: var(--_d-flex);
170
+ padding-inline: var(
171
+ --_ctm-mob-tbs-lt-hl-pg,
172
+ var(--_ctm-tab-tbs-lt-hl-pg, var(--_ctm-tbs-lt-hl-pg))
173
+ );
174
+ padding-block: var(
175
+ --_ctm-mob-tbs-lt-vl-pg,
176
+ var(--_ctm-tab-tbs-lt-vl-pg, var(--_ctm-tbs-lt-vl-pg))
177
+ );
178
+ background-color: var(
179
+ --_sf-tbs-sd-bg-cr,
180
+ var(
181
+ --_sf-tbs-hr-bg-cr,
182
+ var(
183
+ --_ctm-mob-tbs-dn-ts-dt-se-bd-cr,
184
+ var(--_ctm-tab-tbs-dn-ts-dt-se-bd-cr, var(--_ctm-tbs-dn-ts-dt-se-bd-cr))
185
+ )
186
+ )
187
+ );
188
+
189
+ border-color: var(
190
+ --_hide-btn-border,
191
+ var(
192
+ --_sf-tbs-sd-br-cr,
193
+ var(
194
+ --_sf-tbs-hr-br-cr,
195
+ var(
196
+ --_ctm-mob-tbs-dn-ts-dt-se-br-cr,
197
+ var(--_ctm-tab-tbs-dn-ts-dt-se-br-cr, var(--_ctm-tbs-dn-ts-dt-se-br-cr))
198
+ )
199
+ )
200
+ )
201
+ );
202
+ border-style: var(
203
+ --_hide-btn-border,
204
+ var(
205
+ --_sf-tbs-sd-br-sty,
206
+ var(
207
+ --_sf-tbs-hr-br-sty,
208
+ var(
209
+ --_ctm-mob-tbs-dn-ts-dt-se-br-se,
210
+ var(--_ctm-tab-tbs-dn-ts-dt-se-br-se, var(--_ctm-tbs-dn-ts-dt-se-br-se))
211
+ )
212
+ )
213
+ )
214
+ );
215
+ border-width: var(
216
+ --_hide-btn-border,
217
+ var(
218
+ --_sf-tbs-sd-br-wt,
219
+ var(
220
+ --_sf-tbs-hr-br-wt,
221
+ var(
222
+ --_ctm-mob-tbs-dn-ts-dt-se-br-wh,
223
+ var(--_ctm-tab-tbs-dn-ts-dt-se-br-wh, var(--_ctm-tbs-dn-ts-dt-se-br-wh))
224
+ )
225
+ )
226
+ )
227
+ );
228
+ border-radius: var(
229
+ --_sf-tbs-sd-br-rs,
230
+ var(
231
+ --_sf-tbs-hr-br-rs,
232
+ var(
233
+ --_ctm-mob-tbs-dn-ts-dt-se-br-rs,
234
+ var(--_ctm-tab-tbs-dn-ts-dt-se-br-rs, var(--_ctm-tbs-dn-ts-dt-se-br-rs))
235
+ )
236
+ )
237
+ );
238
+
239
+ box-shadow: var(
240
+ --_hide-btn-shadow,
241
+ var(
242
+ --_sf-tbs-sd-sw-ae,
243
+ var(
244
+ --_sf-tbs-hr-sw-ae,
245
+ var(
246
+ --_ctm-mob-tbs-dn-tb-cr-sw-ae,
247
+ var(--_ctm-tab-tbs-dn-tb-cr-sw-ae, var(--_ctm-tbs-dn-tb-cr-sw-ae))
248
+ )
249
+ )
250
+ )
251
+ var(
252
+ --_sf-tbs-sd-sw-br,
253
+ var(
254
+ --_sf-tbs-hr-sw-br,
255
+ var(
256
+ --_ctm-mob-tbs-dn-tb-cr-sw-br,
257
+ var(--_ctm-tab-tbs-dn-tb-cr-sw-br, var(--_ctm-tbs-dn-tb-cr-sw-br))
258
+ )
259
+ )
260
+ )
261
+ var(
262
+ --_sf-tbs-sd-sw-sd,
263
+ var(
264
+ --_sf-tbs-hr-sw-sd,
265
+ var(
266
+ --_ctm-mob-tbs-dn-tb-cr-sw-sd,
267
+ var(--_ctm-tab-tbs-dn-tb-cr-sw-sd, var(--_ctm-tbs-dn-tb-cr-sw-sd))
268
+ )
269
+ )
270
+ )
271
+ var(
272
+ --_sf-tbs-sd-sw-cr,
273
+ var(
274
+ --_sf-tbs-hr-sw-cr,
275
+ var(
276
+ --_ctm-mob-tbs-dn-tb-cr-sw-cr,
277
+ var(--_ctm-tab-tbs-dn-tb-cr-sw-cr, var(--_ctm-tbs-dn-tb-cr-sw-cr))
278
+ )
279
+ )
280
+ )
281
+ );
282
+
283
+ &.active {
284
+ --_sf-tbs-sd-bg-cr: var(
285
+ --_ctm-mob-tbs-dn-ts-sd-se-bd-cr,
286
+ var(--_ctm-tab-tbs-dn-ts-sd-se-bd-cr, var(--_ctm-tbs-dn-ts-sd-se-bd-cr))
287
+ );
288
+
289
+ --_sf-tbs-sd-br-cr: var(
290
+ --_ctm-mob-tbs-dn-ts-sd-se-br-cr,
291
+ var(--_ctm-tab-tbs-dn-ts-sd-se-br-cr, var(--_ctm-tbs-dn-ts-sd-se-br-cr))
292
+ );
293
+ --_sf-tbs-sd-br-wt: var(
294
+ --_ctm-mob-tbs-dn-ts-sd-se-br-wh,
295
+ var(--_ctm-tab-tbs-dn-ts-sd-se-br-wh, var(--_ctm-tbs-dn-ts-sd-se-br-wh))
296
+ );
297
+ --_sf-tbs-sd-br-sty: var(
298
+ --_ctm-mob-tbs-dn-ts-sd-se-br-se,
299
+ var(--_ctm-tab-tbs-dn-ts-sd-se-br-se, var(--_ctm-tbs-dn-ts-sd-se-br-se))
300
+ );
301
+ --_sf-tbs-sd-br-rs: var(
302
+ --_ctm-mob-tbs-dn-ts-sd-se-br-rs,
303
+ var(--_ctm-tab-tbs-dn-ts-sd-se-br-rs, var(--_ctm-tbs-dn-ts-sd-se-br-rs))
304
+ );
305
+ --_sf-tbs-sd-sw-ae: var(
306
+ --_ctm-mob-tbs-dn-ts-sd-se-sw-ae,
307
+ var(--_ctm-tab-tbs-dn-ts-sd-se-sw-ae, var(--_ctm-tbs-dn-ts-sd-se-sw-ae))
308
+ );
309
+ --_sf-tbs-sd-sw-cr: var(
310
+ --_ctm-mob-tbs-dn-ts-sd-se-sw-cr,
311
+ var(--_ctm-tab-tbs-dn-ts-sd-se-sw-cr, var(--_ctm-tbs-dn-ts-sd-se-sw-cr))
312
+ );
313
+ --_sf-tbs-sd-sw-sd: var(
314
+ --_ctm-mob-tbs-dn-ts-sd-se-sw-sd,
315
+ var(--_ctm-tab-tbs-dn-ts-sd-se-sw-sd, var(--_ctm-tbs-dn-ts-sd-se-sw-sd))
316
+ );
317
+ --_sf-tbs-sd-sw-br: var(
318
+ --_ctm-mob-tbs-dn-ts-sd-se-sw-br,
319
+ var(--_ctm-tab-tbs-dn-ts-sd-se-sw-br, var(--_ctm-tbs-dn-ts-sd-se-sw-br))
320
+ );
321
+
322
+ --_sf-tbs-sd-ft-fy: var(
323
+ --_ctm-mob-tbs-dn-ts-sd-se-ft-fy,
324
+ var(--_ctm-tab-tbs-dn-ts-sd-se-ft-fy, var(--_ctm-tbs-dn-ts-sd-se-ft-fy))
325
+ );
326
+ --_sf-tbs-sd-ft-sz: var(
327
+ --_ctm-mob-tbs-dn-ts-sd-se-ft-se,
328
+ var(--_ctm-tab-tbs-dn-ts-sd-se-ft-se, var(--_ctm-tbs-dn-ts-sd-se-ft-se))
329
+ );
330
+ --_sf-tbs-sd-ft-cr: var(
331
+ --_ctm-mob-tbs-dn-ts-sd-se-cr,
332
+ var(--_ctm-tab-tbs-dn-ts-sd-se-cr, var(--_ctm-tbs-dn-ts-sd-se-cr))
333
+ );
334
+ --_sf-tbs-sd-ft-wt: var(
335
+ --_ctm-mob-tbs-dn-ts-sd-se-ft-wt,
336
+ var(--_ctm-tab-tbs-dn-ts-sd-se-ft-wt, var(--_ctm-tbs-dn-ts-sd-se-ft-wt))
337
+ );
338
+ --_sf-tbs-sd-ft-sty: var(
339
+ --_ctm-mob-tbs-dn-ts-sd-se-ft-se-ic,
340
+ var(--_ctm-tab-tbs-dn-ts-sd-se-ft-se-ic, var(--_ctm-tbs-dn-ts-sd-se-ft-se-ic))
341
+ );
342
+ --_sf-tbs-sd-ft-tdc: var(
343
+ --_ctm-mob-tbs-dn-ts-sd-se-ue,
344
+ var(--_ctm-tab-tbs-dn-ts-sd-se-ue, var(--_ctm-tbs-dn-ts-sd-se-ue))
345
+ );
346
+ --_sf-tbs-sd-ft-tln: var(
347
+ --_ctm-mob-tbs-dn-ts-sd-se-tt-an,
348
+ var(--_ctm-tab-tbs-dn-ts-sd-se-tt-an, var(--_ctm-tbs-dn-ts-sd-se-tt-an))
349
+ );
350
+ --_sf-tbs-sd-ft-lts: var(
351
+ --_ctm-mob-tbs-dn-ts-sd-se-lr-sg,
352
+ var(--_ctm-tab-tbs-dn-ts-sd-se-lr-sg, var(--_ctm-tbs-dn-ts-sd-se-lr-sg))
353
+ );
354
+ --_sf-tbs-sd-ft-lht: var(
355
+ --_ctm-mob-tbs-dn-ts-sd-se-le-ht,
356
+ var(--_ctm-tab-tbs-dn-ts-sd-se-le-ht, var(--_ctm-tbs-dn-ts-sd-se-le-ht))
357
+ );
358
+ }
359
+
360
+ &:not(.active) {
361
+ &:hover {
362
+ --_sf-tbs-hr-bg-cr: var(
363
+ --_ctm-mob-tbs-dn-ts-hr-se-bd-cr,
364
+ var(--_ctm-tab-tbs-dn-ts-hr-se-bd-cr, var(--_ctm-tbs-dn-ts-hr-se-bd-cr))
365
+ );
366
+
367
+ --_sf-tbs-hr-br-cr: var(
368
+ --_ctm-mob-tbs-dn-ts-hr-se-br-cr,
369
+ var(--_ctm-tab-tbs-dn-ts-hr-se-br-cr, var(--_ctm-tbs-dn-ts-hr-se-br-cr))
370
+ );
371
+ --_sf-tbs-hr-br-wt: var(
372
+ --_ctm-mob-tbs-dn-ts-hr-se-br-wh,
373
+ var(--_ctm-tab-tbs-dn-ts-hr-se-br-wh, var(--_ctm-tbs-dn-ts-hr-se-br-wh))
374
+ );
375
+ --_sf-tbs-hr-br-sty: var(
376
+ --_ctm-mob-tbs-dn-ts-hr-se-br-se,
377
+ var(--_ctm-tab-tbs-dn-ts-hr-se-br-se, var(--_ctm-tbs-dn-ts-hr-se-br-se))
378
+ );
379
+ --_sf-tbs-hr-br-rs: var(
380
+ --_ctm-mob-tbs-dn-ts-hr-se-br-rs,
381
+ var(--_ctm-tab-tbs-dn-ts-hr-se-br-rs, var(--_ctm-tbs-dn-ts-hr-se-br-rs))
382
+ );
383
+ --_sf-tbs-hr-sw-ae: var(
384
+ --_ctm-mob-tbs-dn-ts-hr-se-sw-ae,
385
+ var(--_ctm-tab-tbs-dn-ts-hr-se-sw-ae, var(--_ctm-tbs-dn-ts-hr-se-sw-ae))
386
+ );
387
+ --_sf-tbs-hr-sw-cr: var(
388
+ --_ctm-mob-tbs-dn-ts-hr-se-sw-cr,
389
+ var(--_ctm-tab-tbs-dn-ts-hr-se-sw-cr, var(--_ctm-tbs-dn-ts-hr-se-sw-cr))
390
+ );
391
+ --_sf-tbs-hr-sw-sd: var(
392
+ --_ctm-mob-tbs-dn-ts-hr-se-sw-sd,
393
+ var(--_ctm-tab-tbs-dn-ts-hr-se-sw-sd, var(--_ctm-tbs-dn-ts-hr-se-sw-sd))
394
+ );
395
+ --_sf-tbs-hr-sw-br: var(
396
+ --_ctm-mob-tbs-dn-ts-hr-se-sw-br,
397
+ var(--_ctm-tab-tbs-dn-ts-hr-se-sw-br, var(--_ctm-tbs-dn-ts-hr-se-sw-br))
398
+ );
399
+
400
+ --_sf-tbs-hr-ft-fy: var(
401
+ --_ctm-mob-tbs-dn-ts-hr-se-ft-fy,
402
+ var(--_ctm-tab-tbs-dn-ts-hr-se-ft-fy, var(--_ctm-tbs-dn-ts-hr-se-ft-fy))
403
+ );
404
+ --_sf-tbs-hr-ft-sz: var(
405
+ --_ctm-mob-tbs-dn-ts-hr-se-ft-se,
406
+ var(--_ctm-tab-tbs-dn-ts-hr-se-ft-se, var(--_ctm-tbs-dn-ts-hr-se-ft-se))
407
+ );
408
+ --_sf-tbs-hr-ft-cr: var(
409
+ --_ctm-mob-tbs-dn-ts-hr-se-cr,
410
+ var(--_ctm-tab-tbs-dn-ts-hr-se-cr, var(--_ctm-tbs-dn-ts-hr-se-cr))
411
+ );
412
+ --_sf-tbs-hr-ft-wt: var(
413
+ --_ctm-mob-tbs-dn-ts-hr-se-ft-wt,
414
+ var(--_ctm-tab-tbs-dn-ts-hr-se-ft-wt, var(--_ctm-tbs-dn-ts-hr-se-ft-wt))
415
+ );
416
+ --_sf-tbs-hr-ft-sty: var(
417
+ --_ctm-mob-tbs-dn-ts-hr-se-ft-se-ic,
418
+ var(--_ctm-tab-tbs-dn-ts-hr-se-ft-se-ic, var(--_ctm-tbs-dn-ts-hr-se-ft-se-ic))
419
+ );
420
+ --_sf-tbs-hr-ft-tdc: var(
421
+ --_ctm-mob-tbs-dn-ts-hr-se-ue,
422
+ var(--_ctm-tab-tbs-dn-ts-hr-se-ue, var(--_ctm-tbs-dn-ts-hr-se-ue))
423
+ );
424
+ --_sf-tbs-hr-ft-tln: var(
425
+ --_ctm-mob-tbs-dn-ts-hr-se-tt-an,
426
+ var(--_ctm-tab-tbs-dn-ts-hr-se-tt-an, var(--_ctm-tbs-dn-ts-hr-se-tt-an))
427
+ );
428
+ --_sf-tbs-hr-ft-lts: var(
429
+ --_ctm-mob-tbs-dn-ts-hr-se-lr-sg,
430
+ var(--_ctm-tab-tbs-dn-ts-hr-se-lr-sg, var(--_ctm-tbs-dn-ts-hr-se-lr-sg))
431
+ );
432
+ --_sf-tbs-hr-ft-lht: var(
433
+ --_ctm-mob-tbs-dn-ts-hr-se-le-ht,
434
+ var(--_ctm-tab-tbs-dn-ts-hr-se-le-ht, var(--_ctm-tbs-dn-ts-hr-se-le-ht))
435
+ );
436
+ }
437
+ }
438
+
439
+ &:is([data-tl-vl="stretched"] > div.#{$tabHeaderWrapper} > *) {
440
+ flex: 1 0 auto;
441
+ }
442
+
443
+ & > span {
444
+ // display: var(--_d-flex);
445
+ width: 100%;
446
+
447
+ &:is(.vtl *) {
448
+ width: max-content;
449
+ }
450
+ // width: max-content;
451
+
452
+ font-family: var(
453
+ --_sf-tbs-sd-ft-fy,
454
+ var(
455
+ --_sf-tbs-hr-ft-fy,
456
+ var(
457
+ --_ctm-mob-tbs-dn-ts-dt-se-ft-fy,
458
+ var(--_ctm-tab-tbs-dn-ts-dt-se-ft-fy, var(--_ctm-tbs-dn-ts-dt-se-ft-fy))
459
+ )
460
+ )
461
+ );
462
+ font-size: var(
463
+ --_sf-tbs-sd-ft-sz,
464
+ var(
465
+ --_sf-tbs-hr-ft-sz,
466
+ var(
467
+ --_ctm-mob-tbs-dn-ts-dt-se-ft-se,
468
+ var(--_ctm-tab-tbs-dn-ts-dt-se-ft-se, var(--_ctm-tbs-dn-ts-dt-se-ft-se))
469
+ )
470
+ )
471
+ );
472
+ color: var(
473
+ --_sf-tbs-sd-ft-cr,
474
+ var(
475
+ --_sf-tbs-hr-ft-cr,
476
+ var(
477
+ --_ctm-mob-tbs-dn-ts-dt-se-cr,
478
+ var(--_ctm-tab-tbs-dn-ts-dt-se-cr, var(--_ctm-tbs-dn-ts-dt-se-cr))
479
+ )
480
+ )
481
+ );
482
+ font-weight: var(
483
+ --_sf-tbs-sd-ft-wt,
484
+ var(
485
+ --_sf-tbs-hr-ft-wt,
486
+ var(
487
+ --_ctm--mob-tbs-dn-ts-dt-se-ft-wt,
488
+ var(--_ctm-tab-tbs-dn-ts-dt-se-ft-wt, var(--_ctm-tbs-dn-ts-dt-se-ft-wt))
489
+ )
490
+ )
491
+ );
492
+ font-style: var(
493
+ --_sf-tbs-sd-ft-sty,
494
+ var(
495
+ --_sf-tbs-hr-ft-sty,
496
+ var(
497
+ --_ctm-mob-tbs-dn-ts-dt-se-ft-se-ic,
498
+ var(
499
+ --_ctm-tab-tbs-dn-ts-dt-se-ft-se-ic,
500
+ var(--_ctm-tbs-dn-ts-dt-se-ft-se-ic, normal)
501
+ )
502
+ )
503
+ )
504
+ );
505
+ text-decoration: var(
506
+ --_sf-tbs-sd-ft-tdc,
507
+ var(
508
+ --_sf-tbs-hr-ft-tdc,
509
+ var(
510
+ --_ctm-mob-tbs-dn-ts-dt-se-ue,
511
+ var(--_ctm-tab-tbs-dn-ts-dt-se-ue, var(--_ctm-tbs-dn-ts-dt-se-ue))
512
+ )
513
+ )
514
+ );
515
+ text-align: var(
516
+ --_sf-tbs-sd-ft-tln,
517
+ var(
518
+ --_sf-tbs-hr-ft-tln,
519
+ var(
520
+ --_ctm-mob-tbs-dn-ts-dt-se-tt-an,
521
+ var(--_ctm-tab-tbs-dn-ts-dt-se-tt-an, var(--_ctm-tbs-dn-ts-dt-se-tt-an))
522
+ )
523
+ )
524
+ );
525
+ letter-spacing: var(
526
+ --_sf-tbs-sd-ft-lts,
527
+ var(
528
+ --_sf-tbs-hr-ft-lts,
529
+ var(
530
+ --_ctm-mob-tbs-dn-ts-dt-se-lr-sg,
531
+ var(--_ctm-tab-tbs-dn-ts-dt-se-lr-sg, var(--_ctm-tbs-dn-ts-dt-se-lr-sg))
532
+ )
533
+ )
534
+ );
535
+ line-height: var(
536
+ --_sf-tbs-sd-ft-lht,
537
+ var(
538
+ --_sf-tbs-hr-ft-lht,
539
+ var(
540
+ --_ctm-mob-tbs-dn-ts-dt-se-le-ht,
541
+ var(--_ctm-tab-tbs-dn-ts-dt-se-le-ht, var(--_ctm-tbs-dn-ts-dt-se-le-ht))
542
+ )
543
+ )
544
+ );
545
+ }
546
+ }
547
+ }
548
+ }
549
+
550
+ &.#{$tabBody} {
551
+ display: var(--_d-flex);
552
+ flex: 1 1 auto;
553
+
554
+ & > div {
555
+ &.#{$tabBodyWrapper} {
556
+ display: var(--_d-grid);
557
+ grid-template-columns: 100%;
558
+ grid-template-rows: 100%;
559
+ width: 100%;
560
+ }
561
+ }
562
+ }
563
+ }
564
+ }
565
+ }
566
+
567
+ // &[data-view-state="full"] {
568
+ // width: auto;
569
+ // margin: 0;
570
+ // justify-self: stretch !important;
571
+ // align-self: stretch !important;
572
+ // cursor: auto;
573
+ // &:is(#{$activeElementSelector}) {
574
+ // & > div {
575
+ // &[data-div-type="wrapper__layer"] {
576
+ // --_sf-vt-zz: visible;
577
+ // --_sf-op-zz: 1;
578
+ // }
579
+ // }
580
+ // }
581
+ // }
582
+ }
583
+ }