From dd9e773156c599e681ce42a945b81f391c8d8eb3 Mon Sep 17 00:00:00 2001 From: "dave.snider@gmail.com" Date: Tue, 18 Dec 2018 14:32:08 -0800 Subject: [PATCH] [6.x] EUI 5.8.1 comes with a brand color refresh. Also removes lots of KUI (#27009) (#27429) * EUI 5.8.1 comes with a brand color refresh. Also removes lots of KUI (#27009) EUI 5.7.0 had a color refresh which switched around our palette to better match branding guidelines. Hex colors are still hard coded in large parts of Kibana so most of the changes not in kbn/ui-framework are simple shifts to match that styling. * snapshots --- package.json | 2 +- .../kbn-ui-framework/dist/ui_framework.css | 1968 ++++------------- .../doc_site/src/services/routes/routes.js | 113 - .../accessibility/accessibility_example.js | 96 - .../accessibility/keyboard_accessible.js | 75 - .../src/views/accessibility/screen_reader.js | 42 - .../src/views/action_item/action_item.js | 41 - .../views/action_item/action_item_example.js | 80 - .../views/action_item/action_items_in_menu.js | 81 - .../doc_site/src/views/badge/badge_example.js | 50 - .../src/views/badge/default_badge.html | 9 - .../doc_site/src/views/card/card.js | 54 - .../doc_site/src/views/card/card_example.js | 77 - .../doc_site/src/views/card/card_group.js | 180 -- .../src/views/code_editor/code_editor.js | 51 - .../views/code_editor/code_editor_example.js | 74 - .../src/views/code_editor/read_only.js | 46 - .../src/views/color_picker/color_picker.js | 39 - .../views/color_picker/color_picker_clear.js | 73 - .../color_picker/color_picker_example.js | 88 - .../color_picker_no_color_label.js | 59 - .../src/views/column/column_example.js | 56 - .../doc_site/src/views/column/columns.html | 47 - .../src/views/context_menu/context_menu.js | 174 -- .../context_menu/context_menu_example.js | 88 - .../src/views/context_menu/single_panel.js | 103 - .../doc_site/src/views/event/event.js | 46 - .../doc_site/src/views/event/event_example.js | 79 - .../doc_site/src/views/event/event_menu.js | 88 - .../src/views/event/events_sandbox.js | 52 - .../src/views/event/events_sandbox_content.js | 112 - .../doc_site/src/views/flex/flex_example.js | 263 --- .../doc_site/src/views/flex/flex_grid.js | 41 - .../src/views/flex/flex_grid_columns.js | 39 - .../doc_site/src/views/flex/flex_group.js | 37 - .../src/views/flex/flex_group_wrap.js | 41 - .../src/views/flex/flex_grow_numeric.js | 46 - .../doc_site/src/views/flex/flex_grow_zero.js | 34 - .../doc_site/src/views/flex/flex_gutter.js | 76 - .../doc_site/src/views/flex/flex_items.js | 35 - .../doc_site/src/views/flex/flex_justify.js | 54 - .../doc_site/src/views/flex/flex_nest.js | 44 - .../doc_site/src/views/gallery/gallery.js | 116 - .../src/views/gallery/gallery_example.js | 66 - .../src/views/header_bar/header_bar.js | 37 - .../views/header_bar/header_bar_example.js | 70 - .../views/header_bar/header_bar_sandbox.js | 52 - .../header_bar/header_bar_sandbox_content.js | 260 --- .../header_bar/header_bar_two_sections.js | 46 - .../src/views/info_button/info_button.js | 31 - .../views/info_button/info_button_example.js | 61 - .../src/views/micro_button/micro_button.html | 3 - .../micro_button/micro_button_elements.html | 9 - .../micro_button/micro_button_example.js | 85 - .../micro_button/micro_button_group.html | 13 - .../src/views/notice/notice_sandbox.html | 25 - .../src/views/notice/notice_sandbox.js | 46 - .../doc_site/src/views/table/table.js | 60 - .../keyboard_accessible.test.js.snap | 22 - .../__snapshots__/screen_reader.test.js.snap | 17 - .../src/components/accessibility/_index.scss | 1 - .../accessibility/_screen_reader.scss | 8 - .../src/components/accessibility/index.js | 21 - .../accessibility/keyboard_accessible.js | 120 - .../accessibility/keyboard_accessible.test.js | 217 -- .../components/accessibility/screen_reader.js | 38 - .../accessibility/screen_reader.test.js | 54 - .../__snapshots__/action_item.test.js.snap | 11 - .../components/action_item/_action_item.scss | 5 - .../src/components/action_item/_index.scss | 1 - .../src/components/action_item/action_item.js | 31 - .../action_item/action_item.test.js | 31 - .../src/components/action_item/index.js | 20 - .../src/components/badge/_badge.scss | 14 - .../src/components/badge/_index.scss | 3 - .../card/__snapshots__/card.test.js.snap | 11 - .../card_description.test.js.snap | 11 - .../card_description_text.test.js.snap | 11 - .../card_description_title.test.js.snap | 12 - .../__snapshots__/card_footer.test.js.snap | 11 - .../__snapshots__/card_group.test.js.snap | 23 - .../src/components/card/_card.scss | 37 - .../src/components/card/_card_group.scss | 49 - .../src/components/card/_index.scss | 6 - .../src/components/card/card.js | 31 - .../src/components/card/card.test.js | 31 - .../src/components/card/card_description.js | 31 - .../components/card/card_description.test.js | 31 - .../components/card/card_description_text.js | 31 - .../card/card_description_text.test.js | 31 - .../components/card/card_description_title.js | 31 - .../card/card_description_title.test.js | 31 - .../src/components/card/card_footer.js | 31 - .../src/components/card/card_footer.test.js | 31 - .../src/components/card/card_group.js | 37 - .../src/components/card/card_group.test.js | 36 - .../src/components/card/index.js | 25 - .../__snapshots__/code_editor.test.js.snap | 305 --- .../components/code_editor/_code_editor.scss | 38 - .../src/components/code_editor/_index.scss | 1 - .../src/components/code_editor/code_editor.js | 185 -- .../code_editor/code_editor.test.js | 97 - .../src/components/code_editor/index.js | 20 - .../__snapshots__/color_picker.test.js.snap | 76 - .../color_picker/_color_picker.scss | 43 - .../src/components/color_picker/_index.scss | 3 - .../components/color_picker/color_picker.js | 105 - .../color_picker/color_picker.test.js | 134 -- .../color_picker/color_picker_empty_swatch.js | 29 - .../color_picker/color_picker_swatch.js | 54 - .../src/components/color_picker/index.js | 20 - .../src/components/column/_column.scss | 19 - .../src/components/column/_index.scss | 1 - .../__snapshots__/context_menu.test.js.snap | 185 -- .../context_menu_item.test.js.snap | 68 - .../context_menu_panel.test.js.snap | 94 - .../context_menu/_context_menu.scss | 31 - .../context_menu/_context_menu_item.scss | 66 - .../context_menu/_context_menu_panel.scss | 111 - .../src/components/context_menu/_index.scss | 3 - .../components/context_menu/context_menu.js | 286 --- .../context_menu/context_menu.test.js | 117 - .../context_menu/context_menu_item.js | 84 - .../context_menu/context_menu_item.test.js | 109 - .../context_menu/context_menu_panel.js | 342 --- .../context_menu/context_menu_panel.test.js | 386 ---- .../src/components/context_menu/index.js | 30 - .../event/__snapshots__/event.test.js.snap | 11 - .../__snapshots__/event_body.test.js.snap | 11 - .../event_body_message.test.js.snap | 11 - .../event_body_metadata.test.js.snap | 11 - .../__snapshots__/event_symbol.test.js.snap | 11 - .../src/components/event/_event.scss | 26 - .../src/components/event/_index.scss | 1 - .../src/components/event/event.js | 31 - .../src/components/event/event.test.js | 31 - .../src/components/event/event_body.js | 31 - .../src/components/event/event_body.test.js | 31 - .../components/event/event_body_message.js | 31 - .../event/event_body_message.test.js | 31 - .../components/event/event_body_metadata.js | 31 - .../event/event_body_metadata.test.js | 31 - .../src/components/event/event_symbol.js | 31 - .../src/components/event/event_symbol.test.js | 31 - .../src/components/event/index.js | 24 - .../src/components/expression/_index.scss | 2 +- .../flex/__snapshots__/flex_grid.test.js.snap | 9 - .../__snapshots__/flex_group.test.js.snap | 9 - .../flex/__snapshots__/flex_item.test.js.snap | 9 - .../src/components/flex/_flex_grid.scss | 54 - .../src/components/flex/_flex_group.scss | 72 - .../src/components/flex/_flex_item.scss | 32 - .../src/components/flex/_index.scss | 3 - .../src/components/flex/flex_grid.js | 72 - .../src/components/flex/flex_grid.test.js | 35 - .../src/components/flex/flex_group.js | 98 - .../src/components/flex/flex_group.test.js | 35 - .../src/components/flex/flex_item.js | 69 - .../src/components/flex/flex_item.test.js | 50 - .../src/components/flex/index.js | 30 - .../components/form/check_box/_check_box.scss | 2 +- .../__snapshots__/gallery.test.js.snap | 11 - .../src/components/gallery/_gallery.scss | 4 - .../src/components/gallery/_gallery_item.scss | 50 - .../src/components/gallery/_index.scss | 6 - .../src/components/gallery/gallery.js | 38 - .../src/components/gallery/gallery.test.js | 31 - .../__snapshots__/gallery_item.test.js.snap | 32 - .../gallery_item_icon.test.js.snap | 11 - .../gallery_item_image.test.js.snap | 11 - .../gallery_item_label.test.js.snap | 11 - .../gallery/gallery_item/gallery_item.js | 61 - .../gallery/gallery_item/gallery_item.test.js | 64 - .../gallery/gallery_item/gallery_item_icon.js | 38 - .../gallery_item/gallery_item_icon.test.js | 31 - .../gallery_item/gallery_item_image.js | 38 - .../gallery_item/gallery_item_image.test.js | 31 - .../gallery_item/gallery_item_label.js | 38 - .../gallery_item/gallery_item_label.test.js | 31 - .../src/components/gallery/index.js | 24 - .../__snapshots__/header_bar.test.js.snap | 11 - .../header_bar_section.test.js.snap | 11 - .../components/header_bar/_header_bar.scss | 16 - .../src/components/header_bar/_index.scss | 1 - .../src/components/header_bar/header_bar.js | 38 - .../components/header_bar/header_bar.test.js | 31 - .../header_bar/header_bar_section.js | 38 - .../header_bar/header_bar_section.test.js | 31 - .../src/components/header_bar/index.js | 21 - .../kbn-ui-framework/src/components/index.js | 59 - .../src/components/index.scss | 15 - .../__snapshots__/info_button.test.js.snap | 24 - .../src/components/info_button/_index.scss | 1 - .../components/info_button/_info_button.scss | 14 - .../src/components/info_button/index.js | 20 - .../src/components/info_button/info_button.js | 46 - .../info_button/info_button.test.js | 51 - .../src/components/local_nav/_index.scss | 2 +- .../src/components/micro_button/_index.scss | 2 - .../micro_button/_micro_button.scss | 4 - .../micro_button/_micro_button_group.scss | 7 - .../src/components/notice/_index.scss | 4 - .../src/components/notice/_notice.scss | 6 - .../src/components/panel/_panel.scss | 6 +- .../panel_simple/_panel_simple.scss | 9 +- .../components/vertical_rhythm/_index.scss | 8 +- .../global_styling/mixins/_global_mixins.scss | 2 +- .../global_styling/variables/_animations.scss | 14 +- .../global_styling/variables/_borders.scss | 8 +- .../src/global_styling/variables/_colors.scss | 70 +- .../src/global_styling/variables/_font.scss | 14 +- .../src/global_styling/variables/_form.scss | 8 +- .../src/global_styling/variables/_size.scss | 2 +- packages/kbn-ui-framework/src/index.scss | 9 + .../kibana/public/assets/bg_top_branded.svg | 4 +- .../public/components/markdown_editor.js | 4 +- .../components/panel_config/markdown.js | 4 +- .../data_sets/logs/saved_objects.js | 2 +- src/ui/public/chrome/_variables.scss | 2 +- .../directives/global_nav/_global_nav.scss | 2 +- .../global_nav/app_switcher/app_switcher.html | 1 + .../directives/global_nav/global_nav.html | 1 + .../global_nav_link/_global_nav_link.scss | 19 +- .../global_nav_link/global_nav_link.html | 5 +- .../global_nav_link/global_nav_link.js | 1 + .../global_nav_link/global_nav_link.less | 130 ++ .../partials/paginated_selectable_list.html | 4 +- .../public/partials/saved_object_finder.html | 4 +- src/ui/public/styles/base.less | 5 - .../public/styles/bootstrap/mixins/forms.less | 2 +- src/ui/public/styles/bootstrap/variables.less | 18 +- src/ui/public/styles/sidebar.less | 2 +- .../styles/variables/bootstrap-mods.less | 6 +- src/ui/public/styles/variables/colors.less | 28 +- src/ui/public/styles/variables/for-theme.less | 4 +- src/ui/public/vis/editors/default/agg.html | 2 +- .../vis/vis_types/vislib_vis_legend.html | 2 +- .../components/visualization_chart.tsx | 4 +- src/ui/ui_render/views/ui_app.pug | 6 +- .../screenshots/baseline/area_chart.png | Bin 97059 -> 43415 bytes x-pack/package.json | 2 +- .../__snapshots__/CodePreview.test.js.snap | 18 +- .../NestedKeyValueTable.test.js.snap | 12 +- .../__snapshots__/CustomPlot.test.js.snap | 24 +- .../__snapshots__/Histogram.test.js.snap | 12 +- .../__snapshots__/Timeline.test.js.snap | 124 +- x-pack/plugins/apm/public/style/variables.ts | 12 +- .../public/components/layouts/background.tsx | 2 +- .../index_management/public/styles/table.less | 2 +- .../infra/public/containers/with_options.tsx | 2 +- .../job_select_list/_job_select_list.scss | 2 +- .../__snapshots__/overrides.test.js.snap | 9 + .../logstash/pipeline_listing/index.js | 28 +- .../public/directives/main/index.html | 6 +- .../public/templates/index.html | 2 +- .../security/public/assets/bg_top_branded.svg | 4 +- .../views/management/edit_role/edit_role.less | 2 +- .../public/views/management/roles.html | 2 +- .../public/views/nav_control/nav_control.html | 2 + .../plugins/spaces/assets/bg_top_branded.svg | 4 +- .../public/views/nav_control/_index.scss | 1 - .../expression_popover.html | 2 +- yarn.lock | 14 +- 263 files changed, 856 insertions(+), 11923 deletions(-) delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/accessibility/accessibility_example.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/accessibility/keyboard_accessible.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/accessibility/screen_reader.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/action_item/action_item.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/action_item/action_item_example.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/action_item/action_items_in_menu.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/badge/badge_example.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/badge/default_badge.html delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/card/card.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/card/card_example.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/card/card_group.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/code_editor/code_editor.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/code_editor/code_editor_example.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/code_editor/read_only.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/color_picker/color_picker.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/color_picker/color_picker_clear.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/color_picker/color_picker_example.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/color_picker/color_picker_no_color_label.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/column/column_example.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/column/columns.html delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/context_menu/context_menu.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/context_menu/context_menu_example.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/context_menu/single_panel.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/event/event.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/event/event_example.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/event/event_menu.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/event/events_sandbox.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/event/events_sandbox_content.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/flex/flex_example.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/flex/flex_grid.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/flex/flex_grid_columns.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/flex/flex_group.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/flex/flex_group_wrap.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/flex/flex_grow_numeric.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/flex/flex_grow_zero.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/flex/flex_gutter.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/flex/flex_items.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/flex/flex_justify.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/flex/flex_nest.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/gallery/gallery.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/gallery/gallery_example.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/header_bar/header_bar.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/header_bar/header_bar_example.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/header_bar/header_bar_sandbox.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/header_bar/header_bar_sandbox_content.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/header_bar/header_bar_two_sections.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/info_button/info_button.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/info_button/info_button_example.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/micro_button/micro_button.html delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/micro_button/micro_button_elements.html delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/micro_button/micro_button_example.js delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/micro_button/micro_button_group.html delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/notice/notice_sandbox.html delete mode 100644 packages/kbn-ui-framework/doc_site/src/views/notice/notice_sandbox.js delete mode 100644 packages/kbn-ui-framework/src/components/accessibility/__snapshots__/keyboard_accessible.test.js.snap delete mode 100644 packages/kbn-ui-framework/src/components/accessibility/__snapshots__/screen_reader.test.js.snap delete mode 100644 packages/kbn-ui-framework/src/components/accessibility/_index.scss delete mode 100644 packages/kbn-ui-framework/src/components/accessibility/_screen_reader.scss delete mode 100644 packages/kbn-ui-framework/src/components/accessibility/index.js delete mode 100644 packages/kbn-ui-framework/src/components/accessibility/keyboard_accessible.js delete mode 100644 packages/kbn-ui-framework/src/components/accessibility/keyboard_accessible.test.js delete mode 100644 packages/kbn-ui-framework/src/components/accessibility/screen_reader.js delete mode 100644 packages/kbn-ui-framework/src/components/accessibility/screen_reader.test.js delete mode 100644 packages/kbn-ui-framework/src/components/action_item/__snapshots__/action_item.test.js.snap delete mode 100644 packages/kbn-ui-framework/src/components/action_item/_action_item.scss delete mode 100644 packages/kbn-ui-framework/src/components/action_item/_index.scss delete mode 100644 packages/kbn-ui-framework/src/components/action_item/action_item.js delete mode 100644 packages/kbn-ui-framework/src/components/action_item/action_item.test.js delete mode 100644 packages/kbn-ui-framework/src/components/action_item/index.js delete mode 100644 packages/kbn-ui-framework/src/components/badge/_badge.scss delete mode 100644 packages/kbn-ui-framework/src/components/badge/_index.scss delete mode 100644 packages/kbn-ui-framework/src/components/card/__snapshots__/card.test.js.snap delete mode 100644 packages/kbn-ui-framework/src/components/card/__snapshots__/card_description.test.js.snap delete mode 100644 packages/kbn-ui-framework/src/components/card/__snapshots__/card_description_text.test.js.snap delete mode 100644 packages/kbn-ui-framework/src/components/card/__snapshots__/card_description_title.test.js.snap delete mode 100644 packages/kbn-ui-framework/src/components/card/__snapshots__/card_footer.test.js.snap delete mode 100644 packages/kbn-ui-framework/src/components/card/__snapshots__/card_group.test.js.snap delete mode 100644 packages/kbn-ui-framework/src/components/card/_card.scss delete mode 100644 packages/kbn-ui-framework/src/components/card/_card_group.scss delete mode 100644 packages/kbn-ui-framework/src/components/card/_index.scss delete mode 100644 packages/kbn-ui-framework/src/components/card/card.js delete mode 100644 packages/kbn-ui-framework/src/components/card/card.test.js delete mode 100644 packages/kbn-ui-framework/src/components/card/card_description.js delete mode 100644 packages/kbn-ui-framework/src/components/card/card_description.test.js delete mode 100644 packages/kbn-ui-framework/src/components/card/card_description_text.js delete mode 100644 packages/kbn-ui-framework/src/components/card/card_description_text.test.js delete mode 100644 packages/kbn-ui-framework/src/components/card/card_description_title.js delete mode 100644 packages/kbn-ui-framework/src/components/card/card_description_title.test.js delete mode 100644 packages/kbn-ui-framework/src/components/card/card_footer.js delete mode 100644 packages/kbn-ui-framework/src/components/card/card_footer.test.js delete mode 100644 packages/kbn-ui-framework/src/components/card/card_group.js delete mode 100644 packages/kbn-ui-framework/src/components/card/card_group.test.js delete mode 100644 packages/kbn-ui-framework/src/components/card/index.js delete mode 100644 packages/kbn-ui-framework/src/components/code_editor/__snapshots__/code_editor.test.js.snap delete mode 100644 packages/kbn-ui-framework/src/components/code_editor/_code_editor.scss delete mode 100644 packages/kbn-ui-framework/src/components/code_editor/_index.scss delete mode 100644 packages/kbn-ui-framework/src/components/code_editor/code_editor.js delete mode 100644 packages/kbn-ui-framework/src/components/code_editor/code_editor.test.js delete mode 100644 packages/kbn-ui-framework/src/components/code_editor/index.js delete mode 100644 packages/kbn-ui-framework/src/components/color_picker/__snapshots__/color_picker.test.js.snap delete mode 100644 packages/kbn-ui-framework/src/components/color_picker/_color_picker.scss delete mode 100644 packages/kbn-ui-framework/src/components/color_picker/_index.scss delete mode 100644 packages/kbn-ui-framework/src/components/color_picker/color_picker.js delete mode 100644 packages/kbn-ui-framework/src/components/color_picker/color_picker.test.js delete mode 100644 packages/kbn-ui-framework/src/components/color_picker/color_picker_empty_swatch.js delete mode 100644 packages/kbn-ui-framework/src/components/color_picker/color_picker_swatch.js delete mode 100644 packages/kbn-ui-framework/src/components/color_picker/index.js delete mode 100644 packages/kbn-ui-framework/src/components/column/_column.scss delete mode 100644 packages/kbn-ui-framework/src/components/column/_index.scss delete mode 100644 packages/kbn-ui-framework/src/components/context_menu/__snapshots__/context_menu.test.js.snap delete mode 100644 packages/kbn-ui-framework/src/components/context_menu/__snapshots__/context_menu_item.test.js.snap delete mode 100644 packages/kbn-ui-framework/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap delete mode 100644 packages/kbn-ui-framework/src/components/context_menu/_context_menu.scss delete mode 100644 packages/kbn-ui-framework/src/components/context_menu/_context_menu_item.scss delete mode 100644 packages/kbn-ui-framework/src/components/context_menu/_context_menu_panel.scss delete mode 100644 packages/kbn-ui-framework/src/components/context_menu/_index.scss delete mode 100644 packages/kbn-ui-framework/src/components/context_menu/context_menu.js delete mode 100644 packages/kbn-ui-framework/src/components/context_menu/context_menu.test.js delete mode 100644 packages/kbn-ui-framework/src/components/context_menu/context_menu_item.js delete mode 100644 packages/kbn-ui-framework/src/components/context_menu/context_menu_item.test.js delete mode 100644 packages/kbn-ui-framework/src/components/context_menu/context_menu_panel.js delete mode 100644 packages/kbn-ui-framework/src/components/context_menu/context_menu_panel.test.js delete mode 100644 packages/kbn-ui-framework/src/components/context_menu/index.js delete mode 100644 packages/kbn-ui-framework/src/components/event/__snapshots__/event.test.js.snap delete mode 100644 packages/kbn-ui-framework/src/components/event/__snapshots__/event_body.test.js.snap delete mode 100644 packages/kbn-ui-framework/src/components/event/__snapshots__/event_body_message.test.js.snap delete mode 100644 packages/kbn-ui-framework/src/components/event/__snapshots__/event_body_metadata.test.js.snap delete mode 100644 packages/kbn-ui-framework/src/components/event/__snapshots__/event_symbol.test.js.snap delete mode 100644 packages/kbn-ui-framework/src/components/event/_event.scss delete mode 100644 packages/kbn-ui-framework/src/components/event/_index.scss delete mode 100644 packages/kbn-ui-framework/src/components/event/event.js delete mode 100644 packages/kbn-ui-framework/src/components/event/event.test.js delete mode 100644 packages/kbn-ui-framework/src/components/event/event_body.js delete mode 100644 packages/kbn-ui-framework/src/components/event/event_body.test.js delete mode 100644 packages/kbn-ui-framework/src/components/event/event_body_message.js delete mode 100644 packages/kbn-ui-framework/src/components/event/event_body_message.test.js delete mode 100644 packages/kbn-ui-framework/src/components/event/event_body_metadata.js delete mode 100644 packages/kbn-ui-framework/src/components/event/event_body_metadata.test.js delete mode 100644 packages/kbn-ui-framework/src/components/event/event_symbol.js delete mode 100644 packages/kbn-ui-framework/src/components/event/event_symbol.test.js delete mode 100644 packages/kbn-ui-framework/src/components/event/index.js delete mode 100644 packages/kbn-ui-framework/src/components/flex/__snapshots__/flex_grid.test.js.snap delete mode 100644 packages/kbn-ui-framework/src/components/flex/__snapshots__/flex_group.test.js.snap delete mode 100644 packages/kbn-ui-framework/src/components/flex/__snapshots__/flex_item.test.js.snap delete mode 100644 packages/kbn-ui-framework/src/components/flex/_flex_grid.scss delete mode 100644 packages/kbn-ui-framework/src/components/flex/_flex_group.scss delete mode 100644 packages/kbn-ui-framework/src/components/flex/_flex_item.scss delete mode 100644 packages/kbn-ui-framework/src/components/flex/_index.scss delete mode 100644 packages/kbn-ui-framework/src/components/flex/flex_grid.js delete mode 100644 packages/kbn-ui-framework/src/components/flex/flex_grid.test.js delete mode 100644 packages/kbn-ui-framework/src/components/flex/flex_group.js delete mode 100644 packages/kbn-ui-framework/src/components/flex/flex_group.test.js delete mode 100644 packages/kbn-ui-framework/src/components/flex/flex_item.js delete mode 100644 packages/kbn-ui-framework/src/components/flex/flex_item.test.js delete mode 100644 packages/kbn-ui-framework/src/components/flex/index.js delete mode 100644 packages/kbn-ui-framework/src/components/gallery/__snapshots__/gallery.test.js.snap delete mode 100644 packages/kbn-ui-framework/src/components/gallery/_gallery.scss delete mode 100644 packages/kbn-ui-framework/src/components/gallery/_gallery_item.scss delete mode 100644 packages/kbn-ui-framework/src/components/gallery/_index.scss delete mode 100644 packages/kbn-ui-framework/src/components/gallery/gallery.js delete mode 100644 packages/kbn-ui-framework/src/components/gallery/gallery.test.js delete mode 100644 packages/kbn-ui-framework/src/components/gallery/gallery_item/__snapshots__/gallery_item.test.js.snap delete mode 100644 packages/kbn-ui-framework/src/components/gallery/gallery_item/__snapshots__/gallery_item_icon.test.js.snap delete mode 100644 packages/kbn-ui-framework/src/components/gallery/gallery_item/__snapshots__/gallery_item_image.test.js.snap delete mode 100644 packages/kbn-ui-framework/src/components/gallery/gallery_item/__snapshots__/gallery_item_label.test.js.snap delete mode 100644 packages/kbn-ui-framework/src/components/gallery/gallery_item/gallery_item.js delete mode 100644 packages/kbn-ui-framework/src/components/gallery/gallery_item/gallery_item.test.js delete mode 100644 packages/kbn-ui-framework/src/components/gallery/gallery_item/gallery_item_icon.js delete mode 100644 packages/kbn-ui-framework/src/components/gallery/gallery_item/gallery_item_icon.test.js delete mode 100644 packages/kbn-ui-framework/src/components/gallery/gallery_item/gallery_item_image.js delete mode 100644 packages/kbn-ui-framework/src/components/gallery/gallery_item/gallery_item_image.test.js delete mode 100644 packages/kbn-ui-framework/src/components/gallery/gallery_item/gallery_item_label.js delete mode 100644 packages/kbn-ui-framework/src/components/gallery/gallery_item/gallery_item_label.test.js delete mode 100644 packages/kbn-ui-framework/src/components/gallery/index.js delete mode 100644 packages/kbn-ui-framework/src/components/header_bar/__snapshots__/header_bar.test.js.snap delete mode 100644 packages/kbn-ui-framework/src/components/header_bar/__snapshots__/header_bar_section.test.js.snap delete mode 100644 packages/kbn-ui-framework/src/components/header_bar/_header_bar.scss delete mode 100644 packages/kbn-ui-framework/src/components/header_bar/_index.scss delete mode 100644 packages/kbn-ui-framework/src/components/header_bar/header_bar.js delete mode 100644 packages/kbn-ui-framework/src/components/header_bar/header_bar.test.js delete mode 100644 packages/kbn-ui-framework/src/components/header_bar/header_bar_section.js delete mode 100644 packages/kbn-ui-framework/src/components/header_bar/header_bar_section.test.js delete mode 100644 packages/kbn-ui-framework/src/components/header_bar/index.js delete mode 100644 packages/kbn-ui-framework/src/components/info_button/__snapshots__/info_button.test.js.snap delete mode 100644 packages/kbn-ui-framework/src/components/info_button/_index.scss delete mode 100644 packages/kbn-ui-framework/src/components/info_button/_info_button.scss delete mode 100644 packages/kbn-ui-framework/src/components/info_button/index.js delete mode 100644 packages/kbn-ui-framework/src/components/info_button/info_button.js delete mode 100644 packages/kbn-ui-framework/src/components/info_button/info_button.test.js delete mode 100644 packages/kbn-ui-framework/src/components/micro_button/_index.scss delete mode 100644 packages/kbn-ui-framework/src/components/micro_button/_micro_button.scss delete mode 100644 packages/kbn-ui-framework/src/components/micro_button/_micro_button_group.scss delete mode 100644 packages/kbn-ui-framework/src/components/notice/_index.scss delete mode 100644 packages/kbn-ui-framework/src/components/notice/_notice.scss create mode 100644 src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.less diff --git a/package.json b/package.json index 1f5690b3298e7..4f1b1022effa8 100644 --- a/package.json +++ b/package.json @@ -109,7 +109,7 @@ }, "dependencies": { "@elastic/datemath": "5.0.2", - "@elastic/eui": "5.6.2", + "@elastic/eui": "5.8.1", "@elastic/filesaver": "1.1.2", "@elastic/good": "8.1.1-kibana2", "@elastic/numeral": "2.3.2", diff --git a/packages/kbn-ui-framework/dist/ui_framework.css b/packages/kbn-ui-framework/dist/ui_framework.css index a05df90d8f947..791cc6d8e5823 100644 --- a/packages/kbn-ui-framework/dist/ui_framework.css +++ b/packages/kbn-ui-framework/dist/ui_framework.css @@ -1,3 +1,10 @@ +/** + * 2. Account for inner box-shadow style border when in group + * 3. Must supply both values to background-size or some browsers apply the single value to both directions + */ +/** + * 4. Override invalid state with focus state. + */ /** * 1. Enforce pointer when there's no href. * 2. Allow these styles to be applied to a button element. @@ -59,8 +66,8 @@ /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #0079a5; - box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #0079a5; + -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px #006BB4; + box-shadow: 0 0 0 1px #fff, 0 0 0 2px #006BB4; /* 3 */ } /** @@ -70,41 +77,6 @@ main { display: block; /* 1 */ } -.kuiScreenReaderOnly { - position: absolute; - left: -10000px; - top: auto; - width: 1px; - height: 1px; - overflow: hidden; } - -.kuiActionItem { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; } - -.kuiBadge { - display: inline-block; - margin-left: 0.5em; - padding: 0.1em 0.7em; - vertical-align: middle; - font-size: 11px; - line-height: 1.5; - letter-spacing: 0.1em; - text-transform: uppercase; } - -.kuiBadge--default { - background-color: rgba(0, 0, 0, 0.1); } - .kuiBar { display: -webkit-box; display: -webkit-flex; @@ -238,26 +210,26 @@ main { * 1. Override Bootstrap. */ .kuiButton--basic { - color: #2d2d2d; - background-color: #F5F5F5; } + color: #2D2D2D; + background-color: #F5F7FA; } .kuiButton--basic:not(a):enabled:focus { - color: #2d2d2d; } + color: #2D2D2D; } a.kuiButton--basic:not(.kuiButton-isDisabled):focus { /* 1 */ - color: #2d2d2d; } + color: #2D2D2D; } .kuiButton--basic:enabled:hover { - background-color: gainsboro !important; + background-color: #d3dce9 !important; /* 1 */ } a.kuiButton--basic:not(.kuiButton-isDisabled):hover { /* 1 */ - background-color: gainsboro !important; + background-color: #d3dce9 !important; /* 1 */ } .kuiButton--basic:enabled:active { - background-color: gainsboro !important; + background-color: #d3dce9 !important; /* 1 */ } a.kuiButton--basic:not(.kuiButton-isDisabled):active { /* 1 */ - background-color: gainsboro !important; + background-color: #d3dce9 !important; /* 1 */ } .theme-dark .kuiButton--basic { color: #FFF; @@ -267,8 +239,8 @@ main { /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #777777, 0 0 0 2px #0079a5; - box-shadow: 0 0 0 1px #777777, 0 0 0 2px #0079a5; + -webkit-box-shadow: 0 0 0 1px #222, 0 0 0 2px #006BB4; + box-shadow: 0 0 0 1px #222, 0 0 0 2px #006BB4; /* 3 */ color: #FFF; } a.theme-dark .kuiButton--basic:not(.kuiButton-isDisabled):focus { @@ -277,8 +249,8 @@ main { /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #777777, 0 0 0 2px #0079a5; - box-shadow: 0 0 0 1px #777777, 0 0 0 2px #0079a5; + -webkit-box-shadow: 0 0 0 1px #222, 0 0 0 2px #006BB4; + box-shadow: 0 0 0 1px #222, 0 0 0 2px #006BB4; /* 3 */ color: #FFF; } .theme-dark .kuiButton--basic:enabled:hover { @@ -301,7 +273,7 @@ main { */ .kuiButton--primary { color: #FFF; - background-color: #0079a5; } + background-color: #006BB4; } .kuiButton--primary:not(a):enabled:focus { color: #FFF; } a.kuiButton--primary:not(.kuiButton-isDisabled):focus { @@ -310,28 +282,28 @@ main { .kuiButton--primary:enabled:hover { color: #FFF !important; /* 1 */ - background-color: #005472; } + background-color: #004d81; } a.kuiButton--primary:not(.kuiButton-isDisabled):hover { /* 1 */ color: #FFF !important; /* 1 */ - background-color: #005472; } + background-color: #004d81; } .kuiButton--primary:enabled:active { color: #FFF !important; /* 1 */ - background-color: #005472; } + background-color: #004d81; } a.kuiButton--primary:not(.kuiButton-isDisabled):active { /* 1 */ color: #FFF !important; /* 1 */ - background-color: #005472; } + background-color: #004d81; } /** * 1. Override Bootstrap. */ .kuiButton--success { color: #FFF; - background-color: #00A69B; } + background-color: #017D73; } .kuiButton--success:not(a):enabled:focus { color: #FFF; } a.kuiButton--success:not(.kuiButton-isDisabled):focus { @@ -340,66 +312,66 @@ main { .kuiButton--success:enabled:hover { color: #FFF !important; /* 1 */ - background-color: #00736b; } + background-color: #014a44; } a.kuiButton--success:not(.kuiButton-isDisabled):hover { /* 1 */ color: #FFF !important; /* 1 */ - background-color: #00736b; } + background-color: #014a44; } .kuiButton--success:enabled:active { color: #FFF !important; /* 1 */ - background-color: #00736b; } + background-color: #014a44; } a.kuiButton--success:not(.kuiButton-isDisabled):active { /* 1 */ color: #FFF !important; /* 1 */ - background-color: #00736b; } + background-color: #014a44; } /** * 1. Override Bootstrap. */ .kuiButton--danger { - color: #A30000; + color: #BD271E; background-color: rgba(255, 255, 255, 0.5); - border: solid 1px #A30000; } + border: solid 1px #BD271E; } .kuiButton--danger:not(a):enabled:focus { z-index: 1; /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ff523c; - box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ff523c; + -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px #BD271E; + box-shadow: 0 0 0 1px #fff, 0 0 0 2px #BD271E; /* 3 */ - color: #A30000; } + color: #BD271E; } a.kuiButton--danger:not(.kuiButton-isDisabled):focus { /* 1 */ z-index: 1; /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ff523c; - box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ff523c; + -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px #BD271E; + box-shadow: 0 0 0 1px #fff, 0 0 0 2px #BD271E; /* 3 */ - color: #A30000; } + color: #BD271E; } .kuiButton--danger:enabled:hover { - color: #700000 !important; - background-color: rgba(255, 163, 163, 0.5); - border: solid 1px #700000; } + color: #911e17 !important; + background-color: rgba(250, 225, 224, 0.5); + border: solid 1px #911e17; } a.kuiButton--danger:not(.kuiButton-isDisabled):hover { /* 1 */ - color: #700000 !important; - background-color: rgba(255, 163, 163, 0.5); - border: solid 1px #700000; } + color: #911e17 !important; + background-color: rgba(250, 225, 224, 0.5); + border: solid 1px #911e17; } .kuiButton--danger:enabled:active { - color: #700000 !important; - background-color: rgba(255, 163, 163, 0.5); - border: solid 1px #700000; } + color: #911e17 !important; + background-color: rgba(250, 225, 224, 0.5); + border: solid 1px #911e17; } a.kuiButton--danger:not(.kuiButton-isDisabled):active { /* 1 */ - color: #700000 !important; - background-color: rgba(255, 163, 163, 0.5); - border: solid 1px #700000; } + color: #911e17 !important; + background-color: rgba(250, 225, 224, 0.5); + border: solid 1px #911e17; } /** * 1. Override Bootstrap. @@ -412,8 +384,8 @@ main { /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ffa500; - box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ffa500; + -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px #F5A700; + box-shadow: 0 0 0 1px #fff, 0 0 0 2px #F5A700; /* 3 */ color: #FFF; } a.kuiButton--warning:not(.kuiButton-isDisabled):focus { @@ -422,8 +394,8 @@ main { /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ffa500; - box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ffa500; + -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px #F5A700; + box-shadow: 0 0 0 1px #fff, 0 0 0 2px #F5A700; /* 3 */ color: #FFF; } .kuiButton--warning:enabled:hover { @@ -454,14 +426,14 @@ main { * 2. Override either Bootstrap or Timelion styles. */ .kuiButton--hollow { - color: #0079a5 !important; + color: #006BB4 !important; /* 2 */ background-color: transparent; } .theme-dark .kuiButton--hollow { - color: #b7e2ea !important; + color: #4DA1C0 !important; /* 2 */ } .kuiButton--hollow:enabled:hover { - color: #006E8A !important; + color: #004d81 !important; /* 1 */ text-decoration: underline; } .theme-dark .kuiButton--hollow:enabled:hover { @@ -469,14 +441,14 @@ main { /* 2 */ } a.kuiButton--hollow:not(.kuiButton-isDisabled):hover { /* 1 */ - color: #006E8A !important; + color: #004d81 !important; /* 1 */ text-decoration: underline; } .theme-dark a.kuiButton--hollow:not(.kuiButton-isDisabled):hover { color: #def2f6 !important; /* 2 */ } .kuiButton--hollow:enabled:active { - color: #006E8A !important; + color: #004d81 !important; /* 1 */ text-decoration: underline; } .theme-dark .kuiButton--hollow:enabled:active { @@ -484,7 +456,7 @@ main { /* 2 */ } a.kuiButton--hollow:not(.kuiButton-isDisabled):active { /* 1 */ - color: #006E8A !important; + color: #004d81 !important; /* 1 */ text-decoration: underline; } .theme-dark a.kuiButton--hollow:not(.kuiButton-isDisabled):active { @@ -492,32 +464,32 @@ main { /* 2 */ } .kuiButton--secondary { - color: #0079a5 !important; + color: #006BB4 !important; /* 2 */ - border: solid 1px #0079a5; + border: solid 1px #006BB4; background-color: rgba(255, 255, 255, 0.5); } .kuiButton--secondary:enabled:hover { - color: #005472 !important; + color: #004d81 !important; /* 1 */ - border: solid 1px #005472; - background-color: rgba(165, 231, 255, 0.5); } + border: solid 1px #004d81; + background-color: rgba(180, 225, 255, 0.5); } a.kuiButton--secondary:not(.kuiButton-isDisabled):hover { /* 1 */ - color: #005472 !important; + color: #004d81 !important; /* 1 */ - border: solid 1px #005472; - background-color: rgba(165, 231, 255, 0.5); } + border: solid 1px #004d81; + background-color: rgba(180, 225, 255, 0.5); } .kuiButton--secondary:enabled:active { - color: #005472 !important; + color: #004d81 !important; /* 1 */ - border: solid 1px #005472; - background-color: rgba(165, 231, 255, 0.5); } + border: solid 1px #004d81; + background-color: rgba(180, 225, 255, 0.5); } a.kuiButton--secondary:not(.kuiButton-isDisabled):active { /* 1 */ - color: #005472 !important; + color: #004d81 !important; /* 1 */ - border: solid 1px #005472; - background-color: rgba(165, 231, 255, 0.5); } + border: solid 1px #004d81; + background-color: rgba(180, 225, 255, 0.5); } .kuiButtonGroup { display: -webkit-box; @@ -539,997 +511,75 @@ main { border-bottom-right-radius: 0; } .kuiButtonGroup--united > .kuiButton:last-child { - border-top-left-radius: 0; - border-bottom-left-radius: 0; } - -.kuiButtonGroup--united > .kuiButton:only-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; } - -.kuiButtonGroup--united .kuiButton + .kuiButton { - margin-left: 2px; } - -.kuiButtonGroup--fullWidth { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; } - .kuiButtonGroup--fullWidth > .kuiButton { - -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - text-align: center; } - -.eui-textCenter > .kuiButtonGroup, -.text-center > .kuiButtonGroup { - display: inline-block; } - -.kuiCard { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - border: 1px solid #E0E0E0; - border-radius: 4px; - overflow: hidden; - line-height: 1.5; } - -.kuiCard__description { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - padding: 18px 0; - text-align: center; } - -.kuiCard__descriptionTitle { - font-size: 14px; - font-weight: bold; - margin-bottom: 10px; - text-align: center; - max-width: calc(100% - 48px); } - -.kuiCard__descriptionText { - font-size: 14px; - max-width: calc(100% - 48px); } - -.kuiCard__footer { - text-align: center; - font-size: 14px; - padding: 0 15px 20px; } - -/** - * 1. Wrap cards when necessary. - * 2. Offset the spacing between wrapped cards. - */ -.kuiCardGroup { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - /* 1 */ - margin: -15px; - /* 2 */ - /** - * 1. Use the defined width of the card to determine when to wrap. - * 2. Use an even margin all around the card so that the spacing is still even when wrapped. - */ } - .kuiCardGroup .kuiCard { - -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - /* 1 */ - margin: 15px; - /* 2 */ } - .kuiCardGroup .kuiCard .kuiCard__description { - -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; - -ms-flex: 1 1 auto; - flex: 1 1 auto; } - -/** - * 1. There's no way to make this look good when wrapped. - * 2. Undo the default styles. - */ -.kuiCardGroup--united { - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - /* 1 */ - border: 1px solid #E0E0E0; - border-radius: 4px; - overflow: hidden; - margin: 0; - /* 2 */ - /** - * 1. Force all cards to be the same size. - * 2. Undo the default styles. - */ } - .kuiCardGroup--united .kuiCard { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - /* 1 */ - border: none; - /* 2 */ - border-radius: 0; - /* 2 */ - margin: 0; - /* 2 */ } - .kuiCardGroup--united .kuiCard + .kuiCard { - border-left: 1px solid #E0E0E0; } - -.kuiCodeEditorWrapper { - position: relative; } - .kuiCodeEditorWrapper .ace_hidden-cursors { - opacity: 0; } - .kuiCodeEditorWrapper.kuiCodeEditorWrapper-isEditing .ace_hidden-cursors { - opacity: 1; } - -.kuiCodeEditorKeyboardHint { - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - background: rgba(255, 255, 255, 0.7); - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - text-align: center; - opacity: 0; } - .kuiCodeEditorKeyboardHint:focus { - opacity: 1; - border: 2px solid #0079a5; - z-index: 1000; } - .kuiCodeEditorKeyboardHint.kuiCodeEditorKeyboardHint-isInactive { - display: none; } - -.kuiCollapseButton { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: transparent; - padding: 4px; - border: none; - line-height: 1; - font-size: 16px; - color: #2d2d2d !important; - /* 1 */ - cursor: pointer; - opacity: 0.35; } - .kuiCollapseButton:hover { - opacity: 1; } - .theme-dark .kuiCollapseButton { - color: #cecece !important; - /* 1 */ } - -.kuiColorPicker { - cursor: pointer; } - -.kuiColorPicker__preview { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; } - -.kuiColorPicker__swatch { - width: 20px; - height: 20px; - border-radius: 4px; - -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); - display: inline-block; } - -.kuiColorPicker__emptySwatch svg { - position: absolute; - width: 20px; - height: 20px; } - -.kuiColorPicker__emptySwatch svg line { - stroke: red; - stroke-width: 2; } - -.kuiColorPicker__label { - font-size: 14px; - line-height: 1.5; - margin-left: 10px; - display: inline-block; - vertical-align: middle; } - -.kuiColorPickerPopUp { - position: absolute; - z-index: 10; } - -/** - * 1. If we use margins instead, columns get pushed to the next line. - */ -.kuiColumn + .kuiColumn { - padding-left: 10px; - /* 1 */ } - -/** - * 1. Use inline-block instead of flexbox so that content doesn't overflow. - * 2. Content can be aligned by offsetting from the top. - */ -.kuiColumn--1 { - display: inline-block; - /* 1 */ - vertical-align: top; - /* 2 */ - width: 8.33333%; } - -.kuiColumn--2 { - display: inline-block; - /* 1 */ - vertical-align: top; - /* 2 */ - width: 16.66667%; } - -.kuiColumn--3 { - display: inline-block; - /* 1 */ - vertical-align: top; - /* 2 */ - width: 25%; } - -.kuiColumn--4 { - display: inline-block; - /* 1 */ - vertical-align: top; - /* 2 */ - width: 33.33333%; } - -.kuiColumn--5 { - display: inline-block; - /* 1 */ - vertical-align: top; - /* 2 */ - width: 41.66667%; } - -.kuiColumn--6 { - display: inline-block; - /* 1 */ - vertical-align: top; - /* 2 */ - width: 50%; } - -.kuiColumn--7 { - display: inline-block; - /* 1 */ - vertical-align: top; - /* 2 */ - width: 58.33333%; } - -.kuiColumn--8 { - display: inline-block; - /* 1 */ - vertical-align: top; - /* 2 */ - width: 66.66667%; } - -.kuiColumn--9 { - display: inline-block; - /* 1 */ - vertical-align: top; - /* 2 */ - width: 75%; } - -.kuiColumn--10 { - display: inline-block; - /* 1 */ - vertical-align: top; - /* 2 */ - width: 83.33333%; } - -.kuiColumn--11 { - display: inline-block; - /* 1 */ - vertical-align: top; - /* 2 */ - width: 91.66667%; } - -.kuiColumn--12 { - display: inline-block; - /* 1 */ - vertical-align: top; - /* 2 */ - width: 100%; } - -.kuiContextMenu { - width: 256px; - position: relative; - overflow: hidden; - -webkit-transition: height 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); - transition: height 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); - border-radius: 4px; } - .kuiContextMenu .kuiContextMenu__content { - padding: 8px; } - -.kuiContextMenu__panel { - position: absolute; } - -/** - * 1. Ensure icon is centered within a container with a consistent width. - */ -.kuiContextMenu__icon { - width: 16px; - /* 1 */ - text-align: center; - /* 1 */ - margin-right: 8px; } - -.kuiContextMenu__itemLayout { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; } - -.kuiContextMenuPanel { - width: 100%; - visibility: visible; - background-color: #ffffff; - /** - * 1. Override global focus style. - */ } - .kuiContextMenuPanel:focus { - -webkit-box-shadow: none; - box-shadow: none; - /* 1 */ } - .kuiContextMenuPanel.kuiContextMenuPanel-txInLeft { - pointer-events: none; - -webkit-animation: kuiContextMenuPanelTxInLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); - animation: kuiContextMenuPanelTxInLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } - .kuiContextMenuPanel.kuiContextMenuPanel-txOutLeft { - pointer-events: none; - -webkit-animation: kuiContextMenuPanelTxOutLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); - animation: kuiContextMenuPanelTxOutLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } - .kuiContextMenuPanel.kuiContextMenuPanel-txInRight { - pointer-events: none; - -webkit-animation: kuiContextMenuPanelTxInRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); - animation: kuiContextMenuPanelTxInRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } - .kuiContextMenuPanel.kuiContextMenuPanel-txOutRight { - pointer-events: none; - -webkit-animation: kuiContextMenuPanelTxOutRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); - animation: kuiContextMenuPanelTxOutRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } - .theme-dark .kuiContextMenuPanel { - background-color: #777777; } - -.kuiContextMenuPanel--next { - -webkit-transform: translateX(256px); - transform: translateX(256px); - visibility: hidden; } - -.kuiContextMenuPanel--previous { - -webkit-transform: translateX(-256px); - transform: translateX(-256px); - visibility: hidden; } - -/** - * 1. Button reset. - */ -.kuiContextMenuPanelTitle { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - /* 1 */ - border: none; - /* 1 */ - cursor: pointer; - /* 1 */ - background-color: #e6e6e6; - border-bottom: 1px solid #D9D9D9; - padding: 12px; - font-size: 14px; - width: 100%; - text-align: left; - /** - * 1. Overwrite default style. - */ } - .theme-dark .kuiContextMenuPanelTitle { - background-color: #777777; - border-color: #444444; - color: #ffffff; } - .kuiContextMenuPanelTitle:hover .kuiContextMenu__text, .kuiContextMenuPanelTitle:focus .kuiContextMenu__text { - text-decoration: underline; } - .kuiContextMenuPanelTitle:focus { - -webkit-box-shadow: none; - box-shadow: none; - /* 1 */ } - -@-webkit-keyframes kuiContextMenuPanelTxInLeft { - 0% { - -webkit-transform: translateX(100%); - transform: translateX(100%); } - 100% { - -webkit-transform: translateX(0); - transform: translateX(0); } } - -@keyframes kuiContextMenuPanelTxInLeft { - 0% { - -webkit-transform: translateX(100%); - transform: translateX(100%); } - 100% { - -webkit-transform: translateX(0); - transform: translateX(0); } } - -@-webkit-keyframes kuiContextMenuPanelTxOutLeft { - 0% { - -webkit-transform: translateX(0); - transform: translateX(0); } - 100% { - -webkit-transform: translateX(-100%); - transform: translateX(-100%); } } - -@keyframes kuiContextMenuPanelTxOutLeft { - 0% { - -webkit-transform: translateX(0); - transform: translateX(0); } - 100% { - -webkit-transform: translateX(-100%); - transform: translateX(-100%); } } - -@-webkit-keyframes kuiContextMenuPanelTxInRight { - 0% { - -webkit-transform: translateX(-100%); - transform: translateX(-100%); } - 100% { - -webkit-transform: translateX(0); - transform: translateX(0); } } - -@keyframes kuiContextMenuPanelTxInRight { - 0% { - -webkit-transform: translateX(-100%); - transform: translateX(-100%); } - 100% { - -webkit-transform: translateX(0); - transform: translateX(0); } } - -@-webkit-keyframes kuiContextMenuPanelTxOutRight { - 0% { - -webkit-transform: translateX(0); - transform: translateX(0); } - 100% { - -webkit-transform: translateX(100%); - transform: translateX(100%); } } - -@keyframes kuiContextMenuPanelTxOutRight { - 0% { - -webkit-transform: translateX(0); - transform: translateX(0); } - 100% { - -webkit-transform: translateX(100%); - transform: translateX(100%); } } - -/** - * 1. Button reset. - * 2. Ensure buttons stack. - */ -.kuiContextMenuItem { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - /* 1 */ - background-color: transparent; - /* 1 */ - font-size: 14px; - /* 1 */ - border: none; - /* 1 */ - cursor: pointer; - /* 1 */ - display: block; - /* 2 */ - padding: 12px; - width: 100%; - text-align: left; - color: #2d2d2d; - /** - * 1. Overwrite default style. - */ } - .kuiContextMenuItem:hover .kuiContextMenuItem__text, .kuiContextMenuItem:focus .kuiContextMenuItem__text { - text-decoration: underline; } - .kuiContextMenuItem:focus { - background-color: rgba(63, 168, 199, 0.2); - -webkit-box-shadow: none; - box-shadow: none; - /* 1 */ } - .theme-dark .kuiContextMenuItem:focus { - background-color: transparent; } - .theme-dark .kuiContextMenuItem { - color: #ffffff; } - -.kuiContextMenuItem__inner { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; } - -.kuiContextMenuItem__text { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; } - -.kuiContextMenuItem__arrow { - -webkit-align-self: flex-end; - -ms-flex-item-align: end; - align-self: flex-end; } - -.kuiContextMenuItem-disabled { - color: #9B9B9B; - cursor: default; } - .theme-dark .kuiContextMenuItem-disabled { - color: #9B9B9B; } - .kuiContextMenuItem-disabled:hover .kuiContextMenuItem__text, .kuiContextMenuItem-disabled:focus .kuiContextMenuItem__text { - text-decoration: none; } - -.kuiEvent { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; } - -.kuiEventSymbol { - -webkit-box-flex: 0; - -webkit-flex: 0 1 auto; - -ms-flex: 0 1 auto; - flex: 0 1 auto; - font-size: 14px; - line-height: 1.5; - padding-right: 8px; } - -.kuiEventBody { - -webkit-box-flex: 1; - -webkit-flex: 1 1 0%; - -ms-flex: 1 1 0%; - flex: 1 1 0%; } - -.kuiEventBody__message { - font-size: 14px; - line-height: 1.5; - color: #191E23; } - -.kuiEventBody__metadata { - font-size: 14px; - line-height: 1.5; - color: #666; } - -.kuiExpression { - padding: 20px; - white-space: nowrap; } - -.kuiExpressionButton { - background-color: transparent; - padding: 5px 0px; - border: none; - border-bottom: dotted 2px #D9D9D9; - font-size: 14px; - cursor: pointer; } - -.kuiExpressionButton__description { - color: #00A69B; - text-transform: uppercase; } - -.kuiExpressionButton__value { - color: #2d2d2d; - text-transform: lowercase; } - -.kuiExpressionButton-isActive { - border-bottom: solid 2px #00A69B; } - -.kuiFlexGroup { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGroup .kuiFlexItem { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; } - -.kuiFlexGroup--gutterSmall { - margin: -4px; } - .kuiFlexGroup--gutterSmall > .kuiFlexItem { - margin: 4px; } - -.kuiFlexGroup--gutterMedium { - margin: -8px; } - .kuiFlexGroup--gutterMedium > .kuiFlexItem { - margin: 8px; } - -.kuiFlexGroup--gutterLarge { - margin: -12px; } - .kuiFlexGroup--gutterLarge > .kuiFlexItem { - margin: 12px; } - -.kuiFlexGroup--gutterExtraLarge { - margin: -20px; } - .kuiFlexGroup--gutterExtraLarge > .kuiFlexItem { - margin: 20px; } - -.kuiFlexGroup--justifyContentSpaceEvenly { - -webkit-box-pack: space-evenly; - -webkit-justify-content: space-evenly; - -ms-flex-pack: space-evenly; - justify-content: space-evenly; } - -.kuiFlexGroup--justifyContentSpaceBetween { - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; } - -.kuiFlexGroup--justifyContentSpaceAround { - -webkit-justify-content: space-around; - -ms-flex-pack: distribute; - justify-content: space-around; } - -.kuiFlexGroup--justifyContentCenter { - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; } - -.kuiFlexGroup--justifyContentFlexEnd { - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - -ms-flex-pack: end; - justify-content: flex-end; } - -.kuiFlexGroup--alignItemsStart { - -webkit-box-align: start; - -webkit-align-items: flex-start; - -ms-flex-align: start; - align-items: flex-start; } - -.kuiFlexGroup--alignItemsCenter { - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; } - -.kuiFlexGroup--alignItemsEnd { - -webkit-box-align: end; - -webkit-align-items: flex-end; - -ms-flex-align: end; - align-items: flex-end; } - -.kuiFlexGroup--wrap { - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; } - -@media only screen and (max-width: 768px) { - .kuiFlexGroup { - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; } } - -.kuiFlexGrid { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin-bottom: 0; } - .kuiFlexGrid > .kuiFlexItem { - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; } - .kuiFlexGrid > .kuiFlexItem.kuiFlexItem--flexGrowZero { - -webkit-box-flex: 0 !important; - -webkit-flex-grow: 0 !important; - -ms-flex-positive: 0 !important; - flex-grow: 0 !important; - -webkit-flex-basis: auto !important; - -ms-flex-preferred-size: auto !important; - flex-basis: auto !important; } - -/** - * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid - * without columns. - */ -.kuiFlexGrid--gutterSmall > .kuiFlexItem { - margin: 4px; } - -.kuiFlexGrid--gutterSmall { - margin: -4px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterSmall.kuiFlexGrid--fourths > .kuiFlexItem { - -webkit-flex-basis: calc(25% - 8px); - -ms-flex-preferred-size: calc(25% - 8px); - flex-basis: calc(25% - 8px); } - -.kuiFlexGrid--gutterSmall { - margin: -4px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterSmall.kuiFlexGrid--thirds > .kuiFlexItem { - -webkit-flex-basis: calc(33.3% - 8px); - -ms-flex-preferred-size: calc(33.3% - 8px); - flex-basis: calc(33.3% - 8px); } - -.kuiFlexGrid--gutterSmall { - margin: -4px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterSmall.kuiFlexGrid--halves > .kuiFlexItem { - -webkit-flex-basis: calc(50% - 8px); - -ms-flex-preferred-size: calc(50% - 8px); - flex-basis: calc(50% - 8px); } - -/** - * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid - * without columns. - */ -.kuiFlexGrid--gutterMedium > .kuiFlexItem { - margin: 8px; } - -.kuiFlexGrid--gutterMedium { - margin: -8px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterMedium.kuiFlexGrid--fourths > .kuiFlexItem { - -webkit-flex-basis: calc(25% - 16px); - -ms-flex-preferred-size: calc(25% - 16px); - flex-basis: calc(25% - 16px); } - -.kuiFlexGrid--gutterMedium { - margin: -8px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterMedium.kuiFlexGrid--thirds > .kuiFlexItem { - -webkit-flex-basis: calc(33.3% - 16px); - -ms-flex-preferred-size: calc(33.3% - 16px); - flex-basis: calc(33.3% - 16px); } - -.kuiFlexGrid--gutterMedium { - margin: -8px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterMedium.kuiFlexGrid--halves > .kuiFlexItem { - -webkit-flex-basis: calc(50% - 16px); - -ms-flex-preferred-size: calc(50% - 16px); - flex-basis: calc(50% - 16px); } - -/** - * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid - * without columns. - */ -.kuiFlexGrid--gutterLarge > .kuiFlexItem { - margin: 12px; } - -.kuiFlexGrid--gutterLarge { - margin: -12px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterLarge.kuiFlexGrid--fourths > .kuiFlexItem { - -webkit-flex-basis: calc(25% - 24px); - -ms-flex-preferred-size: calc(25% - 24px); - flex-basis: calc(25% - 24px); } - -.kuiFlexGrid--gutterLarge { - margin: -12px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterLarge.kuiFlexGrid--thirds > .kuiFlexItem { - -webkit-flex-basis: calc(33.3% - 24px); - -ms-flex-preferred-size: calc(33.3% - 24px); - flex-basis: calc(33.3% - 24px); } - -.kuiFlexGrid--gutterLarge { - margin: -12px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterLarge.kuiFlexGrid--halves > .kuiFlexItem { - -webkit-flex-basis: calc(50% - 24px); - -ms-flex-preferred-size: calc(50% - 24px); - flex-basis: calc(50% - 24px); } - -/** - * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid - * without columns. - */ -.kuiFlexGrid--gutterXLarge > .kuiFlexItem { - margin: 16px; } - -.kuiFlexGrid--gutterXLarge { - margin: -16px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterXLarge.kuiFlexGrid--fourths > .kuiFlexItem { - -webkit-flex-basis: calc(25% - 32px); - -ms-flex-preferred-size: calc(25% - 32px); - flex-basis: calc(25% - 32px); } + border-top-left-radius: 0; + border-bottom-left-radius: 0; } -.kuiFlexGrid--gutterXLarge { - margin: -16px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterXLarge.kuiFlexGrid--thirds > .kuiFlexItem { - -webkit-flex-basis: calc(33.3% - 32px); - -ms-flex-preferred-size: calc(33.3% - 32px); - flex-basis: calc(33.3% - 32px); } +.kuiButtonGroup--united > .kuiButton:only-child { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; } -.kuiFlexGrid--gutterXLarge { - margin: -16px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterXLarge.kuiFlexGrid--halves > .kuiFlexItem { - -webkit-flex-basis: calc(50% - 32px); - -ms-flex-preferred-size: calc(50% - 32px); - flex-basis: calc(50% - 32px); } +.kuiButtonGroup--united .kuiButton + .kuiButton { + margin-left: 2px; } -/** - * 1. Allow KuiPanels to expand to fill the item. - */ -.kuiFlexItem { +.kuiButtonGroup--fullWidth { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; - display: flex; - /* 1 */ - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - /* 1 */ - /* - * 1. We need the extra specificity here to override the FlexGroup > FlexItem styles. - * 2. FlexItem can be manually set to not grow if needed. - */ } - .kuiFlexItem.kuiFlexItem--flexGrowZero { - /* 1 */ - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - /* 2 */ - -webkit-flex-basis: auto; - -ms-flex-preferred-size: auto; - flex-basis: auto; - /* 2 */ } - .kuiFlexItem.kuiFlexItem--flexGrow1 { + display: flex; } + .kuiButtonGroup--fullWidth > .kuiButton { -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; } - .kuiFlexItem.kuiFlexItem--flexGrow2 { - -webkit-box-flex: 2; - -webkit-flex-grow: 2; - -ms-flex-positive: 2; - flex-grow: 2; } - .kuiFlexItem.kuiFlexItem--flexGrow3 { - -webkit-box-flex: 3; - -webkit-flex-grow: 3; - -ms-flex-positive: 3; - flex-grow: 3; } - .kuiFlexItem.kuiFlexItem--flexGrow4 { - -webkit-box-flex: 4; - -webkit-flex-grow: 4; - -ms-flex-positive: 4; - flex-grow: 4; } - .kuiFlexItem.kuiFlexItem--flexGrow5 { - -webkit-box-flex: 5; - -webkit-flex-grow: 5; - -ms-flex-positive: 5; - flex-grow: 5; } - .kuiFlexItem.kuiFlexItem--flexGrow6 { - -webkit-box-flex: 6; - -webkit-flex-grow: 6; - -ms-flex-positive: 6; - flex-grow: 6; } - .kuiFlexItem.kuiFlexItem--flexGrow7 { - -webkit-box-flex: 7; - -webkit-flex-grow: 7; - -ms-flex-positive: 7; - flex-grow: 7; } - .kuiFlexItem.kuiFlexItem--flexGrow8 { - -webkit-box-flex: 8; - -webkit-flex-grow: 8; - -ms-flex-positive: 8; - flex-grow: 8; } - .kuiFlexItem.kuiFlexItem--flexGrow9 { - -webkit-box-flex: 9; - -webkit-flex-grow: 9; - -ms-flex-positive: 9; - flex-grow: 9; } - .kuiFlexItem.kuiFlexItem--flexGrow10 { - -webkit-box-flex: 10; - -webkit-flex-grow: 10; - -ms-flex-positive: 10; - flex-grow: 10; } - -@media only screen and (max-width: 768px) { - .kuiFlexItem { - width: 100% !important; - -webkit-flex-basis: 100% !important; - -ms-flex-preferred-size: 100% !important; - flex-basis: 100% !important; - margin-left: 0 !important; - margin-bottom: 16px !important; } } + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + text-align: center; } + +.eui-textCenter > .kuiButtonGroup, +.text-center > .kuiButtonGroup { + display: inline-block; } + +.kuiCollapseButton { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + padding: 4px; + border: none; + line-height: 1; + font-size: 16px; + color: #2D2D2D !important; + /* 1 */ + cursor: pointer; + opacity: 0.35; } + .kuiCollapseButton:hover { + opacity: 1; } + .theme-dark .kuiCollapseButton { + color: #DDD !important; + /* 1 */ } + +.kuiExpression { + padding: 20px; + white-space: nowrap; } + +.kuiExpressionButton { + background-color: transparent; + padding: 5px 0px; + border: none; + border-bottom: dotted 2px #D3DAE6; + font-size: 14px; + cursor: pointer; } + +.kuiExpressionButton__description { + color: #017D73; + text-transform: uppercase; } + +.kuiExpressionButton__value { + color: #2D2D2D; + text-transform: lowercase; } + +.kuiExpressionButton-isActive { + border-bottom: solid 2px #017D73; } /** * 1. Set inline-block so this wrapper shrinks to fit the input. @@ -1588,8 +638,8 @@ main { -webkit-transition: opacity 0.1s linear; transition: opacity 0.1s linear; } .kuiCheckBox:checked { - border-color: #0079a5; - background-color: #0079a5; } + border-color: #006BB4; + background-color: #006BB4; } .kuiCheckBox:checked:before { opacity: 1; } .kuiCheckBox:focus { @@ -1597,18 +647,18 @@ main { /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #0079a5; - box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #0079a5; + -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px #006BB4; + box-shadow: 0 0 0 1px #fff, 0 0 0 2px #006BB4; /* 3 */ } .kuiCheckBox:disabled { - background-color: #D9D9D9 !important; - border-color: #D9D9D9 !important; + background-color: #D3DAE6 !important; + border-color: #D3DAE6 !important; cursor: not-allowed !important; } .theme-dark .kuiCheckBox { - background-color: #444444; - border-color: #444444; } + background-color: #1b1b1b; + border-color: #1b1b1b; } .theme-dark .kuiCheckBox:checked { - background-color: #0079a5; } + background-color: #006BB4; } .kuiCheckBoxLabel { display: -webkit-box; @@ -1643,7 +693,7 @@ main { font-size: 14px; line-height: 1.5; } .kuiSearchInput.kuiSearchInput-isInvalid .kuiSearchInput__input { - border-color: #A30000; } + border-color: #BD271E; } .kuiSearchInput__icon { position: absolute; @@ -1661,38 +711,38 @@ main { -moz-appearance: none; appearance: none; font-family: "Open Sans", Helvetica, Arial, sans-serif; - padding: 3px 12px 4px; + padding: 4px 12px 4px; font-size: 14px; font-weight: 400; line-height: 1.5; - color: #191E23; + color: #2D2D2D; background-color: #ffffff; - border: 1px solid #DEDEDE; - border-radius: 4px; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 0; -webkit-transition: border-color 0.1s linear; transition: border-color 0.1s linear; - min-height: 30px; + min-height: 32px; /* 1 */ padding-left: 28px; /* 1 */ width: 100%; /* 2 */ } .theme-dark .kuiSearchInput__input { - color: #cecece; } + color: #DDD; } .kuiSearchInput__input:invalid { - border-color: #A30000; } + border-color: #BD271E; } .kuiSearchInput__input:focus { outline: none; - border-color: #0079a5; } + border-color: #006BB4; } .kuiSearchInput__input:disabled { opacity: 0.4; cursor: not-allowed; } .theme-dark .kuiSearchInput__input { - background-color: #444444; - border-color: #444444; } + background-color: #1b1b1b; + border-color: #333; } .theme-dark .kuiSearchInput__input:focus { outline: none; - border-color: #0079a5; } + border-color: #006BB4; } .kuiSearchInput--small { width: 60px; } @@ -1708,17 +758,17 @@ main { -moz-appearance: none; appearance: none; font-family: "Open Sans", Helvetica, Arial, sans-serif; - padding: 3px 12px 4px; + padding: 4px 12px 4px; font-size: 14px; font-weight: 400; line-height: 1.5; - color: #191E23; + color: #2D2D2D; background-color: #ffffff; - border: 1px solid #DEDEDE; - border-radius: 4px; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 0; -webkit-transition: border-color 0.1s linear; transition: border-color 0.1s linear; - min-height: 30px; + min-height: 32px; /* 1 */ padding-right: 30px; /* 2 */ @@ -1729,21 +779,21 @@ main { background-position: calc(100% - 8px); /* 2 */ } .theme-dark .kuiSelect { - color: #cecece; } + color: #DDD; } .kuiSelect:invalid { - border-color: #A30000; } + border-color: #BD271E; } .kuiSelect:focus { outline: none; - border-color: #0079a5; } + border-color: #006BB4; } .kuiSelect:disabled { opacity: 0.4; cursor: not-allowed; } .theme-dark .kuiSelect { - background-color: #444444; - border-color: #444444; } + background-color: #1b1b1b; + border-color: #333; } .theme-dark .kuiSelect:focus { outline: none; - border-color: #0079a5; } + border-color: #006BB4; } .kuiSelect:-moz-focusring { text-shadow: 0 0 0; /* 3 */ } @@ -1751,12 +801,12 @@ main { background-image: url('data:image/svg+xml;utf8,'); /* 1 */ } .kuiSelect.kuiSelect-isInvalid { - border-color: #A30000; } + border-color: #BD271E; } .kuiSelect:focus { -webkit-box-shadow: none; box-shadow: none; outline: none; - border-color: #0079a5; } + border-color: #006BB4; } .kuiSelect--small { width: 60px; } @@ -1776,16 +826,16 @@ main { -moz-appearance: none; appearance: none; font-family: "Open Sans", Helvetica, Arial, sans-serif; - padding: 3px 12px 4px; + padding: 4px 12px 4px; font-size: 14px; font-weight: 400; line-height: 1.5; - color: #191E23; + color: #2D2D2D; border: 1px solid transparent; /* 1 */ background-color: transparent; } .theme-dark .kuiStaticInput { - color: #cecece; } + color: #DDD; } .kuiTextArea { width: 180px; @@ -1793,41 +843,41 @@ main { -moz-appearance: none; appearance: none; font-family: "Open Sans", Helvetica, Arial, sans-serif; - padding: 3px 12px 4px; + padding: 4px 12px 4px; font-size: 14px; font-weight: 400; line-height: 1.5; - color: #191E23; + color: #2D2D2D; background-color: #ffffff; - border: 1px solid #DEDEDE; - border-radius: 4px; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 0; -webkit-transition: border-color 0.1s linear; transition: border-color 0.1s linear; - min-height: 30px; + min-height: 32px; /* 1 */ } .theme-dark .kuiTextArea { - color: #cecece; } + color: #DDD; } .kuiTextArea:invalid { - border-color: #A30000; } + border-color: #BD271E; } .kuiTextArea:focus { outline: none; - border-color: #0079a5; } + border-color: #006BB4; } .kuiTextArea:disabled { opacity: 0.4; cursor: not-allowed; } .theme-dark .kuiTextArea { - background-color: #444444; - border-color: #444444; } + background-color: #1b1b1b; + border-color: #333; } .theme-dark .kuiTextArea:focus { outline: none; - border-color: #0079a5; } + border-color: #006BB4; } .kuiTextArea:focus { -webkit-box-shadow: none; box-shadow: none; outline: none; - border-color: #0079a5; } + border-color: #006BB4; } .kuiTextArea.kuiTextArea-isInvalid { - border-color: #A30000; } + border-color: #BD271E; } .kuiTextArea--nonResizable { resize: none; } @@ -1844,36 +894,36 @@ main { -moz-appearance: none; appearance: none; font-family: "Open Sans", Helvetica, Arial, sans-serif; - padding: 3px 12px 4px; + padding: 4px 12px 4px; font-size: 14px; font-weight: 400; line-height: 1.5; - color: #191E23; + color: #2D2D2D; background-color: #ffffff; - border: 1px solid #DEDEDE; - border-radius: 4px; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 0; -webkit-transition: border-color 0.1s linear; transition: border-color 0.1s linear; - min-height: 30px; + min-height: 32px; /* 1 */ } .theme-dark .kuiTextInput { - color: #cecece; } + color: #DDD; } .kuiTextInput:invalid { - border-color: #A30000; } + border-color: #BD271E; } .kuiTextInput:focus { outline: none; - border-color: #0079a5; } + border-color: #006BB4; } .kuiTextInput:disabled { opacity: 0.4; cursor: not-allowed; } .theme-dark .kuiTextInput { - background-color: #444444; - border-color: #444444; } + background-color: #1b1b1b; + border-color: #333; } .theme-dark .kuiTextInput:focus { outline: none; - border-color: #0079a5; } + border-color: #006BB4; } .kuiTextInput.kuiTextInput-isInvalid { - border-color: #A30000; } + border-color: #BD271E; } .kuiTextInput--small { width: 60px; } @@ -1914,162 +964,6 @@ main { .kuiFieldGroupSection--wide > * { width: 100%; } -.kuiGallery { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; } - -.kuiGalleryItem { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - position: relative; - width: 140px; - height: 140px; - margin: 0 20px 20px 0; - padding: 25px 10px 10px; - line-height: 1.5; - background-color: #F6F6F6; - border: 1px solid #CED5DA; - border-radius: 4px; - text-decoration: none; } - .kuiGalleryItem:hover { - background-color: #FFFFFF; - border-color: #00A6FF; } - -.kuiGalleryItem__image { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - width: 50px; - height: 50px; - margin-bottom: 20px; } - -/** - * 1. Truncate overflowing text. - */ -.kuiGalleryItem__label { - font-size: 14px; - color: #191E23; - text-align: center; - max-width: 100%; - /* 1 */ - white-space: nowrap; - /* 1 */ - overflow: hidden; - /* 1 */ - text-overflow: ellipsis; - /* 1 */ } - -.kuiGalleryItem__icon { - position: absolute; - top: 5px; - right: 5px; - color: #666; } - -.kuiHeaderBar { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - min-height: 30px; - /* 1 */ - border-bottom: 1px solid #D9D9D9; } - -/** - * 1. Align a single section to the left by default. - */ -.kuiHeaderBarSection { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - margin-left: 25px; - margin-right: 25px; } - .kuiHeaderBarSection:not(:first-child):not(:last-child):not(:only-child) { - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - /* 3 */ } - .kuiHeaderBarSection:first-child { - margin-left: 0; } - .kuiHeaderBarSection:last-child { - margin-right: 0; - -webkit-box-flex: 0; - -webkit-flex: 0 1 auto; - -ms-flex: 0 1 auto; - flex: 0 1 auto; - /* 4 */ - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - -ms-flex-pack: end; - justify-content: flex-end; - /* 5 */ } - .kuiHeaderBarSection:only-child { - margin-left: auto; - /* 2 */ } - .kuiHeaderBarSection > * + * { - margin-left: 10px; - /* 1 */ } - .kuiHeaderBarSection:only-child { - margin-left: 0; - /* 1 */ } - -.kuiInfoButton { - font-size: 16px; - line-height: 0; - background-color: transparent; - color: #0079a5; - cursor: pointer; - border: none; - padding: 0; } - .kuiInfoButton:hover, .kuiInfoButton:active { - color: #005472; } - /** * 1. Copied from FontAwesome's .fa class. We use a custom class to make it easier to migrate away * from FontAwesome someday. When we do migrate away, we can just update this definition. @@ -2089,19 +983,19 @@ main { /* 1 */ } .kuiIcon--info { - color: #3fa8c7; } + color: #006BB4; } .kuiIcon--success { - color: #417505; } + color: #017D73; } .kuiIcon--warning { - color: #ec9800; } + color: #F5A700; } .kuiIcon--error { - color: #A30000; } + color: #BD271E; } .kuiIcon--inactive { - color: #c3c3c3; } + color: #D3DAE6; } .kuiIcon--basic { color: #565656; } @@ -2115,28 +1009,28 @@ main { * 1. TODO: Pick a hex value instead of making these colors translucent. */ .kuiInfoPanel--info { - border-color: rgba(63, 168, 199, 0.25); + border-color: rgba(0, 107, 180, 0.25); /* 1 */ } /** * 1. TODO: Pick a hex value instead of making these colors translucent. */ .kuiInfoPanel--success { - border-color: rgba(65, 117, 5, 0.25); + border-color: rgba(1, 125, 115, 0.25); /* 1 */ } /** * 1. TODO: Pick a hex value instead of making these colors translucent. */ .kuiInfoPanel--warning { - border-color: rgba(236, 152, 0, 0.25); + border-color: rgba(245, 167, 0, 0.25); /* 1 */ } /** * 1. TODO: Pick a hex value instead of making these colors translucent. */ .kuiInfoPanel--error { - border-color: rgba(163, 0, 0, 0.25); + border-color: rgba(189, 39, 30, 0.25); /* 1 */ } /** @@ -2173,7 +1067,7 @@ main { line-height: 1.5; } .kuiLink { - color: #0079a5; + color: #006BB4; text-decoration: none; cursor: pointer; /* 1 */ @@ -2190,14 +1084,14 @@ main { line-height: inherit; /* 2 */ } .kuiLink:visited, .kuiLink:active { - color: #0079a5; } + color: #006BB4; } .kuiLink:hover { - color: #006E8A; + color: #004d81; text-decoration: underline; } .theme-dark .kuiLink { - color: #b7e2ea; } + color: #4DA1C0; } .theme-dark .kuiLink:hover { - color: #b7e2ea; } + color: #4DA1C0; } /** * 1. Breadcrumbs are placed in the top-left corner and need to be bumped over @@ -2237,7 +1131,7 @@ main { * 1. Make it a bit darker to contrast with the gray background. */ .kuiLocalBreadcrumb__link { - color: #0079a5; + color: #006BB4; text-decoration: none; cursor: pointer; /* 1 */ @@ -2253,18 +1147,18 @@ main { /* 2 */ line-height: inherit; /* 2 */ - color: #0079a5; + color: #006BB4; /* 1 */ font-size: 14px; } .kuiLocalBreadcrumb__link:visited, .kuiLocalBreadcrumb__link:active { - color: #0079a5; } + color: #006BB4; } .kuiLocalBreadcrumb__link:hover { - color: #006E8A; + color: #004d81; text-decoration: underline; } .theme-dark .kuiLocalBreadcrumb__link { - color: #b7e2ea; } + color: #4DA1C0; } .theme-dark .kuiLocalBreadcrumb__link:hover { - color: #b7e2ea; } + color: #4DA1C0; } .kuiLocalBreadcrumb__emphasis { font-weight: 700; } @@ -2302,23 +1196,23 @@ main { appearance: none; background-color: transparent; border: none; - font-size: 12px; - color: #2d2d2d; + font-size: 14px; + color: #2D2D2D; padding: 3px 6px; border-radius: 4px; } .kuiDatePickerNavigationButton:hover, .kuiDatePickerNavigationButton:active { cursor: pointer; - color: #F5F5F5; - background-color: #0079a5; } + color: #F5F7FA; + background-color: #006BB4; } .kuiDatePickerNavigationButton:focus { z-index: 1; /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #F5F5F5, 0 0 0 2px #0079a5; - box-shadow: 0 0 0 1px #F5F5F5, 0 0 0 2px #0079a5; + -webkit-box-shadow: 0 0 0 1px #F5F7FA, 0 0 0 2px #006BB4; + box-shadow: 0 0 0 1px #F5F7FA, 0 0 0 2px #006BB4; /* 3 */ - color: #2d2d2d; + color: #2D2D2D; /* 1 */ } .theme-dark .kuiDatePickerNavigationButton { color: #dedede; } @@ -2330,21 +1224,21 @@ main { /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #525252, 0 0 0 2px #0079a5; - box-shadow: 0 0 0 1px #525252, 0 0 0 2px #0079a5; + -webkit-box-shadow: 0 0 0 1px #525252, 0 0 0 2px #006BB4; + box-shadow: 0 0 0 1px #525252, 0 0 0 2px #006BB4; /* 3 */ color: #dedede; /* 1 */ } .kuiDatePickerHeaderCell { padding: 9px 0; - color: #2d2d2d; - font-size: 12px; + color: #2D2D2D; + font-size: 14px; font-weight: bold; text-align: center; line-height: 1.2; } .theme-dark .kuiDatePickerHeaderCell { - color: #cecece; } + color: #DDD; } .kuiDatePickerRowCell { padding: 0; @@ -2369,8 +1263,8 @@ main { background-color: transparent; width: 100%; border: 1px solid transparent; - color: #2d2d2d; - font-size: 12px; + color: #2D2D2D; + font-size: 14px; padding: 8px; border-radius: 4px; line-height: 1.2; } @@ -2379,10 +1273,10 @@ main { /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #F5F5F5, 0 0 0 2px #0079a5; - box-shadow: 0 0 0 1px #F5F5F5, 0 0 0 2px #0079a5; + -webkit-box-shadow: 0 0 0 1px #F5F7FA, 0 0 0 2px #006BB4; + box-shadow: 0 0 0 1px #F5F7FA, 0 0 0 2px #006BB4; /* 3 */ - color: #2d2d2d; + color: #2D2D2D; /* 1 */ } .kuiDatePickerRowCellContent:disabled { pointer-events: none; @@ -2391,26 +1285,26 @@ main { visibility: hidden; pointer-events: none; } .kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isCurrent { - color: #0079a5; } + color: #006BB4; } .kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isSelected { background-color: #777777; color: #ffffff; } .kuiDatePickerRowCellContent:hover, .kuiDatePickerRowCellContent:active { cursor: pointer; - color: #F5F5F5; - background-color: #0079a5; } + color: #F5F7FA; + background-color: #006BB4; } .theme-dark .kuiDatePickerRowCellContent { - color: #cecece; } + color: #DDD; } .theme-dark .kuiDatePickerRowCellContent:focus { z-index: 1; /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #525252, 0 0 0 2px #0079a5; - box-shadow: 0 0 0 1px #525252, 0 0 0 2px #0079a5; + -webkit-box-shadow: 0 0 0 1px #525252, 0 0 0 2px #006BB4; + box-shadow: 0 0 0 1px #525252, 0 0 0 2px #006BB4; /* 3 */ } .theme-dark .kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isCurrent { - color: #b7e2ea; } + color: #4DA1C0; } .theme-dark .kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isSelected { color: #ffffff; } .theme-dark .kuiDatePickerRowCellContent:hover, .theme-dark .kuiDatePickerRowCellContent:active { @@ -2420,14 +1314,14 @@ main { .kuiLocalDropdown { position: relative; padding: 10px 10px 14px; - background-color: #F5F5F5; - border-bottom: solid 1px #D9D9D9; - border-top: solid 1px #D9D9D9; + background-color: #F5F7FA; + border-bottom: solid 1px #D3DAE6; + border-top: solid 1px #D3DAE6; margin-bottom: 10px; line-height: 20px; } .theme-dark .kuiLocalDropdown { background-color: #525252; - border-color: #1a1a1a; } + border-color: #090909; } .kuiLocalDropdownCloseButton { -webkit-appearance: none; @@ -2438,7 +1332,7 @@ main { border: none; line-height: 1; font-size: 16px; - color: #2d2d2d !important; + color: #2D2D2D !important; /* 1 */ cursor: pointer; opacity: 0.35; @@ -2448,10 +1342,10 @@ main { .kuiLocalDropdownCloseButton:hover { opacity: 1; } .theme-dark .kuiLocalDropdownCloseButton { - color: #cecece !important; + color: #DDD !important; /* 1 */ } .theme-dark .kuiLocalDropdownCloseButton { - color: #cecece !important; + color: #DDD !important; /* 1 */ } .kuiLocalDropdownPanels { @@ -2480,9 +1374,9 @@ main { /* 1 */ margin-bottom: 12px; font-size: 18px; - color: #2d2d2d; } + color: #2D2D2D; } .theme-dark .kuiLocalDropdownTitle { - color: #cecece; } + color: #DDD; } .kuiLocalDropdownSection { margin-bottom: 16px; } @@ -2512,9 +1406,9 @@ main { font-weight: 700; margin-bottom: 0; /* 1 */ - color: #2d2d2d; } + color: #2D2D2D; } .theme-dark .kuiLocalDropdownHeader__label { - color: #cecece; } + color: #DDD; } .kuiLocalDropdownHeader__actions { display: -webkit-box; @@ -2523,16 +1417,16 @@ main { display: flex; } .kuiLocalDropdownHeader__action { - color: #0079a5; + color: #006BB4; font-size: 12px; text-decoration: none; cursor: pointer; } .kuiLocalDropdownHeader__action + .kuiLocalDropdownHeader__action { margin-left: 10px; } .kuiLocalDropdownHeader__action:hover, .kuiLocalDropdownHeader__action:active { - color: #005472; } + color: #004d81; } .theme-dark .kuiLocalDropdownHeader__action { - color: #b7e2ea; } + color: #4DA1C0; } .theme-dark .kuiLocalDropdownHeader__action:hover, .theme-dark .kuiLocalDropdownHeader__action:active { color: #def2f6; } @@ -2542,18 +1436,18 @@ main { margin-bottom: 12px; padding: 5px 15px; font-size: 14px; - color: #2d2d2d; + color: #2D2D2D; background-color: #FFF; - border: 1px solid #D9D9D9; + border: 1px solid #D3DAE6; border-radius: 4px; } .kuiLocalDropdownInput:focus { - border-color: #0079a5; } + border-color: #006BB4; } .theme-dark .kuiLocalDropdownInput { - color: #cecece; - background-color: #444444; - border-color: #444444; } + color: #DDD; + background-color: #1b1b1b; + border-color: #333; } .theme-dark .kuiLocalDropdownInput:focus { - border-color: #0079a5; } + border-color: #006BB4; } .kuiLocalDropdownFormNote { font-size: 14px; @@ -2565,10 +1459,10 @@ main { margin-bottom: 16px; padding: 6px 10px; font-size: 14px; - color: #2d2d2d; + color: #2D2D2D; background-color: #FFF; } .theme-dark .kuiLocalDropdownWarning { - color: #cecece; + color: #DDD; background-color: #636363; } .kuiLocalDropdownHelpText { @@ -2601,28 +1495,28 @@ main { padding: 0 10px; font-size: 14px; background-color: transparent; - color: #2d2d2d; + color: #2D2D2D; border: 0; cursor: pointer; border-right: solid 1px transparent; border-left: solid 1px transparent; } .kuiLocalMenuItem:hover, .kuiLocalMenuItem:focus { - background-color: #0079a5; - color: #F5F5F5; } + background-color: #006BB4; + color: #F5F7FA; } .kuiLocalMenuItem.kuiLocalMenuItem-isSelected { - background-color: #F5F5F5; - border-color: #D9D9D9; + background-color: #F5F7FA; + border-color: #D3DAE6; height: calc(100% + 1px); z-index: 2; - color: #0079a5; } + color: #006BB4; } .kuiLocalMenuItem.kuiLocalMenuItem-isSelected:hover, .kuiLocalMenuItem.kuiLocalMenuItem-isSelected:focus { - color: #0079a5; } + color: #006BB4; } .kuiLocalMenuItem.kuiLocalMenuItem-isDisabled { opacity: 0.5; cursor: not-allowed; } .kuiLocalMenuItem.kuiLocalMenuItem-isDisabled:hover { background-color: transparent; - color: #2d2d2d; } + color: #2D2D2D; } .theme-dark .kuiLocalMenuItem { color: #dedede; } .theme-dark .kuiLocalMenuItem:hover { @@ -2630,7 +1524,7 @@ main { color: #ffffff; } .theme-dark .kuiLocalMenuItem.kuiLocalMenuItem-isSelected { background-color: #525252; - border-color: #1a1a1a; + border-color: #090909; color: #ffffff; } .theme-dark .kuiLocalMenuItem.kuiLocalMenuItem-isDisabled:hover { background-color: transparent; @@ -2660,14 +1554,14 @@ main { justify-content: space-between; min-height: 69px; /* 1 */ - color: #2d2d2d; + color: #2D2D2D; background-color: #FFF; line-height: 1.5; - border-bottom: solid 1px #D9D9D9; } + border-bottom: solid 1px #D3DAE6; } .theme-dark .kuiLocalNav { - color: #cecece; - background-color: #333333; - border-color: #1a1a1a; } + color: #DDD; + background-color: #222; + border-color: #090909; } /** * 1. Allow row to expand if the content is so long that it wraps. @@ -2729,41 +1623,41 @@ main { -moz-appearance: none; appearance: none; font-family: "Open Sans", Helvetica, Arial, sans-serif; - padding: 3px 12px 4px; + padding: 4px 12px 4px; font-size: 14px; font-weight: 400; line-height: 1.5; - color: #191E23; + color: #2D2D2D; background-color: #ffffff; - border: 1px solid #DEDEDE; - border-radius: 4px; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 0; -webkit-transition: border-color 0.1s linear; transition: border-color 0.1s linear; - min-height: 30px; + min-height: 32px; /* 1 */ -webkit-box-flex: 1; -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; border-color: #ffffff; - border-color: #D9D9D9; + border-color: #D3DAE6; border-radius: 4px 0 0 4px; } .theme-dark .kuiLocalSearchInput { - color: #cecece; } + color: #DDD; } .kuiLocalSearchInput:invalid { - border-color: #A30000; } + border-color: #BD271E; } .kuiLocalSearchInput:focus { outline: none; - border-color: #0079a5; } + border-color: #006BB4; } .kuiLocalSearchInput:disabled { opacity: 0.4; cursor: not-allowed; } .theme-dark .kuiLocalSearchInput { - background-color: #444444; - border-color: #444444; } + background-color: #1b1b1b; + border-color: #333; } .theme-dark .kuiLocalSearchInput:focus { outline: none; - border-color: #0079a5; } + border-color: #006BB4; } .kuiLocalSearchInput:focus { -webkit-box-shadow: none; box-shadow: none; } @@ -2780,8 +1674,8 @@ main { border-left-width: 0; } .theme-dark .kuiLocalSearchInput--secondary { border-left-width: 1px; - border-left-color: #333333; - border-right-color: #333333; } + border-left-color: #222; + border-right-color: #222; } .kuiLocalSearchAssistedInput { display: -webkit-box; @@ -2812,17 +1706,17 @@ main { -moz-appearance: none; appearance: none; font-family: "Open Sans", Helvetica, Arial, sans-serif; - padding: 3px 12px 4px; + padding: 4px 12px 4px; font-size: 14px; font-weight: 400; line-height: 1.5; - color: #191E23; + color: #2D2D2D; background-color: #ffffff; - border: 1px solid #DEDEDE; - border-radius: 4px; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 0; -webkit-transition: border-color 0.1s linear; transition: border-color 0.1s linear; - min-height: 30px; + min-height: 32px; /* 1 */ padding-right: 30px; /* 2 */ @@ -2835,21 +1729,21 @@ main { border-left-width: 0; border-radius: 0; } .theme-dark .kuiLocalSearchSelect { - color: #cecece; } + color: #DDD; } .kuiLocalSearchSelect:invalid { - border-color: #A30000; } + border-color: #BD271E; } .kuiLocalSearchSelect:focus { outline: none; - border-color: #0079a5; } + border-color: #006BB4; } .kuiLocalSearchSelect:disabled { opacity: 0.4; cursor: not-allowed; } .theme-dark .kuiLocalSearchSelect { - background-color: #444444; - border-color: #444444; } + background-color: #1b1b1b; + border-color: #333; } .theme-dark .kuiLocalSearchSelect:focus { outline: none; - border-color: #0079a5; } + border-color: #006BB4; } .kuiLocalSearchSelect:-moz-focusring { text-shadow: 0 0 0; /* 3 */ } @@ -2867,7 +1761,7 @@ main { line-height: 0; /* 1 */ color: #ffffff; - background-color: #666; + background-color: #69707D; border: 0; border-radius: 0 4px 4px 0; } .kuiLocalSearchButton:focus { @@ -2875,8 +1769,8 @@ main { /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #0079a5; - box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #0079a5; + -webkit-box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4; + box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4; /* 3 */ } .theme-dark .kuiLocalSearchButton { color: #ffffff; @@ -2886,8 +1780,8 @@ main { /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #333333, 0 0 0 2px #0079a5; - box-shadow: 0 0 0 1px #333333, 0 0 0 2px #0079a5; + -webkit-box-shadow: 0 0 0 1px #222, 0 0 0 2px #006BB4; + box-shadow: 0 0 0 1px #222, 0 0 0 2px #006BB4; /* 3 */ } /** @@ -2910,7 +1804,7 @@ main { .kuiLocalTab { padding: 5px 0 6px 0; font-size: 18px; - color: #3F3F3F; + color: #343741; border-bottom: 2px solid transparent; text-decoration: none; cursor: pointer; @@ -2923,12 +1817,12 @@ main { * a regular cursor instead of setting pointer-events: none. */ } .kuiLocalTab:hover:not(.kuiLocalTab-isDisabled), .kuiLocalTab:active:not(.kuiLocalTab-isDisabled) { - color: #0079a5; } + color: #006BB4; } .theme-dark .kuiLocalTab:hover:not(.kuiLocalTab-isDisabled), .theme-dark .kuiLocalTab:active:not(.kuiLocalTab-isDisabled) { color: #ffffff; } .kuiLocalTab.kuiLocalTab-isSelected { - color: #0079a5; - border-bottom-color: #0079a5; + color: #006BB4; + border-bottom-color: #006BB4; cursor: default; } .theme-dark .kuiLocalTab.kuiLocalTab-isSelected { color: #ffffff; @@ -2964,7 +1858,7 @@ main { /* 1 */ } .kuiMenu--contained { - border: 1px solid #D9D9D9; } + border: 1px solid #D3DAE6; } .kuiMenu--contained .kuiMenuItem { padding: 6px 10px; } @@ -2976,7 +1870,7 @@ main { /* 1 */ padding: 6px 0; } .kuiMenuItem + .kuiMenuItem { - border-top: 1px solid #D9D9D9; } + border-top: 1px solid #D3DAE6; } /** * 1. Setting to inline-block guarantees the same height when applied to both @@ -3011,8 +1905,8 @@ main { /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #0079a5; - box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #0079a5; + -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px #006BB4; + box-shadow: 0 0 0 1px #fff, 0 0 0 2px #006BB4; /* 3 */ } .kuiMenuButton--iconText .kuiMenuButton__icon:first-child { @@ -3045,7 +1939,7 @@ main { */ .kuiMenuButton--primary { color: #ffffff; - background-color: #0079a5; } + background-color: #006BB4; } .kuiMenuButton--primary:focus { color: #ffffff !important; /* 1 */ } @@ -3076,8 +1970,8 @@ main { /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ff523c; - box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ff523c; + -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px #BD271E; + box-shadow: 0 0 0 1px #fff, 0 0 0 2px #BD271E; /* 3 */ } .kuiMenuButtonGroup { @@ -3094,31 +1988,6 @@ main { -ms-flex-pack: end; justify-content: flex-end; } -.kuiMicroButton { - display: inline-block; - /* 1 */ - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - cursor: pointer; - padding: 2px 5px; - border: 1px solid transparent; - color: #666; - background-color: transparent; - line-height: 1; - /* 2 */ - font-size: 12px; } - .kuiMicroButton:hover { - color: #191E23; } - -.kuiMicroButtonGroup { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; } - .kuiMicroButtonGroup .kuiMicroButton + .kuiMicroButton { - margin-left: 2px; } - .kuiModalOverlay { position: fixed; z-index: 1000; @@ -3146,7 +2015,7 @@ main { box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); line-height: 1.5; background-color: #FFF; - border: 1px solid #D9D9D9; + border: 1px solid #D3DAE6; border-radius: 4px; -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1); @@ -3176,14 +2045,14 @@ main { align-items: center; padding: 10px; padding-left: 20px; - border-bottom: 1px solid #D9D9D9; } + border-bottom: 1px solid #D3DAE6; } .theme-dark .kuiModalHeader { border-bottom-color: #000; } .kuiModalHeader__title { - font-size: 18px; } + font-size: 18.0px; } .theme-dark .kuiModalHeader__title { - color: #cecece; } + color: #DDD; } .kuiModalHeaderCloseButton { display: inline-block; @@ -3194,13 +2063,13 @@ main { cursor: pointer; padding: 2px 5px; border: 1px solid transparent; - color: #666; + color: #69707D; background-color: transparent; line-height: 1; /* 2 */ - font-size: 18px; } + font-size: 18.0px; } .kuiModalHeaderCloseButton:hover { - color: #191E23; } + color: #2D2D2D; } .kuiModalBody { padding: 20px; } @@ -3208,7 +2077,7 @@ main { .kuiModalBodyText { font-size: 14px; } .theme-dark .kuiModalBodyText { - color: #cecece; } + color: #DDD; } .kuiModalFooter { display: -webkit-box; @@ -3244,12 +2113,6 @@ main { -webkit-transform: translateY(0); transform: translateY(0); } } -.kuiNotice { - padding: 40px 60px 48px; - margin: 20px; - background-color: #FFF; - line-height: 1.5; } - /** * 1. Put 10px of space between each child. */ @@ -3274,7 +2137,10 @@ main { /* 1 */ } .kuiPanel { - border: 1px solid #D9D9D9; + -webkit-box-shadow: 0 2px 2px -1px rgba(152, 162, 179, 0.3), 0 1px 5px -2px rgba(152, 162, 179, 0.3); + box-shadow: 0 2px 2px -1px rgba(152, 162, 179, 0.3), 0 1px 5px -2px rgba(152, 162, 179, 0.3); + background-color: #FFF; + border: 1px solid #D3DAE6; border-radius: 4px; } .kuiPanel--prompt { @@ -3339,14 +2205,14 @@ main { /* 1 */ padding: 10px; height: 50px; - border-bottom: 1px solid #D9D9D9; } + border-bottom: 1px solid #D3DAE6; } .kuiPanelHeader .kuiButton:not(a):enabled:focus { z-index: 1; /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #0079a5; - box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #0079a5; + -webkit-box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4; + box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4; /* 3 */ } a.kuiPanelHeader .kuiButton:not(.kuiButton-isDisabled):focus { /* 1 */ @@ -3354,16 +2220,16 @@ main { /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #0079a5; - box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #0079a5; + -webkit-box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4; + box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4; /* 3 */ } .kuiPanelHeader .kuiButton--danger:not(a):enabled:focus { z-index: 1; /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #ff523c; - box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #ff523c; + -webkit-box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #BD271E; + box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #BD271E; /* 3 */ } a.kuiPanelHeader .kuiButton--danger:not(.kuiButton-isDisabled):focus { /* 1 */ @@ -3371,24 +2237,24 @@ main { /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #ff523c; - box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #ff523c; + -webkit-box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #BD271E; + box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #BD271E; /* 3 */ } .kuiPanelHeader .kuiSelect { border-color: #ffffff; } .kuiPanelHeader .kuiSelect:not(a):enabled:focus { outline: none; - border-color: #0079a5; } + border-color: #006BB4; } a.kuiPanelHeader .kuiSelect:not(.kuiButton-isDisabled):focus { /* 1 */ outline: none; - border-color: #0079a5; } + border-color: #006BB4; } /** * 1. This way we can use h1, h2, etc. */ .kuiPanelHeader__title { - font-size: 18px; + font-size: 18.0px; line-height: 1.5; margin: 0; /* 1 */ } @@ -3447,10 +2313,10 @@ main { padding: 10px; } .kuiPanelSimple { - -webkit-box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); - box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); + -webkit-box-shadow: 0 2px 2px -1px rgba(152, 162, 179, 0.3), 0 1px 5px -2px rgba(152, 162, 179, 0.3); + box-shadow: 0 2px 2px -1px rgba(152, 162, 179, 0.3), 0 1px 5px -2px rgba(152, 162, 179, 0.3); background-color: #FFF; - border: 1px solid #D9D9D9; + border: 1px solid #D3DAE6; border-radius: 4px; -webkit-box-flex: 1; -webkit-flex-grow: 1; @@ -3471,8 +2337,8 @@ main { -ms-flex-positive: 0; flex-grow: 0; } .theme-dark .kuiPanelSimple { - background-color: #777777; - border-color: #444444; } + background-color: #222; + border-color: #333; } .kuiPopover { display: inline-block; @@ -3510,9 +2376,9 @@ main { margin-left: -16px; border-left: 16px solid transparent; border-right: 16px solid transparent; - border-bottom: 16px solid #D9D9D9; } + border-bottom: 16px solid #D3DAE6; } .theme-dark .kuiPopover__panel:before { - border-bottom-color: #444444; } + border-bottom-color: #333; } .kuiPopover__panel:after { position: absolute; content: ""; @@ -3526,12 +2392,12 @@ main { border-right: 16px solid transparent; border-bottom: 16px solid #ffffff; } .theme-dark .kuiPopover__panel:after { - border-bottom-color: #777777; } + border-bottom-color: #222; } .kuiPopover--withTitle .kuiPopover__panel:after { - border-bottom-color: #e6e6e6; } + border-bottom-color: #F5F7FA; } .theme-dark .kuiPopover--withTitle .kuiPopover__panel:after { - border-bottom-color: #777777; } + border-bottom-color: #222; } .kuiPopover--anchorLeft .kuiPopover__panel { left: 0; @@ -3551,13 +2417,13 @@ main { left: auto; } .kuiPopoverTitle { - background-color: #e6e6e6; - border-bottom: 1px solid #D9D9D9; + background-color: #F5F7FA; + border-bottom: 1px solid #D3DAE6; padding: 12px; font-size: 14px; } .theme-dark .kuiPopoverTitle { - background-color: #777777; - border-color: #444444; + background-color: #222; + border-color: #333; color: #ffffff; } .kuiEmptyTablePrompt { @@ -3577,8 +2443,8 @@ main { padding: 30px; } .kuiEmptyTablePrompt__message { - font-size: 18px; - color: #666; + font-size: 18.0px; + color: #69707D; line-height: 1.5; } .kuiEmptyTablePrompt__actions { @@ -3595,16 +2461,16 @@ main { align-items: baseline; } .kuiStatusText--info { - color: #3fa8c7; } + color: #006BB4; } .kuiStatusText--success { - color: #417505; } + color: #017D73; } .kuiStatusText--warning { - color: #ec9800; } + color: #F5A700; } .kuiStatusText--error { - color: #A30000; } + color: #BD271E; } /** * 1. Set the image to be the same size as a font icon at 14px. @@ -3642,7 +2508,7 @@ main { */ .kuiTable { width: 100%; - border: 1px solid #D9D9D9; + border: 1px solid #D3DAE6; border-collapse: collapse; background-color: #FFF; } @@ -3664,7 +2530,7 @@ main { max-width: 20px; /* 1 */ line-height: 1.5; - color: #666; } + color: #69707D; } .kuiTableHeaderCell__liner { display: inline-block; @@ -3737,8 +2603,8 @@ main { text-align: left; max-width: 20px; /* 1 */ - color: #191E23; - border-top: 1px solid #D9D9D9; + color: #2D2D2D; + border-top: 1px solid #D3DAE6; vertical-align: middle; } /** @@ -3805,8 +2671,8 @@ main { .kuiTableInfo { padding: 30px; - font-size: 18px; - color: #666; + font-size: 18.0px; + color: #69707D; line-height: 1.5; } .kuiTabs { @@ -3814,9 +2680,9 @@ main { display: -webkit-flex; display: -ms-flexbox; display: flex; - border-bottom: 1px solid #D9D9D9; } + border-bottom: 1px solid #D3DAE6; } .theme-dark .kuiTabs { - border-bottom: 1px solid #777777; } + border-bottom: 1px solid #222; } /** * 1. Override button styles (some of which are from Bootstrap). @@ -3833,18 +2699,18 @@ main { cursor: pointer; padding: 10px 30px; font-size: 14px; - color: #666; + color: #69707D; background-color: #FFF; /* 1 */ - border: 1px solid #D9D9D9; + border: 1px solid #D3DAE6; border-radius: 0; /* 1 */ margin-bottom: -1px; /* 3 */ } .theme-dark .kuiTab { - color: #cecece; + color: #DDD; background-color: #333333; - border-color: #777777; } + border-color: #222; } .kuiTab + .kuiTab { border-left: none; } .kuiTab + .kuiTab:focus:not(.kuiTab-isSelected):not(:active) { @@ -3861,25 +2727,25 @@ main { /* 1 */ } .kuiTab:focus:not(.kuiTab-isSelected):not(:active) { z-index: 1; - color: #0079a5; - border: 1px solid #0079a5 !important; } + color: #006BB4; + border: 1px solid #006BB4 !important; } .theme-dark .kuiTab:focus:not(.kuiTab-isSelected):not(:active) { - color: #cecece; + color: #DDD; background-color: #333333; - border-color: #777777 !important; } + border-color: #222 !important; } .kuiTab:hover:not(.kuiTab-isSelected) { - color: #006E8A; + color: #004d81; background-color: #F2F2F2; } .theme-dark .kuiTab:hover:not(.kuiTab-isSelected) { color: #def2f6; - background-color: #777777; } + background-color: #222; } .kuiTab.kuiTab-isSelected { cursor: default; - color: #191E23; + color: #2D2D2D; background-color: #FFF; border-bottom-color: #FFF; } .theme-dark .kuiTab.kuiTab-isSelected { - color: #cecece; + color: #DDD; background-color: #333333; border-bottom-color: #333333; } @@ -3899,14 +2765,14 @@ main { /* 1 */ line-height: inherit; /* 1 */ - color: #191E23; } + color: #2D2D2D; } .kuiToggleButton:focus { - color: #191E23; } + color: #2D2D2D; } .kuiToggleButton:active { - color: #0079a5 !important; + color: #006BB4 !important; /* 2 */ } .kuiToggleButton:hover:not(:disabled) { - color: #006E8A !important; + color: #004d81 !important; /* 2 */ text-decoration: underline; } .kuiToggleButton:disabled { @@ -3924,7 +2790,7 @@ main { .kuiTogglePanelHeader { padding-bottom: 4px; margin-bottom: 15px; - border-bottom: 1px solid #D9D9D9; + border-bottom: 1px solid #D3DAE6; /** * 1. Allow the user to click anywhere on the header, not just on the button text. */ } @@ -3952,14 +2818,14 @@ main { padding: 10px; height: 50px; background-color: transparent; - border: solid 1px #D9D9D9; } + border: solid 1px #D3DAE6; } .kuiToolBar .kuiButton:not(a):enabled:focus { z-index: 1; /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #0079a5; - box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #0079a5; + -webkit-box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4; + box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4; /* 3 */ } a.kuiToolBar .kuiButton:not(.kuiButton-isDisabled):focus { /* 1 */ @@ -3967,16 +2833,16 @@ main { /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #0079a5; - box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #0079a5; + -webkit-box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4; + box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4; /* 3 */ } .kuiToolBar .kuiButton--danger:not(a):enabled:focus { z-index: 1; /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #ff523c; - box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #ff523c; + -webkit-box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #BD271E; + box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #BD271E; /* 3 */ } a.kuiToolBar .kuiButton--danger:not(.kuiButton-isDisabled):focus { /* 1 */ @@ -3984,18 +2850,18 @@ main { /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #ff523c; - box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #ff523c; + -webkit-box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #BD271E; + box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #BD271E; /* 3 */ } .kuiToolBar .kuiSelect { border-color: #ffffff; } .kuiToolBar .kuiSelect:not(a):enabled:focus { outline: none; - border-color: #0079a5; } + border-color: #006BB4; } a.kuiToolBar .kuiSelect:not(.kuiButton-isDisabled):focus { /* 1 */ outline: none; - border-color: #0079a5; } + border-color: #006BB4; } .kuiToolBarSection { display: -webkit-box; @@ -4064,7 +2930,7 @@ main { padding: 10px; height: 40px; background-color: #ffffff; - border: 1px solid #D9D9D9; } + border: 1px solid #D3DAE6; } .kuiToolBarFooterSection { display: -webkit-box; @@ -4165,17 +3031,17 @@ main { font-family: "Open Sans", Helvetica, Arial, sans-serif; /* 1 */ background-color: #FFFFFF; - color: #191E23; + color: #2D2D2D; border-radius: 4px; font-size: 1em; - border: 1px solid #D9D9D9; + border: 1px solid #D3DAE6; line-height: normal; /* 1 */ -webkit-transition: border-color 0.1s linear; transition: border-color 0.1s linear; } .kuiToolBarSearchBox__input:focus { outline: none; - border-color: #0079a5; } + border-color: #006BB4; } /* * 1. We don't want the text to take up two lines and overflow the ToolBar. @@ -4197,7 +3063,7 @@ main { /* 1 */ font-size: 22px; } .theme-dark .kuiTitle { - color: #cecece; } + color: #DDD; } /** * 1. Override h2, h3, etc. @@ -4207,9 +3073,9 @@ main { /* 1 */ font-weight: 400; /* 1 */ - font-size: 18px; } + font-size: 18.0px; } .theme-dark .kuiSubTitle { - color: #cecece; } + color: #DDD; } /** * 1. Override p. @@ -4222,7 +3088,7 @@ main { line-height: 1.5; font-size: 14px; } .theme-dark .kuiTextTitle { - color: #cecece; } + color: #DDD; } /** * 1. Override p. @@ -4235,7 +3101,7 @@ main { line-height: 1.5; font-size: 14px; } .theme-dark .kuiText { - color: #cecece; } + color: #DDD; } .kuiSubText { margin: 0; @@ -4243,24 +3109,24 @@ main { font-weight: 400; /* 1 */ line-height: 1.5; - font-size: 12px; } + font-size: 14px; } .theme-dark .kuiSubText { - color: #cecece; } + color: #DDD; } .kuiSubduedText { - color: #666 !important; } + color: #69707D !important; } .kuiVerticalRhythm + .kuiVerticalRhythm { - margin-top: 10px; } + margin-top: 16px; } .kuiVerticalRhythmSmall + .kuiVerticalRhythmSmall { - margin-top: 5px; } + margin-top: 8px; } .kuiVerticalRhythmLarge + .kuiVerticalRhythmLarge { - margin-top: 20px; } + margin-top: 24px; } .kuiVerticalRhythmXLarge + .kuiVerticalRhythmXLarge { - margin-top: 40px; } + margin-top: 32px; } .kuiView { background-color: #FFF; diff --git a/packages/kbn-ui-framework/doc_site/src/services/routes/routes.js b/packages/kbn-ui-framework/doc_site/src/services/routes/routes.js index 06085fe7bf1db..e7cd43d35e2b9 100644 --- a/packages/kbn-ui-framework/doc_site/src/services/routes/routes.js +++ b/packages/kbn-ui-framework/doc_site/src/services/routes/routes.js @@ -19,72 +19,26 @@ import Slugify from '../string/slugify'; -import AccessibilityExample - from '../../views/accessibility/accessibility_example'; - -import ActionItemExample - from '../../views/action_item/action_item_example'; - -import BadgeExample - from '../../views/badge/badge_example'; - import BarExample from '../../views/bar/bar_example'; import ButtonExample from '../../views/button/button_example'; -import CardExample - from '../../views/card/card_example'; - -import CodeEditor - from '../../views/code_editor/code_editor_example'; - import CollapseButtonExample from '../../views/collapse_button/collapse_button_example'; -import ColorPickerExample - from '../../views/color_picker/color_picker_example'; - -import ColumnExample - from '../../views/column/column_example'; - -import ContextMenuExample - from '../../views/context_menu/context_menu_example'; - -import EventExample - from '../../views/event/event_example'; - -import EventsSandbox - from '../../views/event/events_sandbox'; - import ExpressionExample from '../../views/expression/expression_example'; - -import FlexExample - from '../../views/flex/flex_example'; - import FormExample from '../../views/form/form_example'; import FormLayoutExample from '../../views/form_layout/form_layout_example'; -import GalleryExample - from '../../views/gallery/gallery_example'; - -import HeaderBarExample - from '../../views/header_bar/header_bar_example'; - -import HeaderBarSandbox - from '../../views/header_bar/header_bar_sandbox'; - import IconExample from '../../views/icon/icon_example'; -import InfoButtonExample - from '../../views/info_button/info_button_example'; - import InfoPanelExample from '../../views/info_panel/info_panel_example'; @@ -100,15 +54,9 @@ import MenuExample import MenuButtonExample from '../../views/menu_button/menu_button_example'; -import MicroButtonExample - from '../../views/micro_button/micro_button_example'; - import ModalExample from '../../views/modal/modal_example'; -import NoticeSandbox - from '../../views/notice/notice_sandbox'; - import PagerExample from '../../views/pager/pager_example'; @@ -150,17 +98,6 @@ import ViewSandbox // Component route names should match the component name exactly. const components = [{ - name: 'Accessibility', - component: AccessibilityExample, - hasReact: true, -}, { - name: 'ActionItem', - component: ActionItemExample, - hasReact: true, -}, { - name: 'Badge', - component: BadgeExample, -}, { name: 'Bar', component: BarExample, hasReact: true, @@ -168,48 +105,22 @@ const components = [{ name: 'Button', component: ButtonExample, hasReact: true, -}, { - name: 'Card', - component: CardExample, - hasReact: true, -}, { - name: 'CodeEditor', - component: CodeEditor, - hasReact: true, }, { name: 'CollapseButton', component: CollapseButtonExample, hasReact: true, -}, { - name: 'ColorPicker', - component: ColorPickerExample, - hasReact: true, -}, { - name: 'Column', - component: ColumnExample, }, { name: 'CollapseButton', component: CollapseButtonExample, hasReact: true, -}, { - name: 'ContextMenu', - component: ContextMenuExample, - hasReact: true, }, { name: 'EmptyTablePrompt', component: EmptyTablePromptExample, hasReact: true, -}, { - name: 'Event', - component: EventExample, - hasReact: true, }, { name: 'Expression', component: ExpressionExample, hasReact: true, -}, { - name: 'Flex', - component: FlexExample, }, { name: 'Form', component: FormExample, @@ -217,21 +128,9 @@ const components = [{ name: 'FormLayout', component: FormLayoutExample, hasReact: true, -}, { - name: 'Gallery', - component: GalleryExample, - hasReact: true, -}, { - name: 'HeaderBar', - component: HeaderBarExample, - hasReact: true, }, { name: 'Icon', component: IconExample, -}, { - name: 'InfoButton', - component: InfoButtonExample, - hasReact: true, }, { name: 'InfoPanel', component: InfoPanelExample, @@ -249,9 +148,6 @@ const components = [{ }, { name: 'MenuButton', component: MenuButtonExample, -}, { - name: 'MicroButton', - component: MicroButtonExample, }, { name: 'Modal', component: ModalExample, @@ -298,15 +194,6 @@ const components = [{ }]; const sandboxes = [{ - name: 'Events', - component: EventsSandbox, -}, { - name: 'HeaderBar with Table', - component: HeaderBarSandbox, -}, { - name: 'Notice', - component: NoticeSandbox, -}, { name: 'View', component: ViewSandbox, }]; diff --git a/packages/kbn-ui-framework/doc_site/src/views/accessibility/accessibility_example.js b/packages/kbn-ui-framework/doc_site/src/views/accessibility/accessibility_example.js deleted file mode 100644 index 6fa7333c9079f..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/accessibility/accessibility_example.js +++ /dev/null @@ -1,96 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { renderToHtml } from '../../services'; - -import { - GuideCode, - GuideDemo, - GuideLink, - GuidePage, - GuideSection, - GuideSectionTypes, - GuideText, -} from '../../components'; - -import KeyboardAccessible from './keyboard_accessible'; -import ScreenReaderOnly from './screen_reader'; - -const keyboardAccessibleSource = require('!!raw-loader!./keyboard_accessible'); -const keyboardAccessibleHtml = renderToHtml(KeyboardAccessible); - -const screenReaderOnlyHtml = renderToHtml(ScreenReaderOnly); -const screenReaderOnlySource = require('!!raw-loader!./screen_reader'); - -export default props => ( - - - - You can make interactive elements keyboard-accessible with this component. This is necessary - for non-button elements and a tags without - href attributes. - - - - - - - - - - This class can be useful to add accessibility to older designs that are - still in use, but it shouldn’t be a permanent solution. See {( - - http://webaim.org/techniques/css/invisiblecontent/ - - )} for more information. - - - - Use a screenreader to verify that there is a second paragraph in this example: - - - - - - - -); diff --git a/packages/kbn-ui-framework/doc_site/src/views/accessibility/keyboard_accessible.js b/packages/kbn-ui-framework/doc_site/src/views/accessibility/keyboard_accessible.js deleted file mode 100644 index c10d7b098033d..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/accessibility/keyboard_accessible.js +++ /dev/null @@ -1,75 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - KuiKeyboardAccessible, -} from '../../../../components'; - -// For custom components, we just need to make sure they delegate props to their rendered root -// element, e.g. onClick, tabIndex, and role. -const CustomComponent = ({ - children, - ...rest -}) => ( -
- {children} -
-); - -export default () => ( -
- -
window.alert('Div clicked')}> - Click this div -
- - - - window.alert('Anchor tag clicked')} - > - Click this anchor tag - - - - - window.alert('Custom component clicked')}> - Click this custom component - - - - -
window.alert('Outer KuiKeyboardAccessible clicked')}> - This KuiKeyboardAccessible contains another KuiKeyboardAccessible  - - - window.alert('Inner KuiKeyboardAccessible clicked')} - > - Clicking this inner one should call both onClick handlers - - -
- -
-); diff --git a/packages/kbn-ui-framework/doc_site/src/views/accessibility/screen_reader.js b/packages/kbn-ui-framework/doc_site/src/views/accessibility/screen_reader.js deleted file mode 100644 index 7c7867944c4d3..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/accessibility/screen_reader.js +++ /dev/null @@ -1,42 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - KuiScreenReaderOnly, -} from '../../../../components'; - - -export default () => ( -
-

- This is the first paragraph. It is visible to all. -

- -

- This is the second paragraph. It is hidden for sighted users but visible to screen readers. -

- -

- This is the third paragraph. It is visible to all. -

-
-); - diff --git a/packages/kbn-ui-framework/doc_site/src/views/action_item/action_item.js b/packages/kbn-ui-framework/doc_site/src/views/action_item/action_item.js deleted file mode 100644 index 1568970e32745..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/action_item/action_item.js +++ /dev/null @@ -1,41 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - KuiActionItem -} from '../../../../components'; - -export default () => ( - -

Item

-
- - - -
- -); diff --git a/packages/kbn-ui-framework/doc_site/src/views/action_item/action_item_example.js b/packages/kbn-ui-framework/doc_site/src/views/action_item/action_item_example.js deleted file mode 100644 index 0646ace4549b0..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/action_item/action_item_example.js +++ /dev/null @@ -1,80 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { renderToHtml } from '../../services'; - -import { - GuideDemo, - GuidePage, - GuideSection, - GuideSectionTypes, - GuideText, -} from '../../components'; - -import ActionItem from './action_item'; -const actionItemSource = require('!!raw-loader!./action_item'); -const actionItemHtml = renderToHtml(ActionItem); - -import ActionItemInMenu from './action_items_in_menu'; -const actionItemInMenuSource = require('!!raw-loader!./action_items_in_menu'); -const actionItemInMenuHtml = renderToHtml(ActionItemInMenu); - -export default props => ( - - - - Events can represent updates, logs, notifications, and status changes. - - - - - - - - - - You’ll typically want to present them within a Menu. - - - - - - - -); diff --git a/packages/kbn-ui-framework/doc_site/src/views/action_item/action_items_in_menu.js b/packages/kbn-ui-framework/doc_site/src/views/action_item/action_items_in_menu.js deleted file mode 100644 index d253ca84fbf84..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/action_item/action_items_in_menu.js +++ /dev/null @@ -1,81 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - KuiActionItem, - KuiMenu, - KuiMenuItem -} from '../../../../components'; - -export default () => ( - - - -

Item A

-
- - - -
- - - - - -

Item B

-
- - - -
- - - - - -

Item C

-
- - - -
- - - -); diff --git a/packages/kbn-ui-framework/doc_site/src/views/badge/badge_example.js b/packages/kbn-ui-framework/doc_site/src/views/badge/badge_example.js deleted file mode 100644 index 33b228f1713e6..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/badge/badge_example.js +++ /dev/null @@ -1,50 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - GuideDemo, - GuidePage, - GuideSection, - GuideSectionTypes, - GuideText, -} from '../../components'; - -const defaultHtml = require('./default_badge.html'); - -export default props => ( - - - - Use the Default Badge to signify a neutral status of a document or object. - - - - - -); diff --git a/packages/kbn-ui-framework/doc_site/src/views/badge/default_badge.html b/packages/kbn-ui-framework/doc_site/src/views/badge/default_badge.html deleted file mode 100644 index f813cc1e39ce9..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/badge/default_badge.html +++ /dev/null @@ -1,9 +0,0 @@ -
- - Reserved -
- -
- - Disabled -
diff --git a/packages/kbn-ui-framework/doc_site/src/views/card/card.js b/packages/kbn-ui-framework/doc_site/src/views/card/card.js deleted file mode 100644 index 88b49d208280c..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/card/card.js +++ /dev/null @@ -1,54 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - KuiCard, - KuiCardDescription, - KuiCardDescriptionTitle, - KuiCardDescriptionText, - KuiCardFooter, - KuiLinkButton -} from '../../../../components'; - -export default () => { - return ( - - - - Get a banana - - - - Bananas are yellow, fit easily in the hand, and have a lot of potassium or something. - - - - - - Banana! - - - - ); -}; diff --git a/packages/kbn-ui-framework/doc_site/src/views/card/card_example.js b/packages/kbn-ui-framework/doc_site/src/views/card/card_example.js deleted file mode 100644 index 1783f24f8af1a..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/card/card_example.js +++ /dev/null @@ -1,77 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { renderToHtml } from '../../services'; - -import { - GuideDemo, - GuidePage, - GuideSection, - GuideSectionTypes, - GuideText, -} from '../../components'; - -import Card from './card'; -const cardSource = require('!!raw-loader!./card'); -const cardHtml = renderToHtml(Card); - -import CardGroup from './card_group'; -const cardGroupSource = require('!!raw-loader!./card_group'); -const cardGroupHtml = renderToHtml(CardGroup); - -export default props => ( - - - - Cards expand to fill their container. To restrict a card’s width, define the width of its - container. - - - - - - - - - - - - - -); diff --git a/packages/kbn-ui-framework/doc_site/src/views/card/card_group.js b/packages/kbn-ui-framework/doc_site/src/views/card/card_group.js deleted file mode 100644 index 1f905d5402274..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/card/card_group.js +++ /dev/null @@ -1,180 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - KuiCardGroup, - KuiCard, - KuiCardDescription, - KuiCardDescriptionTitle, - KuiCardDescriptionText, - KuiCardFooter, - KuiLinkButton -} from '../../../../components'; - -export default () => { - /** - * These styles are just for demonstration purposes. It is recommended to use - * properly named classes to set the width in production code. - */ - const cardStyle = { - width: '400px' - }; - - return ( -
- - - - - Get a banana - - - - Bananas are yellow, fit easily in the hand, and have a lot of potassium or something. - - - - - - Banana! - - - - - - - - Get a pteradactyl - - - - Pteradactyls can fly, like to squawk all the time, and are difficult to spell correctly. - - - - - - Pteradactyl! - - - - - - - - Get a magnolia tree - - - - Magnolia trees have broad, waxy leaves which they shed year-round. - - - - - - Magnolia! - - - - - -
- - - - - - Get a banana - - - - Bananas are yellow, fit easily in the hand, and have a lot of potassium or something. - - - - - - Banana! - - - - - - - - Get a pteradactyl - - - - Pteradactyls can fly, like to squawk all the time, and are difficult to spell correctly. - - - - - - Pteradactyl! - - - - - - - - Get a magnolia tree - - - - Magnolia trees have broad, waxy leaves which they shed year-round. - - - - - - Magnolia! - - - - -
- ); -}; diff --git a/packages/kbn-ui-framework/doc_site/src/views/code_editor/code_editor.js b/packages/kbn-ui-framework/doc_site/src/views/code_editor/code_editor.js deleted file mode 100644 index 33991dddfbad5..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/code_editor/code_editor.js +++ /dev/null @@ -1,51 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React, { Component } from 'react'; - -import 'brace/mode/less'; -import 'brace/theme/github'; - -import { - KuiCodeEditor -} from '../../../../components'; - -export default class extends Component { - state = { - value: '' - }; - - onChange = (value) => { - this.setState({ value }); - }; - - render() { - return ( - console.log('KuiCodeEditor.onBlur() called')} - /> - ); - } -} diff --git a/packages/kbn-ui-framework/doc_site/src/views/code_editor/code_editor_example.js b/packages/kbn-ui-framework/doc_site/src/views/code_editor/code_editor_example.js deleted file mode 100644 index a491bfa8cf22b..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/code_editor/code_editor_example.js +++ /dev/null @@ -1,74 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - GuideDemo, - GuidePage, - GuideSection, - GuideSectionTypes, - GuideText, -} from '../../components'; - -import CodeEditor from './code_editor'; -const codeEditorSource = require('!!raw-loader!./code_editor'); - -import ReadOnly from './read_only'; -const readOnlySource = require('!!raw-loader!./read_only'); - -export default props => ( - - - -

- The KuiCodeEditor component is a wrapper around react-ace (which - itself wraps the ACE code editor), that adds an accessible keyboard mode - to it. You should always use this component instead of AceReact. -

-

- All parameters, that you specify are passed down to the - underlying AceReact component. -

- - - - - - - - - - - - - -); diff --git a/packages/kbn-ui-framework/doc_site/src/views/code_editor/read_only.js b/packages/kbn-ui-framework/doc_site/src/views/code_editor/read_only.js deleted file mode 100644 index 7283023f304ad..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/code_editor/read_only.js +++ /dev/null @@ -1,46 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React, { Component } from 'react'; - -import 'brace/mode/less'; -import 'brace/theme/github'; - -import { - KuiCodeEditor -} from '../../../../components'; - -export default class extends Component { - state = { - value: '

This code is read only

' - }; - - render() { - return ( - - ); - } -} diff --git a/packages/kbn-ui-framework/doc_site/src/views/color_picker/color_picker.js b/packages/kbn-ui-framework/doc_site/src/views/color_picker/color_picker.js deleted file mode 100644 index 734a229ecbe5f..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/color_picker/color_picker.js +++ /dev/null @@ -1,39 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { KuiColorPicker } from '../../../../components'; - -export class ColorPicker extends React.Component { - constructor(props) { - super(props); - this.state = { - color: '#ffffff' - }; - } - - handleChange = (value) => { - this.setState({ color: value }); - }; - - render() { - return ; - } -} diff --git a/packages/kbn-ui-framework/doc_site/src/views/color_picker/color_picker_clear.js b/packages/kbn-ui-framework/doc_site/src/views/color_picker/color_picker_clear.js deleted file mode 100644 index 188e50a007ccb..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/color_picker/color_picker_clear.js +++ /dev/null @@ -1,73 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - KuiColorPicker, - KuiFieldGroup, - KuiFieldGroupSection, - KuiKeyboardAccessible, -} from '../../../../components'; - -export class ColorPickerLabelAndClear extends React.Component { - constructor(props) { - super(props); - this.state = { - color: null - }; - } - - handleChange = (value) => { - this.setState({ color: value }); - }; - - resetColor = () => { - this.setState({ color: null }); - }; - - render() { - return ( - - - - - - - - - - -

- - - Reset - - -

- - - ); - } -} diff --git a/packages/kbn-ui-framework/doc_site/src/views/color_picker/color_picker_example.js b/packages/kbn-ui-framework/doc_site/src/views/color_picker/color_picker_example.js deleted file mode 100644 index ec5498a432df4..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/color_picker/color_picker_example.js +++ /dev/null @@ -1,88 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - GuideDemo, - GuidePage, - GuideSection, - GuideSectionTypes, -} from '../../components'; - -import { renderToHtml } from '../../services'; - -import { ColorPicker } from './color_picker'; -const colorPickerSource = require('!!raw-loader!./color_picker'); -const colorPickerHtml = renderToHtml(ColorPicker); - -import { ColorPickerLabelAndClear } from './color_picker_clear'; -const colorPickerClearSource = require('!!raw-loader!./color_picker_clear'); -const colorPickerClearHtml = renderToHtml(ColorPickerLabelAndClear); - -import { ColorPickerNoColorLabel } from './color_picker_no_color_label'; -const colorPickerNoColorLabelSource = require('!!raw-loader!./color_picker_no_color_label'); -const colorPickerNoColorLabelHtml = renderToHtml(ColorPickerNoColorLabel); - -export default props => ( - - - - - - - - - - - - - - - - - -); diff --git a/packages/kbn-ui-framework/doc_site/src/views/color_picker/color_picker_no_color_label.js b/packages/kbn-ui-framework/doc_site/src/views/color_picker/color_picker_no_color_label.js deleted file mode 100644 index 2143512198055..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/color_picker/color_picker_no_color_label.js +++ /dev/null @@ -1,59 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - KuiColorPicker, - KuiFieldGroup, - KuiFieldGroupSection, -} from '../../../../components'; - -export class ColorPickerNoColorLabel extends React.Component { - constructor(props) { - super(props); - this.state = { - color: '#00FFFF' - }; - } - - handleChange = (value) => { - this.setState({ color: value }); - }; - - render() { - return ( - - - - - - - - - - ); - } -} diff --git a/packages/kbn-ui-framework/doc_site/src/views/column/column_example.js b/packages/kbn-ui-framework/doc_site/src/views/column/column_example.js deleted file mode 100644 index efd3819790562..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/column/column_example.js +++ /dev/null @@ -1,56 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - GuideCode, - GuideDemo, - GuidePage, - GuideSection, - GuideSectionTypes, - GuideText, -} from '../../components'; - -const columnsHtml = require('./columns.html'); - -export default props => ( - - - - Note: Don’t use this. It’s subject to change as we evolve our grid system. - - - - This is a substitute grid system. It uses display: inline-block, so - you need to structure your markup to leave no whitespace between each column. - - - - - -); diff --git a/packages/kbn-ui-framework/doc_site/src/views/column/columns.html b/packages/kbn-ui-framework/doc_site/src/views/column/columns.html deleted file mode 100644 index 854ca91fbb278..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/column/columns.html +++ /dev/null @@ -1,47 +0,0 @@ -
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
diff --git a/packages/kbn-ui-framework/doc_site/src/views/context_menu/context_menu.js b/packages/kbn-ui-framework/doc_site/src/views/context_menu/context_menu.js deleted file mode 100644 index 0020b1bb52d37..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/context_menu/context_menu.js +++ /dev/null @@ -1,174 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React, { - Component, -} from 'react'; - -import { - KuiButton, - KuiContextMenu, - KuiFieldGroup, - KuiFieldGroupSection, - KuiPopover, -} from '../../../../components'; - -function flattenPanelTree(tree, array = []) { - array.push(tree); - - if (tree.items) { - tree.items.forEach(item => { - if (item.panel) { - flattenPanelTree(item.panel, array); - item.panel = item.panel.id; - } - }); - } - - return array; -} - -export default class extends Component { - constructor(props) { - super(props); - - this.state = { - isPopoverOpen: false, - }; - - const panelTree = { - id: 0, - title: 'View options', - items: [{ - name: 'Show fullscreen', - icon: ( - - ), - onClick: () => { this.closePopover(); window.alert('Show fullscreen'); }, - }, { - name: 'Share this dashboard', - icon: , - panel: { - id: 1, - title: 'Share this dashboard', - items: [{ - name: 'PDF reports', - icon: , - onClick: () => { this.closePopover(); window.alert('PDF reports'); }, - }, { - name: 'CSV reports', - icon: , - onClick: () => { this.closePopover(); window.alert('CSV reports'); }, - }, { - name: 'Embed code', - icon: , - panel: { - id: 2, - title: 'Embed code', - content: ( -
-
- - -
-
- -
- - - - - - -
- -
- Save -
-
- ), - }, - }, { - name: 'Permalinks', - icon: , - onClick: () => { this.closePopover(); window.alert('Permalinks'); }, - }], - }, - }, { - name: 'Edit / add panels', - icon: , - onClick: () => { this.closePopover(); window.alert('Edit / add panels'); }, - }, { - name: 'Display options', - icon: , - onClick: () => { this.closePopover(); window.alert('Display options'); }, - }, { - name: 'Disabled option', - icon: , - disabled: true, - onClick: () => { this.closePopover(); window.alert('Disabled option'); }, - }], - }; - - this.panels = flattenPanelTree(panelTree); - } - - onButtonClick = () => { - this.setState(prevState => ({ - isPopoverOpen: !prevState.isPopoverOpen, - })); - }; - - closePopover = () => { - this.setState({ - isPopoverOpen: false, - }); - }; - - render() { - const button = ( - - Click me to load a context menu - - ); - - return ( - - - - ); - } -} diff --git a/packages/kbn-ui-framework/doc_site/src/views/context_menu/context_menu_example.js b/packages/kbn-ui-framework/doc_site/src/views/context_menu/context_menu_example.js deleted file mode 100644 index a1e36a85bd1b4..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/context_menu/context_menu_example.js +++ /dev/null @@ -1,88 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { renderToHtml } from '../../services'; - -import { - GuideCode, - GuideDemo, - GuidePage, - GuideSection, - GuideSectionTypes, - GuideText, -} from '../../components'; - -import ContextMenu from './context_menu'; -const contextMenuSource = require('!!raw-loader!./context_menu'); -const contextMenuHtml = renderToHtml(ContextMenu); - -import SinglePanel from './single_panel'; -const singlePanelSource = require('!!raw-loader!./single_panel'); -const singlePanelHtml = renderToHtml(SinglePanel); - -export default props => ( - - - - KuiContextMenu is a nested menu system useful - for navigating complicated trees. It lives within a KuiPopover - which itself can be wrapped around any component (like a button in this example). - - - - - - - - - - - - - - You can put a single panel inside of the menu using the - KuiContextMenuPanel component directly. - - - - - - - -); diff --git a/packages/kbn-ui-framework/doc_site/src/views/context_menu/single_panel.js b/packages/kbn-ui-framework/doc_site/src/views/context_menu/single_panel.js deleted file mode 100644 index c9e736c3775ca..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/context_menu/single_panel.js +++ /dev/null @@ -1,103 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React, { - Component, -} from 'react'; - -import { - KuiButton, - KuiContextMenuPanel, - KuiContextMenuItem, - KuiPopover, -} from '../../../../components'; - -export default class extends Component { - constructor(props) { - super(props); - - this.state = { - isPopoverOpen: false, - }; - } - - onButtonClick = () => { - this.setState(prevState => ({ - isPopoverOpen: !prevState.isPopoverOpen, - })); - }; - - closePopover = () => { - this.setState({ - isPopoverOpen: false, - }); - }; - - render() { - const button = ( - - Click me to load a context menu - - ); - - const items = [ - ( - } - onClick={() => { this.closePopover(); window.alert('A'); }} - > - Option A - - ), ( - } - onClick={() => { this.closePopover(); window.alert('B'); }} - > - Option B - - ), ( - } - onClick={() => { this.closePopover(); window.alert('C'); }} - > - Option C - - ) - ]; - - return ( - - - - ); - } -} diff --git a/packages/kbn-ui-framework/doc_site/src/views/event/event.js b/packages/kbn-ui-framework/doc_site/src/views/event/event.js deleted file mode 100644 index ec3e79f90b77b..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/event/event.js +++ /dev/null @@ -1,46 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - KuiEvent, - KuiEventSymbol, - KuiEventBody, - KuiEventBodyMessage, - KuiEventBodyMetadata, -} from '../../../../components'; - -export default () => ( - - - - - - - - minimum_master_nodes setting of 1 is less than quorum of 2 - - - - August 4, 2021 - - - -); diff --git a/packages/kbn-ui-framework/doc_site/src/views/event/event_example.js b/packages/kbn-ui-framework/doc_site/src/views/event/event_example.js deleted file mode 100644 index df79517b0e0fd..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/event/event_example.js +++ /dev/null @@ -1,79 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; -import { renderToHtml } from '../../services'; - -import { - GuideDemo, - GuidePage, - GuideSection, - GuideSectionTypes, - GuideText, -} from '../../components'; - -import Event from './event'; -const eventSource = require('!!raw-loader!./event'); -const eventHtml = renderToHtml(Event); - -import EventMenu from './event_menu'; -const eventMenuSource = require('!!raw-loader!./event_menu'); -const eventMenuHtml = renderToHtml(EventMenu); - -export default props => ( - - - - Events can represent updates, logs, notifications, and status changes. - - - - - - - - - - You’ll typically want to present them within a Menu. - - - - - - - -); diff --git a/packages/kbn-ui-framework/doc_site/src/views/event/event_menu.js b/packages/kbn-ui-framework/doc_site/src/views/event/event_menu.js deleted file mode 100644 index c506e576606a2..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/event/event_menu.js +++ /dev/null @@ -1,88 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - KuiEvent, - KuiEventSymbol, - KuiEventBody, - KuiEventBodyMessage, - KuiEventBodyMetadata, - KuiMenu, - KuiMenuItem, -} from '../../../../components'; - -export default () => ( - - - - - - - - - - minimum_master_nodes setting of 1 is less than quorum of 2 - - - - August 4, 2021 02:23:28 - - - - - - - - - - - - - - Cluster state is red because 17 primary shards are unassigned - - - - August 3, 2021 12:00:54 - - - - - - - - - - - - - - Elasticsearch node version mismatches detected: 5.1.0 - - - - July 27, 2021 11:20:09 - - - - - -); diff --git a/packages/kbn-ui-framework/doc_site/src/views/event/events_sandbox.js b/packages/kbn-ui-framework/doc_site/src/views/event/events_sandbox.js deleted file mode 100644 index aad2be4dd06ac..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/event/events_sandbox.js +++ /dev/null @@ -1,52 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; -import { renderToHtml } from '../../services'; - -import { - GuideDemo, - GuideSandbox, - GuideSandboxCodeToggle, - GuideSectionTypes, -} from '../../components'; - -import EventsSandboxContent from './events_sandbox_content'; -const eventsSandboxContentSource = require('!!raw-loader!./events_sandbox_content'); -const eventsSandboxContentHtml = renderToHtml(EventsSandboxContent); - -export default props => ( - - - - - -); diff --git a/packages/kbn-ui-framework/doc_site/src/views/event/events_sandbox_content.js b/packages/kbn-ui-framework/doc_site/src/views/event/events_sandbox_content.js deleted file mode 100644 index 58b54e5c0803c..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/event/events_sandbox_content.js +++ /dev/null @@ -1,112 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - KuiEvent, - KuiEventSymbol, - KuiEventBody, - KuiEventBodyMessage, - KuiEventBodyMetadata, - KuiMenu, - KuiMenuItem, - KuiHeaderBar, - KuiHeaderBarSection -} from '../../../../components'; - -export default () => ( -
- {/* Constrained width, centered content */} -
-
- - - -

- Cluster of Almonds -

- - - - - - - - - - - - - - - - - margarine_masher_toad sitting of 1 is less than opossum of 2 - - - - August 4, 2021 02:23:28 - - - - - - - - - - - - - - Cluster stork is red because 17 pillory stars are unenamored - - - - August 3, 2021 12:00:54 - - - - - - - - - - - - - - Elastic band nematode vision marshmallow directed: 50,100 - - - - July 27, 2021 11:20:09 - - - - - -
-
-
-); diff --git a/packages/kbn-ui-framework/doc_site/src/views/flex/flex_example.js b/packages/kbn-ui-framework/doc_site/src/views/flex/flex_example.js deleted file mode 100644 index 9b4df7e98fe0e..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/flex/flex_example.js +++ /dev/null @@ -1,263 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { renderToHtml } from '../../services'; - -import { - GuideCode, - GuideDemo, - GuidePage, - GuideSection, - GuideSectionTypes, - GuideText, -} from '../../components'; - -import FlexGroup from './flex_group'; -const flexGroupSource = require('!!raw-loader!./flex_group'); -const flexGroupHtml = renderToHtml(FlexGroup); - -import FlexGroupWrap from './flex_group_wrap'; -const flexGroupWrapSource = require('!!raw-loader!./flex_group_wrap'); -const flexGroupWrapHtml = renderToHtml(FlexGroupWrap); - -import FlexItems from './flex_items'; -const flexItemsSource = require('!!raw-loader!./flex_items'); -const flexItemsHtml = renderToHtml(FlexItems); - -import FlexGutter from './flex_gutter'; -const flexGutterSource = require('!!raw-loader!./flex_gutter'); -const flexGutterHtml = renderToHtml(FlexGutter); - -import FlexGrowZero from './flex_grow_zero'; -const flexGrowZeroSource = require('!!raw-loader!./flex_grow_zero'); -const flexGrowZeroHtml = renderToHtml(FlexGrowZero); - -import FlexGrowNumeric from './flex_grow_numeric'; -const flexGrowNumericSource = require('!!raw-loader!./flex_grow_numeric'); -const flexGrowNumericHtml = renderToHtml(FlexGrowNumeric); - -import FlexJustify from './flex_justify'; -const flexJustifySource = require('!!raw-loader!./flex_justify'); -const flexJustifyHtml = renderToHtml(FlexJustify); - -import FlexGrid from './flex_grid'; -const flexGridSource = require('!!raw-loader!./flex_grid'); -const flexGridHtml = renderToHtml(FlexGrid); - -import FlexGridColumns from './flex_grid_columns'; -const flexGridColumnsSource = require('!!raw-loader!./flex_grid_columns'); -const flexGridColumnsHtml = renderToHtml(FlexGridColumns); - -import FlexNest from './flex_nest'; -const flexNestSource = require('!!raw-loader!./flex_nest'); -const flexNestHtml = renderToHtml(FlexNest); - -export default props => ( - - - - FlexGroup is useful for setting up layouts for a single row of - content. By default any FlexItem within FlexGroup will - stretch and grow to match their siblings. - - - - - - - - You can set wrap on FlexGroup if it - contains FlexItems with minimum widths, which you want to wrap as - the container becomes narrower. - - - - - - - - Same code as above. Notice that FlexItem creates equal width items - no matter the number of siblings. FlexGroup never wraps. - - - - - - - - Sometimes you do not want a FlexItem to grow. It - can be turned off on each item individually. - - - - - - - - You can specify a number between 1 and 10 for a FlexItem to - try to take up a proportional part of the flex box it is in. - - - - - - - - FlexGroups can also - use justifyContent and alignItemsprops - that accept normal flex-box paramenters. Below are some common scenarios, - where you need to separate two items, center justify a single one, or - center an item vertically. Note the usage - of FlexItems with grow=false so that they do not stretch. - - - - - - - - FlexGrid is a more rigid component that sets multiple, wrapping - rows of same width items. - - - - - - - - You can set a columns prop to specify - anywhere between 2-4 columns. Any more would likely break on laptop screens. - - - - - - - - FlexGroup and FlexGrid can nest - within themselves indefinitely. For example, here we turn off the growth on a - FlexGroup, then nest a grid inside of it. - - - - - - - - The gutterSize prop can be applied to either a - FlexGroup or a FlexGrid to adjust the - spacing between FlexItems. - - - - - -); diff --git a/packages/kbn-ui-framework/doc_site/src/views/flex/flex_grid.js b/packages/kbn-ui-framework/doc_site/src/views/flex/flex_grid.js deleted file mode 100644 index 13b9adb6165e5..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/flex/flex_grid.js +++ /dev/null @@ -1,41 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - KuiFlexGrid, - KuiFlexItem, -} from '../../../../components'; - -const ITEM_STYLE = { width: '300px' }; - -export default () => ( -
- -
One
 -
Two
 -
Three
 -
Four
 -
Five
 -
Six
 -
Seven
 - -
-); diff --git a/packages/kbn-ui-framework/doc_site/src/views/flex/flex_grid_columns.js b/packages/kbn-ui-framework/doc_site/src/views/flex/flex_grid_columns.js deleted file mode 100644 index f1066c1a9c064..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/flex/flex_grid_columns.js +++ /dev/null @@ -1,39 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - KuiFlexGrid, - KuiFlexItem, -} from '../../../../components'; - -export default () => ( -
- -
One
 -
Two
 -
Three
 -
Four
 -
Five
 -
Six
 -
Seven
 - -
-); diff --git a/packages/kbn-ui-framework/doc_site/src/views/flex/flex_group.js b/packages/kbn-ui-framework/doc_site/src/views/flex/flex_group.js deleted file mode 100644 index 9801871550e61..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/flex/flex_group.js +++ /dev/null @@ -1,37 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - KuiFlexGroup, - KuiFlexItem, -} from '../../../../components'; - -export default () => ( - - Content grid item - -

Another content grid item

-
-
-

Note how both of these are the same width and height despite having different content?

- - -); diff --git a/packages/kbn-ui-framework/doc_site/src/views/flex/flex_group_wrap.js b/packages/kbn-ui-framework/doc_site/src/views/flex/flex_group_wrap.js deleted file mode 100644 index 849fa6e71be88..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/flex/flex_group_wrap.js +++ /dev/null @@ -1,41 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - KuiFlexGroup, - KuiFlexItem, -} from '../../../../components'; - -export default () => ( - - - Min-width 300px - - - - Min-width 300px - - - - Min-width 300px - - -); diff --git a/packages/kbn-ui-framework/doc_site/src/views/flex/flex_grow_numeric.js b/packages/kbn-ui-framework/doc_site/src/views/flex/flex_grow_numeric.js deleted file mode 100644 index 08e966b8250b7..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/flex/flex_grow_numeric.js +++ /dev/null @@ -1,46 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - KuiFlexGroup, - KuiFlexItem, -} from '../../../../components'; - -export default () => ( -
- - 1 - 2
wraps content if necessary - 3
expands_to_fit_if_content_cannot_wrap - 4 - - -

- - - 6 - 3 - 1 - 3 - 6 - -
-); diff --git a/packages/kbn-ui-framework/doc_site/src/views/flex/flex_grow_zero.js b/packages/kbn-ui-framework/doc_site/src/views/flex/flex_grow_zero.js deleted file mode 100644 index c132f9f6c3b87..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/flex/flex_grow_zero.js +++ /dev/null @@ -1,34 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - KuiFlexGroup, - KuiFlexItem, -} from '../../../../components'; - -export default () => ( -
- - This item wont grow - But this item will. - -
-); diff --git a/packages/kbn-ui-framework/doc_site/src/views/flex/flex_gutter.js b/packages/kbn-ui-framework/doc_site/src/views/flex/flex_gutter.js deleted file mode 100644 index 8d0ca60ab9c7c..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/flex/flex_gutter.js +++ /dev/null @@ -1,76 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - KuiFlexGroup, - KuiFlexItem, -} from '../../../../components'; - -export default () => ( -
- - None - None - None - None - - -
-
- - - Small - Small - Small - Small - - -
-
- - - Medium - Medium - Medium - Medium - - -
-
- - - Large (default) - Large (default) - Large (default) - Large (default) - - -
-
- - - Extra Large - Extra Large - Extra Large - Extra Large - -
-); diff --git a/packages/kbn-ui-framework/doc_site/src/views/flex/flex_items.js b/packages/kbn-ui-framework/doc_site/src/views/flex/flex_items.js deleted file mode 100644 index 07763d5dcb6d1..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/flex/flex_items.js +++ /dev/null @@ -1,35 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - KuiFlexGroup, - KuiFlexItem, -} from '../../../../components'; - -export default () => ( - - One - Two - Three - Four - Five - -); diff --git a/packages/kbn-ui-framework/doc_site/src/views/flex/flex_justify.js b/packages/kbn-ui-framework/doc_site/src/views/flex/flex_justify.js deleted file mode 100644 index 48bdaa950fc09..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/flex/flex_justify.js +++ /dev/null @@ -1,54 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - KuiFlexGroup, - KuiFlexItem, -} from '../../../../components'; - -export default () => ( -
- - One here on the left - The other over here on the right. - - -

- - - I’m a single centered item! - - -

- - - -
-

I

-

am

-

really

-

tall

-
- - I am vertically centered! - -
-); diff --git a/packages/kbn-ui-framework/doc_site/src/views/flex/flex_nest.js b/packages/kbn-ui-framework/doc_site/src/views/flex/flex_nest.js deleted file mode 100644 index e7fab069e1abf..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/flex/flex_nest.js +++ /dev/null @@ -1,44 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - KuiFlexGroup, - KuiFlexItem, - KuiFlexGrid, -} from '../../../../components'; - -export default () => ( -
- - Group One - -
Group Two
-

- - Nested Grid One - Nested Grid Two - Nested Grid Three - Nested Grid Four - - - -
-); diff --git a/packages/kbn-ui-framework/doc_site/src/views/gallery/gallery.js b/packages/kbn-ui-framework/doc_site/src/views/gallery/gallery.js deleted file mode 100644 index 9d349330f72e5..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/gallery/gallery.js +++ /dev/null @@ -1,116 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - KuiGallery, - KuiGalleryItem, - KuiGalleryItemIcon, - KuiGalleryItemImage, - KuiGalleryItemLabel -} from '../../../../components'; - -export default () => { - /** - * These styles are just for demonstration purposes. It is recommended to use - * properly named classes instead of CSS properties in production code. - */ - const imageStyle = { - backgroundColor: 'lightgray' - }; - - return ( -
-
-

- Some items -

- - - - - - - Item A - - - - - - - - - - Item B - - - - window.alert('Clicked an item')}> - - - - Item C - - - - - - - - Item D - - - - - - - - Item E - - - -
- -
-
- Some more items -
- - - - - - - Item F - - - - - - - - Item G with a long label with ellipsis - - - -
-
- ); -}; diff --git a/packages/kbn-ui-framework/doc_site/src/views/gallery/gallery_example.js b/packages/kbn-ui-framework/doc_site/src/views/gallery/gallery_example.js deleted file mode 100644 index 8013d49772827..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/gallery/gallery_example.js +++ /dev/null @@ -1,66 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; -import { renderToHtml } from '../../services'; - -import { - GuideCode, - GuideDemo, - GuidePage, - GuideSection, - GuideSectionTypes, - GuideText -} from '../../components'; - -import Gallery from './gallery'; -const gallerySource = require('!!raw-loader!./gallery'); -const galleryHtml = renderToHtml(Gallery); - -export default props => ( - - - - Use GalleryItem to show a gallery item. - If you specify an href property the item will render - as an HTML a element. If not, it will be rendered - as a button and you can attach an - onClick listener to it. - - - - Note: You are not allowed to specify the href property - and the onClick property at the same time. - - - - - - - -); diff --git a/packages/kbn-ui-framework/doc_site/src/views/header_bar/header_bar.js b/packages/kbn-ui-framework/doc_site/src/views/header_bar/header_bar.js deleted file mode 100644 index 4dc36a77de3c8..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/header_bar/header_bar.js +++ /dev/null @@ -1,37 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - KuiHeaderBar, - KuiHeaderBarSection -} from '../../../../components'; - -export default () => { - return ( - - -

- Section 1 -

- - - ); -}; diff --git a/packages/kbn-ui-framework/doc_site/src/views/header_bar/header_bar_example.js b/packages/kbn-ui-framework/doc_site/src/views/header_bar/header_bar_example.js deleted file mode 100644 index 60ddf568313a0..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/header_bar/header_bar_example.js +++ /dev/null @@ -1,70 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; -import { renderToHtml } from '../../services'; - -import { - GuideDemo, - GuidePage, - GuideSection, - GuideSectionTypes, -} from '../../components'; - -import HeaderBar from './header_bar'; -const headerBarSource = require('!!raw-loader!./header_bar'); -const headerBarHtml = renderToHtml(HeaderBar); - -import HeaderBarTwoSections from './header_bar_two_sections'; -const headerBarTwoSectionsSource = require('!!raw-loader!./header_bar_two_sections'); -const headerBarTwoSectionsHtml = renderToHtml(HeaderBarTwoSections); - -export default props => ( - - - - - - - - - - - - - -); diff --git a/packages/kbn-ui-framework/doc_site/src/views/header_bar/header_bar_sandbox.js b/packages/kbn-ui-framework/doc_site/src/views/header_bar/header_bar_sandbox.js deleted file mode 100644 index c218ef0febc58..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/header_bar/header_bar_sandbox.js +++ /dev/null @@ -1,52 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; -import { renderToHtml } from '../../services'; - -import { - GuideDemo, - GuideSandbox, - GuideSandboxCodeToggle, - GuideSectionTypes, -} from '../../components'; - -import HeaderBarSandboxContent from './header_bar_sandbox_content'; -const headerBarSandboxContentSource = require('!!raw-loader!./header_bar_sandbox_content'); -const headerBarSandboxContentHtml = renderToHtml(HeaderBarSandboxContent); - -export default props => ( - - - - - -); diff --git a/packages/kbn-ui-framework/doc_site/src/views/header_bar/header_bar_sandbox_content.js b/packages/kbn-ui-framework/doc_site/src/views/header_bar/header_bar_sandbox_content.js deleted file mode 100644 index c03e4b667fcb1..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/header_bar/header_bar_sandbox_content.js +++ /dev/null @@ -1,260 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - KuiHeaderBar, - KuiHeaderBarSection -} from '../../../../components'; - -export default () => { - return ( -
- {/* Constrained width, centered content */} -
-
- - -

- Elysium stork -

- - - - - - - Rope Hoth - - - - - - {/* Table */} -
- {/* ToolBar */} -
-
-
-
- -
-
- -
- - - - - -
- -
-
- 1 – 20 of 33 -
- -
- - -
-
-
- - {/* Table */} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - Title - - Status - - Date created - - Orders of magnitude -
-
- -
- 		-
- Alligator -
- 		-
-
-
-
-
- Tue Dec 06 2016 12:56:15 GMT-0800 (PST) -
- 		-
- 1 -
-
-
- -
- 		-
- Boomerang -
- 		-
-
-
-
-
- Tue Dec 06 2016 12:56:15 GMT-0800 (PST) -
- 		-
- 10 -
-
-
- -
- 		- - -
-
-
-
-
- Tue Dec 06 2016 12:56:15 GMT-0800 (PST) -
- 		-
- 100 -
-
-
- -
- 		-
- Dog -
- 		-
-
-
-
-
- Tue Dec 06 2016 12:56:15 GMT-0800 (PST) -
- 		-
- 1000 -
-
- - {/* ToolBarFooter */} -
-
-
- 5 Items selected -
-
- -
-
- 1 – 20 of 33 -
- -
- - -
-
-
-
-
-
-
- ); -}; diff --git a/packages/kbn-ui-framework/doc_site/src/views/header_bar/header_bar_two_sections.js b/packages/kbn-ui-framework/doc_site/src/views/header_bar/header_bar_two_sections.js deleted file mode 100644 index d82b3a0c09e61..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/header_bar/header_bar_two_sections.js +++ /dev/null @@ -1,46 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - KuiHeaderBar, - KuiHeaderBarSection -} from '../../../../components'; - -export default () => { - return ( - - -

- Cluster Alerts -

- - - - - - - Red health - - - - - ); -}; diff --git a/packages/kbn-ui-framework/doc_site/src/views/info_button/info_button.js b/packages/kbn-ui-framework/doc_site/src/views/info_button/info_button.js deleted file mode 100644 index 522ed4b0759b4..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/info_button/info_button.js +++ /dev/null @@ -1,31 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - KuiInfoButton, -} from '../../../../components'; - -export default () => ( -
- -
-); - diff --git a/packages/kbn-ui-framework/doc_site/src/views/info_button/info_button_example.js b/packages/kbn-ui-framework/doc_site/src/views/info_button/info_button_example.js deleted file mode 100644 index 3794a3fb93d42..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/info_button/info_button_example.js +++ /dev/null @@ -1,61 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { renderToHtml } from '../../services'; - -import { - GuideDemo, - GuidePage, - GuideSection, - GuideSectionTypes, - GuideText, -} from '../../components'; - -import Example from './info_button'; - -const basicSource = require('!!raw-loader!./info_button'); -const basicHtml = renderToHtml(Example); - -export default props => ( - - - - This is just button with an info icon, used for a keyboard-accessible - trigger for helpful inline content. For example, use it as a tooltip - trigger. - - - - - - - - -); diff --git a/packages/kbn-ui-framework/doc_site/src/views/micro_button/micro_button.html b/packages/kbn-ui-framework/doc_site/src/views/micro_button/micro_button.html deleted file mode 100644 index c2e2bf2af6a3e..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/micro_button/micro_button.html +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/packages/kbn-ui-framework/doc_site/src/views/micro_button/micro_button_elements.html b/packages/kbn-ui-framework/doc_site/src/views/micro_button/micro_button_elements.html deleted file mode 100644 index 63a41c8c49afa..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/micro_button/micro_button_elements.html +++ /dev/null @@ -1,9 +0,0 @@ - - -  - - - - diff --git a/packages/kbn-ui-framework/doc_site/src/views/micro_button/micro_button_example.js b/packages/kbn-ui-framework/doc_site/src/views/micro_button/micro_button_example.js deleted file mode 100644 index 66aea530de5ca..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/micro_button/micro_button_example.js +++ /dev/null @@ -1,85 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - GuideDemo, - GuidePage, - GuideSection, - GuideSectionTypes, - GuideText, -} from '../../components'; - -const microButtonHtml = require('./micro_button.html'); -const microButtonGroupHtml = require('./micro_button_group.html'); -const microButtonElementsHtml = require('./micro_button_elements.html'); - -export default props => ( - - - - Use MicroButtons for inline actions inside of Table rows. - - - - - - - - se the MicroButtonGroup to emphasize the relationships between a set of MicroButtons, and - differentiate them from MicroButtons outside of the set. - - - - - - - - You can create a MicroButton using a button element or a link. - - - - - -); diff --git a/packages/kbn-ui-framework/doc_site/src/views/micro_button/micro_button_group.html b/packages/kbn-ui-framework/doc_site/src/views/micro_button/micro_button_group.html deleted file mode 100644 index bf0fd924087f5..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/micro_button/micro_button_group.html +++ /dev/null @@ -1,13 +0,0 @@ -
- - - - - -
diff --git a/packages/kbn-ui-framework/doc_site/src/views/notice/notice_sandbox.html b/packages/kbn-ui-framework/doc_site/src/views/notice/notice_sandbox.html deleted file mode 100644 index 94a81330456da..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/notice/notice_sandbox.html +++ /dev/null @@ -1,25 +0,0 @@ -
-
-
-

