@medyll/idae-slotui-svelte 0.121.0 → 0.122.1

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 (107) hide show
  1. package/dist/index.d.ts +64 -64
  2. package/dist/index.js +64 -64
  3. package/dist/slotui-css/alert.css +95 -95
  4. package/dist/slotui-css/alert.min.css +95 -95
  5. package/dist/slotui-css/auto-complete.css +11 -11
  6. package/dist/slotui-css/auto-complete.min.css +11 -11
  7. package/dist/slotui-css/avatar.css +12 -12
  8. package/dist/slotui-css/avatar.min.css +12 -12
  9. package/dist/slotui-css/backdrop.css +31 -31
  10. package/dist/slotui-css/backdrop.min.css +31 -31
  11. package/dist/slotui-css/badge.css +15 -15
  12. package/dist/slotui-css/badge.min.css +15 -15
  13. package/dist/slotui-css/boot-menu.css +76 -76
  14. package/dist/slotui-css/boot-menu.min.css +76 -76
  15. package/dist/slotui-css/box.css +28 -28
  16. package/dist/slotui-css/box.min.css +28 -28
  17. package/dist/slotui-css/breadcrumb.css +2 -2
  18. package/dist/slotui-css/breadcrumb.min.css +2 -2
  19. package/dist/slotui-css/button-action.css +7 -7
  20. package/dist/slotui-css/button-action.min.css +7 -7
  21. package/dist/slotui-css/button-menu.css +30 -30
  22. package/dist/slotui-css/button-menu.min.css +30 -30
  23. package/dist/slotui-css/button.css +760 -760
  24. package/dist/slotui-css/button.min.css +760 -760
  25. package/dist/slotui-css/cartouche.css +113 -113
  26. package/dist/slotui-css/cartouche.min.css +113 -113
  27. package/dist/slotui-css/checkbox.css +126 -126
  28. package/dist/slotui-css/checkbox.min.css +126 -126
  29. package/dist/slotui-css/chipper.css +55 -55
  30. package/dist/slotui-css/chipper.min.css +55 -55
  31. package/dist/slotui-css/chrome-frame.css +33 -33
  32. package/dist/slotui-css/chrome-frame.min.css +33 -33
  33. package/dist/slotui-css/confirm.css +8 -8
  34. package/dist/slotui-css/confirm.min.css +8 -8
  35. package/dist/slotui-css/containerConfig.css +6 -6
  36. package/dist/slotui-css/containerConfig.min.css +6 -6
  37. package/dist/slotui-css/content-switcher.css +20 -20
  38. package/dist/slotui-css/content-switcher.min.css +20 -20
  39. package/dist/slotui-css/csss.css +9 -9
  40. package/dist/slotui-css/csss.min.css +9 -9
  41. package/dist/slotui-css/datalist.css +135 -135
  42. package/dist/slotui-css/datalist.min.css +135 -135
  43. package/dist/slotui-css/divider.css +15 -15
  44. package/dist/slotui-css/divider.min.css +15 -15
  45. package/dist/slotui-css/drawer.css +87 -87
  46. package/dist/slotui-css/drawer.min.css +87 -87
  47. package/dist/slotui-css/finder.css +73 -73
  48. package/dist/slotui-css/finder.min.css +73 -73
  49. package/dist/slotui-css/frame.css +48 -48
  50. package/dist/slotui-css/frame.min.css +48 -48
  51. package/dist/slotui-css/icon.css +15 -15
  52. package/dist/slotui-css/icon.min.css +15 -15
  53. package/dist/slotui-css/loader.css +45 -45
  54. package/dist/slotui-css/loader.min.css +45 -45
  55. package/dist/slotui-css/marquee.css +57 -57
  56. package/dist/slotui-css/marquee.min.css +57 -57
  57. package/dist/slotui-css/menu-list.css +216 -216
  58. package/dist/slotui-css/menu-list.min.css +216 -216
  59. package/dist/slotui-css/menu.css +95 -95
  60. package/dist/slotui-css/menu.min.css +95 -95
  61. package/dist/slotui-css/panel.css +24 -24
  62. package/dist/slotui-css/panel.min.css +24 -24
  63. package/dist/slotui-css/paper.css +20 -20
  64. package/dist/slotui-css/paper.min.css +20 -20
  65. package/dist/slotui-css/popper.css +84 -84
  66. package/dist/slotui-css/popper.min.css +84 -84
  67. package/dist/slotui-css/progress.css +19 -19
  68. package/dist/slotui-css/progress.min.css +19 -19
  69. package/dist/slotui-css/rating.css +8 -8
  70. package/dist/slotui-css/rating.min.css +8 -8
  71. package/dist/slotui-css/select.css +10 -10
  72. package/dist/slotui-css/select.min.css +10 -10
  73. package/dist/slotui-css/sheetConfig.css +6 -6
  74. package/dist/slotui-css/sheetConfig.min.css +6 -6
  75. package/dist/slotui-css/slider.css +73 -73
  76. package/dist/slotui-css/slider.min.css +73 -73
  77. package/dist/slotui-css/slotui-css.css +4574 -4574
  78. package/dist/slotui-css/slotui-min-css.css +4574 -4574
  79. package/dist/slotui-css/slotui-sheet.css +294 -294
  80. package/dist/slotui-css/slotui-sheet.min.css +294 -294
  81. package/dist/slotui-css/sorterer.css +10 -10
  82. package/dist/slotui-css/sorterer.min.css +10 -10
  83. package/dist/slotui-css/stepper.css +19 -19
  84. package/dist/slotui-css/stepper.min.css +19 -19
  85. package/dist/slotui-css/stylesheet-container.css +373 -373
  86. package/dist/slotui-css/stylesheet-container.min.css +373 -373
  87. package/dist/slotui-css/stylesheet.css +370 -370
  88. package/dist/slotui-css/stylesheet.min.css +370 -370
  89. package/dist/slotui-css/switch.css +62 -62
  90. package/dist/slotui-css/switch.min.css +62 -62
  91. package/dist/slotui-css/tabs.css +84 -84
  92. package/dist/slotui-css/tabs.min.css +84 -84
  93. package/dist/slotui-css/taskbar.css +24 -24
  94. package/dist/slotui-css/taskbar.min.css +24 -24
  95. package/dist/slotui-css/textfield.css +127 -127
  96. package/dist/slotui-css/textfield.min.css +127 -127
  97. package/dist/slotui-css/title-bar.css +27 -27
  98. package/dist/slotui-css/title-bar.min.css +27 -27
  99. package/dist/slotui-css/toggle-bar.css +40 -40
  100. package/dist/slotui-css/toggle-bar.min.css +40 -40
  101. package/dist/slotui-css/toolbar.css +27 -27
  102. package/dist/slotui-css/toolbar.min.css +27 -27
  103. package/dist/slotui-css/tree.css +49 -49
  104. package/dist/slotui-css/tree.min.css +49 -49
  105. package/dist/slotui-css/window.css +59 -59
  106. package/dist/slotui-css/window.min.css +59 -59
  107. package/package.json +4 -4
