@elastic/eui 70.2.4 → 70.3.0
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.
- package/dist/eui_theme_dark.css +0 -198
- package/dist/eui_theme_dark.min.css +1 -1
- package/dist/eui_theme_light.css +0 -198
- package/dist/eui_theme_light.min.css +1 -1
- package/es/components/accessibility/skip_link/skip_link.js +6 -5
- package/es/components/badge/beta_badge/beta_badge.js +11 -3
- package/es/components/badge/beta_badge/beta_badge.styles.js +25 -4
- package/es/components/card/card.js +6 -1
- package/es/components/card/card.styles.js +4 -4
- package/es/components/date_picker/super_date_picker/super_date_picker.a11y.js +109 -0
- package/es/components/flyout/flyout.a11y.js +92 -0
- package/es/components/image/image_fullscreen_wrapper.styles.js +3 -11
- package/es/components/modal/confirm_modal.js +11 -0
- package/es/components/modal/modal.a11y.js +70 -0
- package/es/components/modal/modal.js +17 -27
- package/es/components/modal/modal.styles.js +23 -0
- package/es/components/modal/modal_body.js +8 -0
- package/es/components/modal/modal_body.styles.js +16 -0
- package/es/components/modal/modal_footer.js +6 -0
- package/es/components/modal/modal_footer.styles.js +15 -0
- package/es/components/modal/modal_header.js +6 -0
- package/es/components/modal/modal_header.styles.js +14 -0
- package/es/components/modal/modal_header_title.js +3 -1
- package/es/components/page_template/outer/page_outer.js +1 -1
- package/es/components/page_template/page_template.js +28 -6
- package/es/components/popover/popover.a11y.js +83 -0
- package/es/components/search_bar/query/default_syntax.js +2 -1
- package/es/components/tabs/tabs.a11y.js +97 -0
- package/es/components/tree_view/tree_view.a11y.js +74 -0
- package/es/global_styling/utility/animations.js +5 -2
- package/eui.d.ts +58 -7
- package/i18ntokens.json +2 -2
- package/lib/components/accessibility/skip_link/skip_link.js +6 -5
- package/lib/components/badge/beta_badge/beta_badge.js +13 -4
- package/lib/components/badge/beta_badge/beta_badge.styles.js +25 -4
- package/lib/components/card/card.js +6 -1
- package/lib/components/card/card.styles.js +4 -4
- package/lib/components/date_picker/super_date_picker/super_date_picker.a11y.js +111 -0
- package/lib/components/flyout/flyout.a11y.js +94 -0
- package/lib/components/image/image_fullscreen_wrapper.styles.js +9 -10
- package/lib/components/modal/confirm_modal.js +13 -0
- package/lib/components/modal/modal.a11y.js +73 -0
- package/lib/components/modal/modal.js +17 -32
- package/lib/components/modal/modal.styles.js +36 -0
- package/lib/components/modal/modal_body.js +10 -0
- package/lib/components/modal/modal_body.styles.js +27 -0
- package/lib/components/modal/modal_footer.js +8 -0
- package/lib/components/modal/modal_footer.styles.js +26 -0
- package/lib/components/modal/modal_header.js +8 -0
- package/lib/components/modal/modal_header.styles.js +24 -0
- package/lib/components/modal/modal_header_title.js +4 -1
- package/lib/components/page_template/outer/page_outer.js +1 -1
- package/lib/components/page_template/page_template.js +32 -10
- package/lib/components/popover/popover.a11y.js +86 -0
- package/lib/components/search_bar/query/default_syntax.js +2 -1
- package/lib/components/tabs/tabs.a11y.js +98 -0
- package/lib/components/tree_view/tree_view.a11y.js +80 -0
- package/lib/global_styling/utility/animations.js +9 -3
- package/optimize/es/components/accessibility/skip_link/skip_link.js +6 -5
- package/optimize/es/components/badge/beta_badge/beta_badge.js +5 -2
- package/optimize/es/components/badge/beta_badge/beta_badge.styles.js +25 -4
- package/optimize/es/components/card/card.styles.js +4 -4
- package/optimize/es/components/date_picker/super_date_picker/super_date_picker.a11y.js +98 -0
- package/optimize/es/components/flyout/flyout.a11y.js +77 -0
- package/optimize/es/components/image/image_fullscreen_wrapper.styles.js +3 -11
- package/optimize/es/components/modal/confirm_modal.js +6 -0
- package/optimize/es/components/modal/modal.a11y.js +60 -0
- package/optimize/es/components/modal/modal.js +17 -27
- package/optimize/es/components/modal/modal.styles.js +23 -0
- package/optimize/es/components/modal/modal_body.js +8 -0
- package/optimize/es/components/modal/modal_body.styles.js +16 -0
- package/optimize/es/components/modal/modal_footer.js +6 -0
- package/optimize/es/components/modal/modal_footer.styles.js +15 -0
- package/optimize/es/components/modal/modal_header.js +6 -0
- package/optimize/es/components/modal/modal_header.styles.js +14 -0
- package/optimize/es/components/modal/modal_header_title.js +3 -1
- package/optimize/es/components/page_template/page_template.js +5 -3
- package/optimize/es/components/popover/popover.a11y.js +73 -0
- package/optimize/es/components/search_bar/query/default_syntax.js +2 -1
- package/optimize/es/components/tabs/tabs.a11y.js +97 -0
- package/optimize/es/components/tree_view/tree_view.a11y.js +74 -0
- package/optimize/es/global_styling/utility/animations.js +5 -2
- package/optimize/lib/components/accessibility/skip_link/skip_link.js +6 -5
- package/optimize/lib/components/badge/beta_badge/beta_badge.js +7 -3
- package/optimize/lib/components/badge/beta_badge/beta_badge.styles.js +25 -4
- package/optimize/lib/components/card/card.styles.js +4 -4
- package/optimize/lib/components/date_picker/super_date_picker/super_date_picker.a11y.js +111 -0
- package/optimize/lib/components/flyout/flyout.a11y.js +84 -0
- package/optimize/lib/components/image/image_fullscreen_wrapper.styles.js +9 -12
- package/optimize/lib/components/modal/confirm_modal.js +8 -0
- package/optimize/lib/components/modal/modal.a11y.js +73 -0
- package/optimize/lib/components/modal/modal.js +17 -31
- package/optimize/lib/components/modal/modal.styles.js +36 -0
- package/optimize/lib/components/modal/modal_body.js +10 -0
- package/optimize/lib/components/modal/modal_body.styles.js +27 -0
- package/optimize/lib/components/modal/modal_footer.js +8 -0
- package/optimize/lib/components/modal/modal_footer.styles.js +26 -0
- package/optimize/lib/components/modal/modal_header.js +8 -0
- package/optimize/lib/components/modal/modal_header.styles.js +24 -0
- package/optimize/lib/components/modal/modal_header_title.js +4 -1
- package/optimize/lib/components/page_template/page_template.js +5 -3
- package/optimize/lib/components/popover/popover.a11y.js +86 -0
- package/optimize/lib/components/search_bar/query/default_syntax.js +2 -1
- package/optimize/lib/components/tabs/tabs.a11y.js +98 -0
- package/optimize/lib/components/tree_view/tree_view.a11y.js +80 -0
- package/optimize/lib/global_styling/utility/animations.js +9 -3
- package/package.json +5 -4
- package/src/components/index.scss +0 -1
- package/src/themes/amsterdam/overrides/_index.scss +0 -1
- package/test-env/components/accessibility/skip_link/skip_link.js +6 -5
- package/test-env/components/badge/beta_badge/beta_badge.js +13 -4
- package/test-env/components/badge/beta_badge/beta_badge.styles.js +25 -4
- package/test-env/components/card/card.js +6 -1
- package/test-env/components/card/card.styles.js +4 -4
- package/test-env/components/date_picker/super_date_picker/super_date_picker.a11y.js +111 -0
- package/test-env/components/flyout/flyout.a11y.js +84 -0
- package/test-env/components/image/image_fullscreen_wrapper.styles.js +9 -12
- package/test-env/components/modal/confirm_modal.js +13 -0
- package/test-env/components/modal/modal.a11y.js +73 -0
- package/test-env/components/modal/modal.js +17 -31
- package/test-env/components/modal/modal.styles.js +36 -0
- package/test-env/components/modal/modal_body.js +10 -0
- package/test-env/components/modal/modal_body.styles.js +27 -0
- package/test-env/components/modal/modal_footer.js +8 -0
- package/test-env/components/modal/modal_footer.styles.js +26 -0
- package/test-env/components/modal/modal_header.js +8 -0
- package/test-env/components/modal/modal_header.styles.js +24 -0
- package/test-env/components/modal/modal_header_title.js +4 -1
- package/test-env/components/page_template/outer/page_outer.js +1 -1
- package/test-env/components/page_template/page_template.js +32 -10
- package/test-env/components/popover/popover.a11y.js +86 -0
- package/test-env/components/search_bar/query/default_syntax.js +2 -1
- package/test-env/components/tabs/tabs.a11y.js +98 -0
- package/test-env/components/tree_view/tree_view.a11y.js +80 -0
- package/test-env/global_styling/utility/animations.js +9 -3
- package/src/components/modal/_index.scss +0 -1
- package/src/components/modal/_modal.scss +0 -156
- package/src/themes/amsterdam/overrides/_modal.scss +0 -3
package/dist/eui_theme_dark.css
CHANGED
|
@@ -7111,201 +7111,6 @@ SOFTWARE.
|
|
|
7111
7111
|
-webkit-transform: translateY(-1px);
|
|
7112
7112
|
transform: translateY(-1px); }
|
|
7113
7113
|
|
|
7114
|
-
.euiModal {
|
|
7115
|
-
border: 1px solid #343741;
|
|
7116
|
-
box-shadow: 0 2.7px 9px rgba(0, 0, 0, 0.325), 0 9.4px 24px rgba(0, 0, 0, 0.225), 0 21.8px 43px rgba(0, 0, 0, 0.2);
|
|
7117
|
-
display: -webkit-flex;
|
|
7118
|
-
display: flex;
|
|
7119
|
-
-webkit-flex-direction: column;
|
|
7120
|
-
flex-direction: column;
|
|
7121
|
-
max-height: 75vh;
|
|
7122
|
-
position: relative;
|
|
7123
|
-
background-color: #1D1E24;
|
|
7124
|
-
border-radius: 6px;
|
|
7125
|
-
z-index: 8000;
|
|
7126
|
-
min-width: 400px;
|
|
7127
|
-
-webkit-animation: euiModal 350ms cubic-bezier(0.34, 1.61, 0.7, 1);
|
|
7128
|
-
animation: euiModal 350ms cubic-bezier(0.34, 1.61, 0.7, 1);
|
|
7129
|
-
max-width: calc(100vw - 16px); }
|
|
7130
|
-
.euiModal:focus {
|
|
7131
|
-
outline: none; }
|
|
7132
|
-
|
|
7133
|
-
.euiModal--maxWidth-default {
|
|
7134
|
-
max-width: MIN(768px, calc(100vw - 16px)); }
|
|
7135
|
-
|
|
7136
|
-
.euiModal--confirmation {
|
|
7137
|
-
min-width: 400px; }
|
|
7138
|
-
|
|
7139
|
-
.euiModalHeader {
|
|
7140
|
-
display: -webkit-flex;
|
|
7141
|
-
display: flex;
|
|
7142
|
-
-webkit-justify-content: space-between;
|
|
7143
|
-
justify-content: space-between;
|
|
7144
|
-
-webkit-align-items: center;
|
|
7145
|
-
align-items: center;
|
|
7146
|
-
padding: 24px 40px 16px 24px;
|
|
7147
|
-
-webkit-flex-grow: 0;
|
|
7148
|
-
flex-grow: 0;
|
|
7149
|
-
-webkit-flex-shrink: 0;
|
|
7150
|
-
flex-shrink: 0; }
|
|
7151
|
-
|
|
7152
|
-
.euiModalHeader__title {
|
|
7153
|
-
overflow-wrap: break-word !important;
|
|
7154
|
-
word-break: break-word;
|
|
7155
|
-
color: #DFE5EF;
|
|
7156
|
-
font-size: 27px;
|
|
7157
|
-
font-size: 1.92857rem;
|
|
7158
|
-
line-height: 2.28571rem;
|
|
7159
|
-
font-weight: 700; }
|
|
7160
|
-
|
|
7161
|
-
.euiModalBody {
|
|
7162
|
-
-webkit-flex-grow: 1;
|
|
7163
|
-
flex-grow: 1;
|
|
7164
|
-
overflow: hidden;
|
|
7165
|
-
display: -webkit-flex;
|
|
7166
|
-
display: flex;
|
|
7167
|
-
-webkit-flex-direction: column;
|
|
7168
|
-
flex-direction: column; }
|
|
7169
|
-
.euiModalBody .euiModalBody__overflow {
|
|
7170
|
-
scrollbar-color: rgba(152, 162, 179, 0.5) transparent;
|
|
7171
|
-
scrollbar-width: thin;
|
|
7172
|
-
height: 100%;
|
|
7173
|
-
overflow-y: auto;
|
|
7174
|
-
overflow-x: hidden;
|
|
7175
|
-
-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%);
|
|
7176
|
-
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%);
|
|
7177
|
-
padding: 8px 24px; }
|
|
7178
|
-
.euiModalBody .euiModalBody__overflow::-webkit-scrollbar {
|
|
7179
|
-
width: 16px;
|
|
7180
|
-
height: 16px; }
|
|
7181
|
-
.euiModalBody .euiModalBody__overflow::-webkit-scrollbar-thumb {
|
|
7182
|
-
background-color: rgba(152, 162, 179, 0.5);
|
|
7183
|
-
background-clip: content-box;
|
|
7184
|
-
border-radius: 16px;
|
|
7185
|
-
border: 6px solid transparent; }
|
|
7186
|
-
.euiModalBody .euiModalBody__overflow::-webkit-scrollbar-corner, .euiModalBody .euiModalBody__overflow::-webkit-scrollbar-track {
|
|
7187
|
-
background-color: transparent; }
|
|
7188
|
-
.euiModalBody .euiModalBody__overflow:focus {
|
|
7189
|
-
outline: none;
|
|
7190
|
-
/* 1 */ }
|
|
7191
|
-
.euiModalBody .euiModalBody__overflow[tabindex='0']:focus:focus-visible {
|
|
7192
|
-
outline-style: auto;
|
|
7193
|
-
/* 2 */ }
|
|
7194
|
-
|
|
7195
|
-
.euiModalFooter {
|
|
7196
|
-
display: -webkit-flex;
|
|
7197
|
-
display: flex;
|
|
7198
|
-
-webkit-justify-content: flex-end;
|
|
7199
|
-
justify-content: flex-end;
|
|
7200
|
-
padding: 16px 24px 24px;
|
|
7201
|
-
-webkit-flex-grow: 0;
|
|
7202
|
-
flex-grow: 0;
|
|
7203
|
-
-webkit-flex-shrink: 0;
|
|
7204
|
-
flex-shrink: 0; }
|
|
7205
|
-
.euiModalFooter > * + * {
|
|
7206
|
-
margin-left: 16px; }
|
|
7207
|
-
|
|
7208
|
-
.euiModalHeader + .euiModalFooter {
|
|
7209
|
-
padding-top: 8px; }
|
|
7210
|
-
|
|
7211
|
-
.euiModalBody:last-of-type .euiModalBody__overflow {
|
|
7212
|
-
padding-bottom: 24px; }
|
|
7213
|
-
|
|
7214
|
-
.euiModal__closeIcon {
|
|
7215
|
-
background-color: rgba(29, 30, 36, 0.9);
|
|
7216
|
-
position: absolute;
|
|
7217
|
-
right: 4px;
|
|
7218
|
-
top: 4px;
|
|
7219
|
-
z-index: 3; }
|
|
7220
|
-
|
|
7221
|
-
@-webkit-keyframes euiModal {
|
|
7222
|
-
0% {
|
|
7223
|
-
opacity: 0;
|
|
7224
|
-
-webkit-transform: translateY(32px);
|
|
7225
|
-
transform: translateY(32px); }
|
|
7226
|
-
100% {
|
|
7227
|
-
opacity: 1;
|
|
7228
|
-
-webkit-transform: translateY(0);
|
|
7229
|
-
transform: translateY(0); } }
|
|
7230
|
-
|
|
7231
|
-
@keyframes euiModal {
|
|
7232
|
-
0% {
|
|
7233
|
-
opacity: 0;
|
|
7234
|
-
-webkit-transform: translateY(32px);
|
|
7235
|
-
transform: translateY(32px); }
|
|
7236
|
-
100% {
|
|
7237
|
-
opacity: 1;
|
|
7238
|
-
-webkit-transform: translateY(0);
|
|
7239
|
-
transform: translateY(0); } }
|
|
7240
|
-
|
|
7241
|
-
@media only screen and (max-width: 574px) {
|
|
7242
|
-
.euiModal {
|
|
7243
|
-
position: fixed;
|
|
7244
|
-
width: 100vw !important;
|
|
7245
|
-
max-width: none !important;
|
|
7246
|
-
min-width: 0 !important;
|
|
7247
|
-
max-height: 100vh;
|
|
7248
|
-
left: 0;
|
|
7249
|
-
right: 0;
|
|
7250
|
-
bottom: 0;
|
|
7251
|
-
top: 0;
|
|
7252
|
-
border-radius: 0;
|
|
7253
|
-
border: none; }
|
|
7254
|
-
.euiModal.euiModal--confirmation {
|
|
7255
|
-
box-shadow: 0 -2.7px 9px rgba(0, 0, 0, 0.325), 0 -9.4px 24px rgba(0, 0, 0, 0.225), 0 -21.8px 43px rgba(0, 0, 0, 0.2);
|
|
7256
|
-
top: auto; }
|
|
7257
|
-
.euiModalHeader {
|
|
7258
|
-
width: 100%; }
|
|
7259
|
-
.euiModalFooter {
|
|
7260
|
-
width: 100%;
|
|
7261
|
-
background: #25262E;
|
|
7262
|
-
padding: 12px 24px !important;
|
|
7263
|
-
-webkit-justify-content: stretch;
|
|
7264
|
-
justify-content: stretch; }
|
|
7265
|
-
.euiModalFooter > * {
|
|
7266
|
-
-webkit-flex: 1;
|
|
7267
|
-
flex: 1; }
|
|
7268
|
-
.euiModalFooter > * + * {
|
|
7269
|
-
margin-left: 0; }
|
|
7270
|
-
.euiModalBody {
|
|
7271
|
-
width: 100%; }
|
|
7272
|
-
.euiModalBody .euiModalBody__overflow {
|
|
7273
|
-
padding-bottom: 24px; } }
|
|
7274
|
-
|
|
7275
|
-
@media only screen and (min-width: 575px) and (max-width: 767px) {
|
|
7276
|
-
.euiModal {
|
|
7277
|
-
position: fixed;
|
|
7278
|
-
width: 100vw !important;
|
|
7279
|
-
max-width: none !important;
|
|
7280
|
-
min-width: 0 !important;
|
|
7281
|
-
max-height: 100vh;
|
|
7282
|
-
left: 0;
|
|
7283
|
-
right: 0;
|
|
7284
|
-
bottom: 0;
|
|
7285
|
-
top: 0;
|
|
7286
|
-
border-radius: 0;
|
|
7287
|
-
border: none; }
|
|
7288
|
-
.euiModal.euiModal--confirmation {
|
|
7289
|
-
box-shadow: 0 -2.7px 9px rgba(0, 0, 0, 0.325), 0 -9.4px 24px rgba(0, 0, 0, 0.225), 0 -21.8px 43px rgba(0, 0, 0, 0.2);
|
|
7290
|
-
top: auto; }
|
|
7291
|
-
.euiModalHeader {
|
|
7292
|
-
width: 100%; }
|
|
7293
|
-
.euiModalFooter {
|
|
7294
|
-
width: 100%;
|
|
7295
|
-
background: #25262E;
|
|
7296
|
-
padding: 12px 24px !important;
|
|
7297
|
-
-webkit-justify-content: stretch;
|
|
7298
|
-
justify-content: stretch; }
|
|
7299
|
-
.euiModalFooter > * {
|
|
7300
|
-
-webkit-flex: 1;
|
|
7301
|
-
flex: 1; }
|
|
7302
|
-
.euiModalFooter > * + * {
|
|
7303
|
-
margin-left: 0; }
|
|
7304
|
-
.euiModalBody {
|
|
7305
|
-
width: 100%; }
|
|
7306
|
-
.euiModalBody .euiModalBody__overflow {
|
|
7307
|
-
padding-bottom: 24px; } }
|
|
7308
|
-
|
|
7309
7114
|
.euiNotificationEvent {
|
|
7310
7115
|
display: -webkit-flex;
|
|
7311
7116
|
display: flex;
|
|
@@ -9921,9 +9726,6 @@ button.euiSuggestItem {
|
|
|
9921
9726
|
.euiMarkdownEditorFooter {
|
|
9922
9727
|
border-radius: 0 0 6px 6px; }
|
|
9923
9728
|
|
|
9924
|
-
.euiModal {
|
|
9925
|
-
border: none; }
|
|
9926
|
-
|
|
9927
9729
|
.euiRangeTooltip__value {
|
|
9928
9730
|
border-radius: 4px; }
|
|
9929
9731
|
|