- - Notice title -

- -

- You can use the Notice component to present content in the center of the content area, - within a container with a narrow, fixed width. -

- -

- The pink color is just for demonstration purposes. -

-
-
-
diff --git a/packages/kbn-ui-framework/doc_site/src/views/notice/notice_sandbox.js b/packages/kbn-ui-framework/doc_site/src/views/notice/notice_sandbox.js deleted file mode 100644 index 84a7e2f058eea..0000000000000 --- a/packages/kbn-ui-framework/doc_site/src/views/notice/notice_sandbox.js +++ /dev/null @@ -1,46 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; - -import { - GuideDemo, - GuideSandbox, - GuideSandboxCodeToggle, - GuideSectionTypes, -} from '../../components'; - -const html = require('./notice_sandbox.html'); - -export default props => ( - - - - - -); diff --git a/packages/kbn-ui-framework/doc_site/src/views/table/table.js b/packages/kbn-ui-framework/doc_site/src/views/table/table.js index b8fde051de95c..096c65b909d7c 100644 --- a/packages/kbn-ui-framework/doc_site/src/views/table/table.js +++ b/packages/kbn-ui-framework/doc_site/src/views/table/table.js @@ -24,11 +24,6 @@ import React, { import classNames from 'classnames'; import { - KuiButton, - KuiButtonIcon, - KuiPopover, - KuiContextMenuPanel, - KuiContextMenuItem, KuiTable, KuiTableBody, KuiTableHeader, @@ -173,57 +168,6 @@ export class Table extends Component { {item.dateCreated} - - - this.togglePopover(item)} - icon={} - iconPosition="right" - > - Actions - - )} - isOpen={this.isPopoverOpen(item)} - closePopover={() => this.closePopover(item)} - panelPaddingSize="none" - withTitle - anchorPosition="right" - > - } - onClick={() => { this.closePopover(item); window.alert('Edit'); }} - > - Edit - - ), ( - } - onClick={() => { this.closePopover(item); window.alert('Share'); }} - > - Share - - ), ( - } - onClick={() => { this.closePopover(item); window.alert('Delete'); }} - > - Delete - - ) - ]} - /> - - ); @@ -274,10 +218,6 @@ export class Table extends Component { Date created - - - Actions - diff --git a/packages/kbn-ui-framework/src/components/accessibility/__snapshots__/keyboard_accessible.test.js.snap b/packages/kbn-ui-framework/src/components/accessibility/__snapshots__/keyboard_accessible.test.js.snap deleted file mode 100644 index 8b866e8df9079..0000000000000 --- a/packages/kbn-ui-framework/src/components/accessibility/__snapshots__/keyboard_accessible.test.js.snap +++ /dev/null @@ -1,22 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`KuiKeyboardAccessible adds accessibility attributes tabindex and role 1`] = ` -
-`; - -exports[`KuiKeyboardAccessible doesn't override pre-existing accessibility attributes role 1`] = ` -
-`; - -exports[`KuiKeyboardAccessible doesn't override pre-existing accessibility attributes tabindex 1`] = ` -
-`; diff --git a/packages/kbn-ui-framework/src/components/accessibility/__snapshots__/screen_reader.test.js.snap b/packages/kbn-ui-framework/src/components/accessibility/__snapshots__/screen_reader.test.js.snap deleted file mode 100644 index f74af41e6a17b..0000000000000 --- a/packages/kbn-ui-framework/src/components/accessibility/__snapshots__/screen_reader.test.js.snap +++ /dev/null @@ -1,17 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`KuiScreenReaderOnly adds an accessibility class to a child element and combines other classNames (foo, bar) given as props on the child 1`] = ` -

- This paragraph is not visible to sighted users but will be read by screenreaders. -

-`; - -exports[`KuiScreenReaderOnly adds an accessibility class to a child element when used with no props 1`] = ` -

- This paragraph is not visible to sighted users but will be read by screenreaders. -

-`; diff --git a/packages/kbn-ui-framework/src/components/accessibility/_index.scss b/packages/kbn-ui-framework/src/components/accessibility/_index.scss deleted file mode 100644 index b4ff9d8c34343..0000000000000 --- a/packages/kbn-ui-framework/src/components/accessibility/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import "screen_reader"; diff --git a/packages/kbn-ui-framework/src/components/accessibility/_screen_reader.scss b/packages/kbn-ui-framework/src/components/accessibility/_screen_reader.scss deleted file mode 100644 index 1d846635e21be..0000000000000 --- a/packages/kbn-ui-framework/src/components/accessibility/_screen_reader.scss +++ /dev/null @@ -1,8 +0,0 @@ -.kuiScreenReaderOnly { - position: absolute; - left: -10000px; - top: auto; - width: 1px; - height: 1px; - overflow: hidden; -} diff --git a/packages/kbn-ui-framework/src/components/accessibility/index.js b/packages/kbn-ui-framework/src/components/accessibility/index.js deleted file mode 100644 index 013dd334ade3f..0000000000000 --- a/packages/kbn-ui-framework/src/components/accessibility/index.js +++ /dev/null @@ -1,21 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -export { KuiKeyboardAccessible } from './keyboard_accessible'; -export { KuiScreenReaderOnly } from './screen_reader'; diff --git a/packages/kbn-ui-framework/src/components/accessibility/keyboard_accessible.js b/packages/kbn-ui-framework/src/components/accessibility/keyboard_accessible.js deleted file mode 100644 index 2b1965b029a63..0000000000000 --- a/packages/kbn-ui-framework/src/components/accessibility/keyboard_accessible.js +++ /dev/null @@ -1,120 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -/** - * Interactive elements must be able to receive focus. - * - * Ideally, this means using elements that are natively keyboard accessible (, - * , or