@elastic/eui 64.0.0 → 64.0.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 (71) hide show
  1. package/dist/eui_charts_theme.js +330 -330
  2. package/dist/eui_charts_theme.js.map +1 -1
  3. package/dist/eui_theme_dark.css +3 -312
  4. package/dist/eui_theme_dark.min.css +1 -1
  5. package/dist/eui_theme_light.css +3 -312
  6. package/dist/eui_theme_light.min.css +1 -1
  7. package/es/components/basic_table/collapsed_item_actions.js +1 -2
  8. package/es/components/breadcrumbs/breadcrumb.styles.js +2 -2
  9. package/es/components/image/image_button.styles.js +1 -1
  10. package/es/components/link/link.styles.js +6 -5
  11. package/es/components/text/text.styles.js +1 -1
  12. package/es/components/toast/global_toast_list.styles.js +2 -2
  13. package/es/global_styling/functions/logicals.js +16 -2
  14. package/es/global_styling/mixins/_helpers.js +11 -4
  15. package/es/global_styling/mixins/_states.js +3 -4
  16. package/es/global_styling/mixins/_typography.js +3 -1
  17. package/es/global_styling/reset/global_styles.js +1 -1
  18. package/es/global_styling/utility/utility.js +10 -2
  19. package/eui.d.ts +72 -55
  20. package/i18ntokens.json +4 -4
  21. package/lib/components/basic_table/collapsed_item_actions.js +1 -2
  22. package/lib/components/breadcrumbs/breadcrumb.styles.js +2 -2
  23. package/lib/components/image/image_button.styles.js +1 -1
  24. package/lib/components/link/link.styles.js +6 -5
  25. package/lib/components/text/text.styles.js +1 -1
  26. package/lib/components/toast/global_toast_list.styles.js +1 -1
  27. package/lib/global_styling/functions/logicals.js +21 -4
  28. package/lib/global_styling/mixins/_helpers.js +17 -6
  29. package/lib/global_styling/mixins/_states.js +3 -4
  30. package/lib/global_styling/mixins/_typography.js +4 -1
  31. package/lib/global_styling/reset/global_styles.js +1 -1
  32. package/lib/global_styling/utility/utility.js +16 -3
  33. package/optimize/es/components/basic_table/collapsed_item_actions.js +1 -2
  34. package/optimize/es/components/breadcrumbs/breadcrumb.styles.js +2 -2
  35. package/optimize/es/components/image/image_button.styles.js +1 -1
  36. package/optimize/es/components/link/link.styles.js +6 -5
  37. package/optimize/es/components/text/text.styles.js +1 -1
  38. package/optimize/es/components/toast/global_toast_list.styles.js +2 -2
  39. package/optimize/es/global_styling/functions/logicals.js +16 -2
  40. package/optimize/es/global_styling/mixins/_helpers.js +11 -4
  41. package/optimize/es/global_styling/mixins/_states.js +3 -4
  42. package/optimize/es/global_styling/mixins/_typography.js +3 -1
  43. package/optimize/es/global_styling/reset/global_styles.js +1 -1
  44. package/optimize/es/global_styling/utility/utility.js +10 -2
  45. package/optimize/lib/components/basic_table/collapsed_item_actions.js +1 -2
  46. package/optimize/lib/components/breadcrumbs/breadcrumb.styles.js +2 -2
  47. package/optimize/lib/components/image/image_button.styles.js +1 -1
  48. package/optimize/lib/components/link/link.styles.js +6 -5
  49. package/optimize/lib/components/text/text.styles.js +1 -1
  50. package/optimize/lib/components/toast/global_toast_list.styles.js +1 -1
  51. package/optimize/lib/global_styling/functions/logicals.js +21 -4
  52. package/optimize/lib/global_styling/mixins/_helpers.js +17 -6
  53. package/optimize/lib/global_styling/mixins/_states.js +3 -4
  54. package/optimize/lib/global_styling/mixins/_typography.js +4 -1
  55. package/optimize/lib/global_styling/reset/global_styles.js +1 -1
  56. package/optimize/lib/global_styling/utility/utility.js +16 -3
  57. package/package.json +1 -1
  58. package/src/global_styling/mixins/_helpers.scss +9 -0
  59. package/src/global_styling/utility/_utility.scss +0 -127
  60. package/test-env/components/basic_table/collapsed_item_actions.js +1 -2
  61. package/test-env/components/breadcrumbs/breadcrumb.styles.js +2 -2
  62. package/test-env/components/image/image_button.styles.js +1 -1
  63. package/test-env/components/link/link.styles.js +6 -5
  64. package/test-env/components/text/text.styles.js +1 -1
  65. package/test-env/components/toast/global_toast_list.styles.js +1 -1
  66. package/test-env/global_styling/functions/logicals.js +21 -4
  67. package/test-env/global_styling/mixins/_helpers.js +17 -6
  68. package/test-env/global_styling/mixins/_states.js +3 -4
  69. package/test-env/global_styling/mixins/_typography.js +4 -1
  70. package/test-env/global_styling/reset/global_styles.js +1 -1
  71. package/test-env/global_styling/utility/utility.js +16 -3