@@ -1,374 +1,374 @@
1
- @import "./sheetConfig.css";
2
- :root {
3
- --bkp-xs: var(--breakpoint-xs, 320px);
4
- --bkp-sm: var(--breakpoint-sm, 480px);
5
- --bkp-md: var(--breakpoint-md, 640px);
6
- --bkp-lg: var(--breakpoint-lg, 960px);
7
- --bkp-xl: var(--breakpoint-xl, 1280px);
8
- --bkp-xxl: var(--breakpoint-xxl, 1920px);
9
- --bkp-xxxl: var(--breakpoint-xxxl, 1440px);
10
- }
11
-
12
- @media (min-width: var(--bkp-xs)) {
13
- [hide-more-xs],
14
- [breakpoints*=hide-more-xs],
15
- .hide-more-xs {
16
- content-visibility: hidden;
17
- opacity: 0;
18
- position: absolute;
19
- z-index: -10;
20
- visibility: hidden;
21
- }
22
- }
23
- @media (min-width: var(--bkp-xs)) {
24
- [show-more-xs],
25
- [breakpoints*=show-more-xs],
26
- .show-more-xs {
27
- content-visibility: auto;
28
- opacity: 1;
29
- position: static;
30
- z-index: auto;
31
- visibility: visible;
32
- }
33
- }
34
- @media (max-width: calc(var(--bkp-xs) - 1px)) {
35
- [hide-less-xs],
36
- [breakpoints*=hide-less-xs],
37
- .hide-less-xs {
38
- content-visibility: hidden;
39
- opacity: 0;
40
- position: absolute;
41
- z-index: -10;
42
- visibility: hidden;
43
- }
44
- }
45
- @media (max-width: calc(var(--bkp-xs) - 1px)) {
46
- [show-less-xs],
47
- [breakpoints*=show-less-xs],
48
- .show-less-xs {
49
- content-visibility: auto;
50
- opacity: 1;
51
- position: static;
52
- z-index: auto;
53
- visibility: visible;
54
- }
55
- }
56
- @media (min-width: var(--bkp-sm)) {
57
- [hide-more-sm],
58
- [breakpoints*=hide-more-sm],
59
- .hide-more-sm {
60
- content-visibility: hidden;
61
- opacity: 0;
62
- position: absolute;
63
- z-index: -10;
64
- visibility: hidden;
65
- }
66
- }
67
- @media (min-width: var(--bkp-sm)) {
68
- [show-more-sm],
69
- [breakpoints*=show-more-sm],
70
- .show-more-sm {
71
- content-visibility: auto;
72
- opacity: 1;
73
- position: static;
74
- z-index: auto;
75
- visibility: visible;
76
- }
77
- }
78
- @media (max-width: calc(var(--bkp-sm) - 1px)) {
79
- [hide-less-sm],
80
- [breakpoints*=hide-less-sm],
81
- .hide-less-sm {
82
- content-visibility: hidden;
83
- opacity: 0;
84
- position: absolute;
85
- z-index: -10;
86
- visibility: hidden;
87
- }
88
- }
89
- @media (max-width: calc(var(--bkp-sm) - 1px)) {
90
- [show-less-sm],
91
- [breakpoints*=show-less-sm],
92
- .show-less-sm {
93
- content-visibility: auto;
94
- opacity: 1;
95
- position: static;
96
- z-index: auto;
97
- visibility: visible;
98
- }
99
- }
100
- @media (min-width: var(--bkp-md)) {
101
- [hide-more-md],
102
- [breakpoints*=hide-more-md],
103
- .hide-more-md {
104
- content-visibility: hidden;
105
- opacity: 0;
106
- position: absolute;
107
- z-index: -10;
108
- visibility: hidden;
109
- }
110
- }
111
- @media (min-width: var(--bkp-md)) {
112
- [show-more-md],
113
- [breakpoints*=show-more-md],
114
- .show-more-md {
115
- content-visibility: auto;
116
- opacity: 1;
117
- position: static;
118
- z-index: auto;
119
- visibility: visible;
120
- }
121
- }
122
- @media (max-width: calc(var(--bkp-md) - 1px)) {
123
- [hide-less-md],
124
- [breakpoints*=hide-less-md],
125
- .hide-less-md {
126
- content-visibility: hidden;
127
- opacity: 0;
128
- position: absolute;
129
- z-index: -10;
130
- visibility: hidden;
131
- }
132
- }
133
- @media (max-width: calc(var(--bkp-md) - 1px)) {
134
- [show-less-md],
135
- [breakpoints*=show-less-md],
136
- .show-less-md {
137
- content-visibility: auto;
138
- opacity: 1;
139
- position: static;
140
- z-index: auto;
141
- visibility: visible;
142
- }
143
- }
144
- @media (min-width: var(--bkp-lg)) {
145
- [hide-more-lg],
146
- [breakpoints*=hide-more-lg],
147
- .hide-more-lg {
148
- content-visibility: hidden;
149
- opacity: 0;
150
- position: absolute;
151
- z-index: -10;
152
- visibility: hidden;
153
- }
154
- }
155
- @media (min-width: var(--bkp-lg)) {
156
- [show-more-lg],
157
- [breakpoints*=show-more-lg],
158
- .show-more-lg {
159
- content-visibility: auto;
160
- opacity: 1;
161
- position: static;
162
- z-index: auto;
163
- visibility: visible;
164
- }
165
- }
166
- @media (max-width: calc(var(--bkp-lg) - 1px)) {
167
- [hide-less-lg],
168
- [breakpoints*=hide-less-lg],
169
- .hide-less-lg {
170
- content-visibility: hidden;
171
- opacity: 0;
172
- position: absolute;
173
- z-index: -10;
174
- visibility: hidden;
175
- }
176
- }
177
- @media (max-width: calc(var(--bkp-lg) - 1px)) {
178
- [show-less-lg],
179
- [breakpoints*=show-less-lg],
180
- .show-less-lg {
181
- content-visibility: auto;
182
- opacity: 1;
183
- position: static;
184
- z-index: auto;
185
- visibility: visible;
186
- }
187
- }
188
- @media (min-width: var(--bkp-xl)) {
189
- [hide-more-xl],
190
- [breakpoints*=hide-more-xl],
191
- .hide-more-xl {
192
- content-visibility: hidden;
193
- opacity: 0;
194
- position: absolute;
195
- z-index: -10;
196
- visibility: hidden;
197
- }
198
- }
199
- @media (min-width: var(--bkp-xl)) {
200
- [show-more-xl],
201
- [breakpoints*=show-more-xl],
202
- .show-more-xl {
203
- content-visibility: auto;
204
- opacity: 1;
205
- position: static;
206
- z-index: auto;
207
- visibility: visible;
208
- }
209
- }
210
- @media (max-width: calc(var(--bkp-xl) - 1px)) {
211
- [hide-less-xl],
212
- [breakpoints*=hide-less-xl],
213
- .hide-less-xl {
214
- content-visibility: hidden;
215
- opacity: 0;
216
- position: absolute;
217
- z-index: -10;
218
- visibility: hidden;
219
- }
220
- }
221
- @media (max-width: calc(var(--bkp-xl) - 1px)) {
222
- [show-less-xl],
223
- [breakpoints*=show-less-xl],
224
- .show-less-xl {
225
- content-visibility: auto;
226
- opacity: 1;
227
- position: static;
228
- z-index: auto;
229
- visibility: visible;
230
- }
231
- }
232
- @media (min-width: var(--bkp-xxl)) {
233
- [hide-more-xxl],
234
- [breakpoints*=hide-more-xxl],
235
- .hide-more-xxl {
236
- content-visibility: hidden;
237
- opacity: 0;
238
- position: absolute;
239
- z-index: -10;
240
- visibility: hidden;
241
- }
242
- }
243
- @media (min-width: var(--bkp-xxl)) {
244
- [show-more-xxl],
245
- [breakpoints*=show-more-xxl],
246
- .show-more-xxl {
247
- content-visibility: auto;
248
- opacity: 1;
249
- position: static;
250
- z-index: auto;
251
- visibility: visible;
252
- }
253
- }
254
- @media (max-width: calc(var(--bkp-xxl) - 1px)) {
255
- [hide-less-xxl],
256
- [breakpoints*=hide-less-xxl],
257
- .hide-less-xxl {
258
- content-visibility: hidden;
259
- opacity: 0;
260
- position: absolute;
261
- z-index: -10;
262
- visibility: hidden;
263
- }
264
- }
265
- @media (max-width: calc(var(--bkp-xxl) - 1px)) {
266
- [show-less-xxl],
267
- [breakpoints*=show-less-xxl],
268
- .show-less-xxl {
269
- content-visibility: auto;
270
- opacity: 1;
271
- position: static;
272
- z-index: auto;
273
- visibility: visible;
274
- }
275
- }
276
- @media (min-width: var(--bkp-xxxl)) {
277
- [hide-more-xxxl],
278
- [breakpoints*=hide-more-xxxl],
279
- .hide-more-xxxl {
280
- content-visibility: hidden;
281
- opacity: 0;
282
- position: absolute;
283
- z-index: -10;
284
- visibility: hidden;
285
- }
286
- }
287
- @media (min-width: var(--bkp-xxxl)) {
288
- [show-more-xxxl],
289
- [breakpoints*=show-more-xxxl],
290
- .show-more-xxxl {
291
- content-visibility: auto;
292
- opacity: 1;
293
- position: static;
294
- z-index: auto;
295
- visibility: visible;
296
- }
297
- }
298
- @media (max-width: calc(var(--bkp-xxxl) - 1px)) {
299
- [hide-less-xxxl],
300
- [breakpoints*=hide-less-xxxl],
301
- .hide-less-xxxl {
302
- content-visibility: hidden;
303
- opacity: 0;
304
- position: absolute;
305
- z-index: -10;
306
- visibility: hidden;
307
- }
308
- }
309
- @media (max-width: calc(var(--bkp-xxxl) - 1px)) {
310
- [show-less-xxxl],
311
- [breakpoints*=show-less-xxxl],
312
- .show-less-xxxl {
313
- content-visibility: auto;
314
- opacity: 1;
315
- position: static;
316
- z-index: auto;
317
- visibility: visible;
318
- }
319
- }
320
- :global([container-inline]),
321
- :global([container="inline"]),
322
- :global(.container-inline) {
323
- container-type: inline-size;
324
- }
325
-
326
- :global([container-size]),
327
- :global([container="size"]),
328
- :global(.container-size) {
329
- container-type: size;
330
- }
331
-
332
- :global([container-normal]),
333
- :global([container="normal"]),
334
- :global(.container-normal) {
335
- container-type: normal;
336
- }
337
-
338
- @container (max-width: var(--hide-on-container-width-more-than)) {
339
- :global(.container-item-hide-max-width) {
340
- color: red;
341
- content-visibility: hidden;
342
- opacity: 0;
343
- position: absolute;
344
- z-index: -10;
345
- visibility: hidden;
346
- }
347
- }
348
- @container (max-width: var(--hide-on-container-width-more-than)) {
349
- .container-item-hide-min-width {
350
- content-visibility: hidden;
351
- opacity: 0;
352
- position: absolute;
353
- z-index: -10;
354
- visibility: hidden;
355
- }
356
- }
357
- @container (min-height: var(--hide-on-container-height-less-than)) {
358
- .container-item-hide-max-height {
359
- content-visibility: hidden;
360
- opacity: 0;
361
- position: absolute;
362
- z-index: -10;
363
- visibility: hidden;
364
- }
365
- }
366
- @container (max-width: var(--hide-on-container-height-more-than)) {
367
- .container-item-hide-min-height {
368
- content-visibility: hidden;
369
- opacity: 0;
370
- position: absolute;
371
- z-index: -10;
372
- visibility: hidden;
373
- }
1
+ @import "./sheetConfig.css";
2
+ :root {
3
+ --bkp-xs: var(--breakpoint-xs, 320px);
4
+ --bkp-sm: var(--breakpoint-sm, 480px);
5
+ --bkp-md: var(--breakpoint-md, 640px);
6
+ --bkp-lg: var(--breakpoint-lg, 960px);
7
+ --bkp-xl: var(--breakpoint-xl, 1280px);
8
+ --bkp-xxl: var(--breakpoint-xxl, 1920px);
9
+ --bkp-xxxl: var(--breakpoint-xxxl, 1440px);
10
+ }
11
+
12
+ @media (min-width: var(--bkp-xs)) {
13
+ [hide-more-xs],
14
+ [breakpoints*=hide-more-xs],
15
+ .hide-more-xs {
16
+ content-visibility: hidden;
17
+ opacity: 0;
18
+ position: absolute;
19
+ z-index: -10;
20
+ visibility: hidden;
21
+ }
22
+ }
23
+ @media (min-width: var(--bkp-xs)) {
24
+ [show-more-xs],
25
+ [breakpoints*=show-more-xs],
26
+ .show-more-xs {
27
+ content-visibility: auto;
28
+ opacity: 1;
29
+ position: static;
30
+ z-index: auto;
31
+ visibility: visible;
32
+ }
33
+ }
34
+ @media (max-width: calc(var(--bkp-xs) - 1px)) {
35
+ [hide-less-xs],
36
+ [breakpoints*=hide-less-xs],
37
+ .hide-less-xs {
38
+ content-visibility: hidden;
39
+ opacity: 0;
40
+ position: absolute;
41
+ z-index: -10;
42
+ visibility: hidden;
43
+ }
44
+ }
45
+ @media (max-width: calc(var(--bkp-xs) - 1px)) {
46
+ [show-less-xs],
47
+ [breakpoints*=show-less-xs],
48
+ .show-less-xs {
49
+ content-visibility: auto;
50
+ opacity: 1;
51
+ position: static;
52
+ z-index: auto;
53
+ visibility: visible;
54
+ }
55
+ }
56
+ @media (min-width: var(--bkp-sm)) {
57
+ [hide-more-sm],
58
+ [breakpoints*=hide-more-sm],
59
+ .hide-more-sm {
60
+ content-visibility: hidden;
61
+ opacity: 0;
62
+ position: absolute;
63
+ z-index: -10;
64
+ visibility: hidden;
65
+ }
66
+ }
67
+ @media (min-width: var(--bkp-sm)) {
68
+ [show-more-sm],
69
+ [breakpoints*=show-more-sm],
70
+ .show-more-sm {
71
+ content-visibility: auto;
72
+ opacity: 1;
73
+ position: static;
74
+ z-index: auto;
75
+ visibility: visible;
76
+ }
77
+ }
78
+ @media (max-width: calc(var(--bkp-sm) - 1px)) {
79
+ [hide-less-sm],
80
+ [breakpoints*=hide-less-sm],
81
+ .hide-less-sm {
82
+ content-visibility: hidden;
83
+ opacity: 0;
84
+ position: absolute;
85
+ z-index: -10;
86
+ visibility: hidden;
87
+ }
88
+ }
89
+ @media (max-width: calc(var(--bkp-sm) - 1px)) {
90
+ [show-less-sm],
91
+ [breakpoints*=show-less-sm],
92
+ .show-less-sm {
93
+ content-visibility: auto;
94
+ opacity: 1;
95
+ position: static;
96
+ z-index: auto;
97
+ visibility: visible;
98
+ }
99
+ }
100
+ @media (min-width: var(--bkp-md)) {
101
+ [hide-more-md],
102
+ [breakpoints*=hide-more-md],
103
+ .hide-more-md {
104
+ content-visibility: hidden;
105
+ opacity: 0;
106
+ position: absolute;
107
+ z-index: -10;
108
+ visibility: hidden;
109
+ }
110
+ }
111
+ @media (min-width: var(--bkp-md)) {
112
+ [show-more-md],
113
+ [breakpoints*=show-more-md],
114
+ .show-more-md {
115
+ content-visibility: auto;
116
+ opacity: 1;
117
+ position: static;
118
+ z-index: auto;
119
+ visibility: visible;
120
+ }
121
+ }
122
+ @media (max-width: calc(var(--bkp-md) - 1px)) {
123
+ [hide-less-md],
124
+ [breakpoints*=hide-less-md],
125
+ .hide-less-md {
126
+ content-visibility: hidden;
127
+ opacity: 0;
128
+ position: absolute;
129
+ z-index: -10;
130
+ visibility: hidden;
131
+ }
132
+ }
133
+ @media (max-width: calc(var(--bkp-md) - 1px)) {
134
+ [show-less-md],
135
+ [breakpoints*=show-less-md],
136
+ .show-less-md {
137
+ content-visibility: auto;
138
+ opacity: 1;
139
+ position: static;
140
+ z-index: auto;
141
+ visibility: visible;
142
+ }
143
+ }
144
+ @media (min-width: var(--bkp-lg)) {
145
+ [hide-more-lg],
146
+ [breakpoints*=hide-more-lg],
147
+ .hide-more-lg {
148
+ content-visibility: hidden;
149
+ opacity: 0;
150
+ position: absolute;
151
+ z-index: -10;
152
+ visibility: hidden;
153
+ }
154
+ }
155
+ @media (min-width: var(--bkp-lg)) {
156
+ [show-more-lg],
157
+ [breakpoints*=show-more-lg],
158
+ .show-more-lg {
159
+ content-visibility: auto;
160
+ opacity: 1;
161
+ position: static;
162
+ z-index: auto;
163
+ visibility: visible;
164
+ }
165
+ }
166
+ @media (max-width: calc(var(--bkp-lg) - 1px)) {
167
+ [hide-less-lg],
168
+ [breakpoints*=hide-less-lg],
169
+ .hide-less-lg {
170
+ content-visibility: hidden;
171
+ opacity: 0;
172
+ position: absolute;
173
+ z-index: -10;
174
+ visibility: hidden;
175
+ }
176
+ }
177
+ @media (max-width: calc(var(--bkp-lg) - 1px)) {
178
+ [show-less-lg],
179
+ [breakpoints*=show-less-lg],
180
+ .show-less-lg {
181
+ content-visibility: auto;
182
+ opacity: 1;
183
+ position: static;
184
+ z-index: auto;
185
+ visibility: visible;
186
+ }
187
+ }
188
+ @media (min-width: var(--bkp-xl)) {
189
+ [hide-more-xl],
190
+ [breakpoints*=hide-more-xl],
191
+ .hide-more-xl {
192
+ content-visibility: hidden;
193
+ opacity: 0;
194
+ position: absolute;
195
+ z-index: -10;
196
+ visibility: hidden;
197
+ }
198
+ }
199
+ @media (min-width: var(--bkp-xl)) {
200
+ [show-more-xl],
201
+ [breakpoints*=show-more-xl],
202
+ .show-more-xl {
203
+ content-visibility: auto;
204
+ opacity: 1;
205
+ position: static;
206
+ z-index: auto;
207
+ visibility: visible;
208
+ }
209
+ }
210
+ @media (max-width: calc(var(--bkp-xl) - 1px)) {
211
+ [hide-less-xl],
212
+ [breakpoints*=hide-less-xl],
213
+ .hide-less-xl {
214
+ content-visibility: hidden;
215
+ opacity: 0;
216
+ position: absolute;
217
+ z-index: -10;
218
+ visibility: hidden;
219
+ }
220
+ }
221
+ @media (max-width: calc(var(--bkp-xl) - 1px)) {
222
+ [show-less-xl],
223
+ [breakpoints*=show-less-xl],
224
+ .show-less-xl {
225
+ content-visibility: auto;
226
+ opacity: 1;
227
+ position: static;
228
+ z-index: auto;
229
+ visibility: visible;
230
+ }
231
+ }
232
+ @media (min-width: var(--bkp-xxl)) {
233
+ [hide-more-xxl],
234
+ [breakpoints*=hide-more-xxl],
235
+ .hide-more-xxl {
236
+ content-visibility: hidden;
237
+ opacity: 0;
238
+ position: absolute;
239
+ z-index: -10;
240
+ visibility: hidden;
241
+ }
242
+ }
243
+ @media (min-width: var(--bkp-xxl)) {
244
+ [show-more-xxl],
245
+ [breakpoints*=show-more-xxl],
246
+ .show-more-xxl {
247
+ content-visibility: auto;
248
+ opacity: 1;
249
+ position: static;
250
+ z-index: auto;
251
+ visibility: visible;
252
+ }
253
+ }
254
+ @media (max-width: calc(var(--bkp-xxl) - 1px)) {
255
+ [hide-less-xxl],
256
+ [breakpoints*=hide-less-xxl],
257
+ .hide-less-xxl {
258
+ content-visibility: hidden;
259
+ opacity: 0;
260
+ position: absolute;
261
+ z-index: -10;
262
+ visibility: hidden;
263
+ }
264
+ }
265
+ @media (max-width: calc(var(--bkp-xxl) - 1px)) {
266
+ [show-less-xxl],
267
+ [breakpoints*=show-less-xxl],
268
+ .show-less-xxl {
269
+ content-visibility: auto;
270
+ opacity: 1;
271
+ position: static;
272
+ z-index: auto;
273
+ visibility: visible;
274
+ }
275
+ }
276
+ @media (min-width: var(--bkp-xxxl)) {
277
+ [hide-more-xxxl],
278
+ [breakpoints*=hide-more-xxxl],
279
+ .hide-more-xxxl {
280
+ content-visibility: hidden;
281
+ opacity: 0;
282
+ position: absolute;
283
+ z-index: -10;
284
+ visibility: hidden;
285
+ }
286
+ }
287
+ @media (min-width: var(--bkp-xxxl)) {
288
+ [show-more-xxxl],
289
+ [breakpoints*=show-more-xxxl],
290
+ .show-more-xxxl {
291
+ content-visibility: auto;
292
+ opacity: 1;
293
+ position: static;
294
+ z-index: auto;
295
+ visibility: visible;
296
+ }
297
+ }
298
+ @media (max-width: calc(var(--bkp-xxxl) - 1px)) {
299
+ [hide-less-xxxl],
300
+ [breakpoints*=hide-less-xxxl],
301
+ .hide-less-xxxl {
302
+ content-visibility: hidden;
303
+ opacity: 0;
304
+ position: absolute;
305
+ z-index: -10;
306
+ visibility: hidden;
307
+ }
308
+ }
309
+ @media (max-width: calc(var(--bkp-xxxl) - 1px)) {
310
+ [show-less-xxxl],
311
+ [breakpoints*=show-less-xxxl],
312
+ .show-less-xxxl {
313
+ content-visibility: auto;
314
+ opacity: 1;
315
+ position: static;
316
+ z-index: auto;
317
+ visibility: visible;
318
+ }
319
+ }
320
+ :global([container-inline]),
321
+ :global([container="inline"]),
322
+ :global(.container-inline) {
323
+ container-type: inline-size;
324
+ }
325
+
326
+ :global([container-size]),
327
+ :global([container="size"]),
328
+ :global(.container-size) {
329
+ container-type: size;
330
+ }
331
+
332
+ :global([container-normal]),
333
+ :global([container="normal"]),
334
+ :global(.container-normal) {
335
+ container-type: normal;
336
+ }
337
+
338
+ @container (max-width: var(--hide-on-container-width-more-than)) {
339
+ :global(.container-item-hide-max-width) {
340
+ color: red;
341
+ content-visibility: hidden;
342
+ opacity: 0;
343
+ position: absolute;
344
+ z-index: -10;
345
+ visibility: hidden;
346
+ }
347
+ }
348
+ @container (max-width: var(--hide-on-container-width-more-than)) {
349
+ .container-item-hide-min-width {
350
+ content-visibility: hidden;
351
+ opacity: 0;
352
+ position: absolute;
353
+ z-index: -10;
354
+ visibility: hidden;
355
+ }
356
+ }
357
+ @container (min-height: var(--hide-on-container-height-less-than)) {
358
+ .container-item-hide-max-height {
359
+ content-visibility: hidden;
360
+ opacity: 0;
361
+ position: absolute;
362
+ z-index: -10;
363
+ visibility: hidden;
364
+ }
365
+ }
366
+ @container (max-width: var(--hide-on-container-height-more-than)) {
367
+ .container-item-hide-min-height {
368
+ content-visibility: hidden;
369
+ opacity: 0;
370
+ position: absolute;
371
+ z-index: -10;
372
+ visibility: hidden;
373
+ }
374
374
  }