@@ -51,6 +51,9 @@ SOFTWARE.
51
51
  * Others like Safari, won't show anything at all.
52
52
  * 2. Force the `:focus-visible` when the `tabindex=0` (is tabbable)
53
53
  */
54
+ /**
55
+ * For quickly applying a full-height element whether using flex or not
56
+ */
54
57
  /*
55
58
  * Creates the Amsterdam style of button with a transparent background
56
59
  */
@@ -126,184 +129,6 @@ SOFTWARE.
126
129
  -webkit-transform: translateY(1px);
127
130
  transform: translateY(1px); } }
128
131
 
129
- .eui-alignBaseline {
130
- vertical-align: baseline !important; }
131
-
132
- .eui-alignBottom {
133
- vertical-align: bottom !important; }
134
-
135
- .eui-alignMiddle {
136
- vertical-align: middle !important; }
137
-
138
- .eui-alignTop {
139
- vertical-align: top !important; }
140
-
141
- .eui-displayBlock {
142
- display: block !important; }
143
-
144
- .eui-displayInline {
145
- display: inline !important; }
146
-
147
- .eui-displayInlineBlock {
148
- display: inline-block !important; }
149
-
150
- .eui-fullWidth {
151
- display: block !important;
152
- width: 100% !important; }
153
-
154
- .eui-textCenter {
155
- text-align: center !important; }
156
-
157
- .eui-textLeft {
158
- text-align: left !important; }
159
-
160
- .eui-textRight {
161
- text-align: right !important; }
162
-
163
- .eui-textNoWrap {
164
- white-space: nowrap !important; }
165
-
166
- .eui-textInheritColor {
167
- color: inherit !important; }
168
-
169
- .eui-textBreakWord {
170
- overflow-wrap: break-word !important;
171
- word-wrap: break-word !important;
172
- word-break: break-word; }
173
-
174
- .eui-textBreakAll {
175
- overflow-wrap: break-word !important;
176
- word-break: break-all !important; }
177
-
178
- .eui-textBreakNormal {
179
- overflow-wrap: normal !important;
180
- word-wrap: normal !important;
181
- word-break: normal !important; }
182
-
183
- .eui-textTruncate {
184
- max-width: 100%;
185
- overflow: hidden !important;
186
- text-overflow: ellipsis !important;
187
- white-space: nowrap !important;
188
- word-wrap: normal !important; }
189
-
190
- .eui-textNumber {
191
- font-feature-settings: "calt" 1, "kern" 1, "liga" 1, "tnum" 1; }
192
-
193
- /**
194
- * Responsive
195
- *
196
- * 1. Be sure to hide the element initially
197
- */
198
- [class*='eui-showFor'] {
199
- display: none !important;
200
- /* 1 */ }
201
-
202
- @media only screen and (max-width: 574px) {
203
- .eui-hideFor--xs {
204
- display: none !important; } }
205
-
206
- @media only screen and (max-width: 574px) {
207
- .eui-showFor--xs {
208
- display: inline !important; } }
209
-
210
- @media only screen and (max-width: 574px) {
211
- .eui-showFor--xs--block {
212
- display: block !important; } }
213
-
214
- @media only screen and (max-width: 574px) {
215
- .eui-showFor--xs--inlineBlock {
216
- display: inline-block !important; } }
217
-
218
- @media only screen and (max-width: 574px) {
219
- .eui-showFor--xs--flex {
220
- display: -webkit-flex !important;
221
- display: flex !important; } }
222
-
223
- @media only screen and (min-width: 575px) and (max-width: 767px) {
224
- .eui-hideFor--s {
225
- display: none !important; } }
226
-
227
- @media only screen and (min-width: 575px) and (max-width: 767px) {
228
- .eui-showFor--s {
229
- display: inline !important; } }
230
-
231
- @media only screen and (min-width: 575px) and (max-width: 767px) {
232
- .eui-showFor--s--block {
233
- display: block !important; } }
234
-
235
- @media only screen and (min-width: 575px) and (max-width: 767px) {
236
- .eui-showFor--s--inlineBlock {
237
- display: inline-block !important; } }
238
-
239
- @media only screen and (min-width: 575px) and (max-width: 767px) {
240
- .eui-showFor--s--flex {
241
- display: -webkit-flex !important;
242
- display: flex !important; } }
243
-
244
- @media only screen and (min-width: 768px) and (max-width: 991px) {
245
- .eui-hideFor--m {
246
- display: none !important; } }
247
-
248
- @media only screen and (min-width: 768px) and (max-width: 991px) {
249
- .eui-showFor--m {
250
- display: inline !important; } }
251
-
252
- @media only screen and (min-width: 768px) and (max-width: 991px) {
253
- .eui-showFor--m--block {
254
- display: block !important; } }
255
-
256
- @media only screen and (min-width: 768px) and (max-width: 991px) {
257
- .eui-showFor--m--inlineBlock {
258
- display: inline-block !important; } }
259
-
260
- @media only screen and (min-width: 768px) and (max-width: 991px) {
261
- .eui-showFor--m--flex {
262
- display: -webkit-flex !important;
263
- display: flex !important; } }
264
-
265
- @media only screen and (min-width: 992px) and (max-width: 1199px) {
266
- .eui-hideFor--l {
267
- display: none !important; } }
268
-
269
- @media only screen and (min-width: 992px) and (max-width: 1199px) {
270
- .eui-showFor--l {
271
- display: inline !important; } }
272
-
273
- @media only screen and (min-width: 992px) and (max-width: 1199px) {
274
- .eui-showFor--l--block {
275
- display: block !important; } }
276
-
277
- @media only screen and (min-width: 992px) and (max-width: 1199px) {
278
- .eui-showFor--l--inlineBlock {
279
- display: inline-block !important; } }
280
-
281
- @media only screen and (min-width: 992px) and (max-width: 1199px) {
282
- .eui-showFor--l--flex {
283
- display: -webkit-flex !important;
284
- display: flex !important; } }
285
-
286
- @media only screen and (min-width: 1200px) {
287
- .eui-hideFor--xl {
288
- display: none !important; } }
289
-
290
- @media only screen and (min-width: 1200px) {
291
- .eui-showFor--xl {
292
- display: inline !important; } }
293
-
294
- @media only screen and (min-width: 1200px) {
295
- .eui-showFor--xl--block {
296
- display: block !important; } }
297
-
298
- @media only screen and (min-width: 1200px) {
299
- .eui-showFor--xl--inlineBlock {
300
- display: inline-block !important; } }
301
-
302
- @media only screen and (min-width: 1200px) {
303
- .eui-showFor--xl--flex {
304
- display: -webkit-flex !important;
305
- display: flex !important; } }
306
-
307
132
  /**
308
133
  * IE doesn't properly wrap groups if it is within a flex-item of a flex-group.
309
134
  * Adding the following styles to the flex-item that contains the wrapping group, will fix IE.
@@ -318,140 +143,6 @@ SOFTWARE.
318
143
  -webkit-flex-basis: 0%;
319
144
  flex-basis: 0%; } }
320
145
 
321
- /**
322
- * Scroll bar only
323
- */
324
- .eui-scrollBar {
325
- scrollbar-color: rgba(152, 162, 179, 0.5) transparent;
326
- scrollbar-width: thin; }
327
- .eui-scrollBar::-webkit-scrollbar {
328
- width: 16px;
329
- height: 16px; }
330
- .eui-scrollBar::-webkit-scrollbar-thumb {
331
- background-color: rgba(152, 162, 179, 0.5);
332
- background-clip: content-box;
333
- border-radius: 16px;
334
- border: 6px solid transparent; }
335
- .eui-scrollBar::-webkit-scrollbar-corner, .eui-scrollBar::-webkit-scrollbar-track {
336
- background-color: transparent; }
337
-
338
- /**
339
- * Overflow scrolling
340
- */
341
- .eui-yScroll {
342
- scrollbar-color: rgba(152, 162, 179, 0.5) transparent;
343
- scrollbar-width: thin;
344
- height: 100%;
345
- overflow-y: auto;
346
- overflow-x: hidden; }
347
- .eui-yScroll::-webkit-scrollbar {
348
- width: 16px;
349
- height: 16px; }
350
- .eui-yScroll::-webkit-scrollbar-thumb {
351
- background-color: rgba(152, 162, 179, 0.5);
352
- background-clip: content-box;
353
- border-radius: 16px;
354
- border: 6px solid transparent; }
355
- .eui-yScroll::-webkit-scrollbar-corner, .eui-yScroll::-webkit-scrollbar-track {
356
- background-color: transparent; }
357
- .eui-yScroll:focus {
358
- outline: none;
359
- /* 1 */ }
360
- .eui-yScroll[tabindex='0']:focus:focus-visible {
361
- outline-style: auto;
362
- /* 2 */ }
363
-
364
- .eui-xScroll {
365
- scrollbar-color: rgba(152, 162, 179, 0.5) transparent;
366
- scrollbar-width: thin;
367
- overflow-x: auto; }
368
- .eui-xScroll::-webkit-scrollbar {
369
- width: 16px;
370
- height: 16px; }
371
- .eui-xScroll::-webkit-scrollbar-thumb {
372
- background-color: rgba(152, 162, 179, 0.5);
373
- background-clip: content-box;
374
- border-radius: 16px;
375
- border: 6px solid transparent; }
376
- .eui-xScroll::-webkit-scrollbar-corner, .eui-xScroll::-webkit-scrollbar-track {
377
- background-color: transparent; }
378
- .eui-xScroll:focus {
379
- outline: none;
380
- /* 1 */ }
381
- .eui-xScroll[tabindex='0']:focus:focus-visible {
382
- outline-style: auto;
383
- /* 2 */ }
384
-
385
- /**
386
- * Overflow scrolling with shadows
387
- */
388
- .eui-yScrollWithShadows {
389
- scrollbar-color: rgba(152, 162, 179, 0.5) transparent;
390
- scrollbar-width: thin;
391
- height: 100%;
392
- overflow-y: auto;
393
- overflow-x: hidden;
394
- -webkit-mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
395
- mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%); }
396
- .eui-yScrollWithShadows::-webkit-scrollbar {
397
- width: 16px;
398
- height: 16px; }
399
- .eui-yScrollWithShadows::-webkit-scrollbar-thumb {
400
- background-color: rgba(152, 162, 179, 0.5);
401
- background-clip: content-box;
402
- border-radius: 16px;
403
- border: 6px solid transparent; }
404
- .eui-yScrollWithShadows::-webkit-scrollbar-corner, .eui-yScrollWithShadows::-webkit-scrollbar-track {
405
- background-color: transparent; }
406
- .eui-yScrollWithShadows:focus {
407
- outline: none;
408
- /* 1 */ }
409
- .eui-yScrollWithShadows[tabindex='0']:focus:focus-visible {
410
- outline-style: auto;
411
- /* 2 */ }
412
-
413
- .eui-xScrollWithShadows {
414
- scrollbar-color: rgba(152, 162, 179, 0.5) transparent;
415
- scrollbar-width: thin;
416
- overflow-x: auto;
417
- -webkit-mask-image: linear-gradient(to right, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
418
- mask-image: linear-gradient(to right, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%); }
419
- .eui-xScrollWithShadows::-webkit-scrollbar {
420
- width: 16px;
421
- height: 16px; }
422
- .eui-xScrollWithShadows::-webkit-scrollbar-thumb {
423
- background-color: rgba(152, 162, 179, 0.5);
424
- background-clip: content-box;
425
- border-radius: 16px;
426
- border: 6px solid transparent; }
427
- .eui-xScrollWithShadows::-webkit-scrollbar-corner, .eui-xScrollWithShadows::-webkit-scrollbar-track {
428
- background-color: transparent; }
429
- .eui-xScrollWithShadows:focus {
430
- outline: none;
431
- /* 1 */ }
432
- .eui-xScrollWithShadows[tabindex='0']:focus:focus-visible {
433
- outline-style: auto;
434
- /* 2 */ }
435
-
436
- /**
437
- * Forcing focus ring on non-EUI elements
438
- */
439
- .eui-isFocusable:focus {
440
- outline: 2px solid currentColor; }
441
- .eui-isFocusable:focus:focus-visible {
442
- outline-style: auto; }
443
- .eui-isFocusable:focus:not(:focus-visible) {
444
- outline: none; }
445
-
446
- /**
447
- * For quickly applying a full-height element whether using flex or not
448
- */
449
- .eui-fullHeight {
450
- height: 100%;
451
- -webkit-flex: 1 1 auto;
452
- flex: 1 1 auto;
453
- overflow: hidden; }
454
-
455
146
  /**
456
147
  * LEGEND
457
148
  * __day-name : Week headers like Su, Mo, etc