@elastic/eui 64.0.1 → 65.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (354) hide show
  1. package/dist/eui_charts_theme.js +330 -330
  2. package/dist/eui_charts_theme.js.map +1 -1
  3. package/dist/eui_theme_dark.css +160 -1248
  4. package/dist/eui_theme_dark.json +0 -32
  5. package/dist/eui_theme_dark.json.d.ts +0 -32
  6. package/dist/eui_theme_dark.min.css +1 -1
  7. package/dist/eui_theme_light.css +132 -1220
  8. package/dist/eui_theme_light.json +0 -32
  9. package/dist/eui_theme_light.json.d.ts +0 -32
  10. package/dist/eui_theme_light.min.css +1 -1
  11. package/es/components/accessibility/screen_reader_only/screen_reader_only.styles.js +2 -1
  12. package/es/components/accessibility/skip_link/skip_link.js +4 -54
  13. package/es/components/accordion/accordion.js +2 -1
  14. package/es/components/accordion/accordion.styles.js +17 -27
  15. package/es/components/badge/beta_badge/beta_badge.js +16 -3
  16. package/es/components/basic_table/basic_table.js +1 -1
  17. package/es/components/basic_table/collapsed_item_actions.js +1 -1
  18. package/es/components/basic_table/in_memory_table.js +1 -1
  19. package/es/components/beacon/beacon.styles.js +2 -2
  20. package/es/components/button/button.js +112 -215
  21. package/es/components/button/button_display/_button_display.js +90 -40
  22. package/es/components/button/button_display/_button_display.styles.js +7 -16
  23. package/es/components/button/button_display/_button_display_content.js +6 -3
  24. package/es/components/button/button_display/_button_display_content.styles.js +7 -17
  25. package/es/components/button/button_empty/button_empty.js +63 -53
  26. package/es/components/button/button_empty/index.js +1 -1
  27. package/es/components/button/button_group/button_group.js +4 -12
  28. package/es/components/button/button_group/button_group_button.js +14 -4
  29. package/es/components/button/button_icon/button_icon.js +61 -42
  30. package/es/components/call_out/call_out.styles.js +2 -1
  31. package/es/components/card/card.js +173 -89
  32. package/es/components/card/card.styles.js +136 -0
  33. package/es/components/card/card_select/card_select.js +133 -0
  34. package/es/components/card/card_select/card_select.styles.js +25 -0
  35. package/es/components/card/card_select/index.js +8 -0
  36. package/es/components/card/checkable_card/checkable_card.js +14 -9
  37. package/es/components/card/checkable_card/checkable_card.styles.js +22 -0
  38. package/es/components/comment_list/comment_event.styles.js +1 -1
  39. package/es/components/datagrid/body/data_grid_body.js +7 -6
  40. package/es/components/datagrid/body/data_grid_cell.js +13 -12
  41. package/es/components/datagrid/body/header/data_grid_header_cell.js +7 -6
  42. package/es/components/datagrid/body/header/data_grid_header_row.js +7 -6
  43. package/es/components/datagrid/data_grid.js +7 -6
  44. package/es/components/datagrid/utils/in_memory.js +7 -6
  45. package/es/components/date_picker/auto_refresh/auto_refresh.js +3 -2
  46. package/es/components/date_picker/super_date_picker/super_date_picker.js +17 -1
  47. package/es/components/date_picker/super_date_picker/super_update_button.js +11 -1
  48. package/es/components/expression/expression.styles.js +13 -31
  49. package/es/components/facet/facet_button.js +5 -4
  50. package/es/components/header/header_links/header_link.js +5 -3
  51. package/es/components/image/image_button.styles.js +1 -1
  52. package/es/components/image/image_wrapper.styles.js +3 -3
  53. package/es/components/link/link.styles.js +2 -2
  54. package/es/components/list_group/list_group.js +2 -1
  55. package/es/components/list_group/list_group_item.js +2 -1
  56. package/es/components/list_group/pinnable_list_group/pinnable_list_group.js +3 -2
  57. package/es/components/loading/loading_chart.styles.js +16 -26
  58. package/es/components/loading/loading_content.styles.js +2 -2
  59. package/es/components/loading/loading_logo.styles.js +4 -4
  60. package/es/components/loading/loading_spinner.styles.js +6 -6
  61. package/es/components/markdown_editor/markdown_editor_toolbar.js +2 -0
  62. package/es/components/modal/confirm_modal.js +1 -1
  63. package/es/components/notification/notification_event.js +5 -3
  64. package/es/components/notification/notification_event_read_button.js +2 -1
  65. package/es/components/page/page_template.js +2 -2
  66. package/es/components/page_template/inner/page_inner.styles.js +2 -2
  67. package/es/components/page_template/outer/page_outer.styles.js +3 -1
  68. package/es/components/pagination/pagination_button.js +5 -3
  69. package/es/components/panel/panel.js +1 -1
  70. package/es/components/panel/{panel.style.js → panel.styles.js} +2 -2
  71. package/es/components/progress/progress.styles.js +2 -2
  72. package/es/components/title/title.styles.js +2 -2
  73. package/es/components/toast/toast.styles.js +4 -4
  74. package/es/components/tool_tip/icon_tip.js +11 -1
  75. package/es/components/tool_tip/tool_tip.js +18 -6
  76. package/es/global_styling/functions/logicals.js +2 -72
  77. package/es/global_styling/functions/typography.js +2 -1
  78. package/es/global_styling/mixins/_color.js +1 -1
  79. package/es/global_styling/mixins/_helpers.js +7 -1
  80. package/es/global_styling/reset/global_styles.js +2 -1
  81. package/es/themes/amsterdam/global_styling/mixins/button.js +165 -16
  82. package/eui.d.ts +1062 -936
  83. package/i18ntokens.json +15 -15
  84. package/lib/components/accessibility/screen_reader_only/screen_reader_only.styles.js +3 -1
  85. package/lib/components/accessibility/skip_link/skip_link.js +4 -54
  86. package/lib/components/accordion/accordion.js +3 -1
  87. package/lib/components/accordion/accordion.styles.js +17 -26
  88. package/lib/components/badge/beta_badge/beta_badge.js +16 -3
  89. package/lib/components/basic_table/basic_table.js +1 -1
  90. package/lib/components/basic_table/collapsed_item_actions.js +1 -1
  91. package/lib/components/basic_table/in_memory_table.js +1 -1
  92. package/lib/components/beacon/beacon.styles.js +1 -1
  93. package/lib/components/button/button.js +124 -229
  94. package/lib/components/button/button_display/_button_display.js +94 -33
  95. package/lib/components/button/button_display/_button_display.styles.js +7 -16
  96. package/lib/components/button/button_display/_button_display_content.js +7 -3
  97. package/lib/components/button/button_display/_button_display_content.styles.js +7 -17
  98. package/lib/components/button/button_empty/button_empty.js +64 -54
  99. package/lib/components/button/button_empty/index.js +0 -6
  100. package/lib/components/button/button_group/button_group.js +4 -12
  101. package/lib/components/button/button_group/button_group_button.js +15 -4
  102. package/lib/components/button/button_icon/button_icon.js +61 -43
  103. package/lib/components/call_out/call_out.styles.js +2 -1
  104. package/lib/components/card/card.js +174 -88
  105. package/lib/components/card/card.styles.js +146 -0
  106. package/lib/components/card/card_select/card_select.js +144 -0
  107. package/lib/components/card/card_select/card_select.styles.js +27 -0
  108. package/lib/components/card/card_select/index.js +19 -0
  109. package/lib/components/card/checkable_card/checkable_card.js +16 -9
  110. package/lib/components/card/checkable_card/checkable_card.styles.js +33 -0
  111. package/lib/components/comment_list/comment_event.styles.js +1 -1
  112. package/lib/components/datagrid/body/data_grid_body.js +7 -6
  113. package/lib/components/datagrid/body/data_grid_cell.js +13 -12
  114. package/lib/components/datagrid/body/header/data_grid_header_cell.js +7 -6
  115. package/lib/components/datagrid/body/header/data_grid_header_row.js +7 -6
  116. package/lib/components/datagrid/data_grid.js +7 -6
  117. package/lib/components/datagrid/utils/in_memory.js +7 -6
  118. package/lib/components/date_picker/auto_refresh/auto_refresh.js +3 -2
  119. package/lib/components/date_picker/super_date_picker/super_date_picker.js +17 -1
  120. package/lib/components/date_picker/super_date_picker/super_update_button.js +11 -1
  121. package/lib/components/expression/expression.styles.js +12 -30
  122. package/lib/components/facet/facet_button.js +4 -3
  123. package/lib/components/header/header_links/header_link.js +5 -3
  124. package/lib/components/image/image_button.styles.js +1 -1
  125. package/lib/components/image/image_wrapper.styles.js +2 -2
  126. package/lib/components/link/link.styles.js +1 -1
  127. package/lib/components/list_group/list_group.js +2 -1
  128. package/lib/components/list_group/list_group_item.js +2 -1
  129. package/lib/components/list_group/pinnable_list_group/pinnable_list_group.js +3 -2
  130. package/lib/components/loading/loading_chart.styles.js +16 -25
  131. package/lib/components/loading/loading_content.styles.js +1 -1
  132. package/lib/components/loading/loading_logo.styles.js +4 -4
  133. package/lib/components/loading/loading_spinner.styles.js +5 -5
  134. package/lib/components/markdown_editor/markdown_editor_toolbar.js +2 -0
  135. package/lib/components/modal/confirm_modal.js +1 -1
  136. package/lib/components/notification/notification_event.js +5 -3
  137. package/lib/components/notification/notification_event_read_button.js +2 -1
  138. package/lib/components/page/page_template.js +1 -1
  139. package/lib/components/page_template/inner/page_inner.styles.js +2 -2
  140. package/lib/components/page_template/outer/page_outer.styles.js +4 -1
  141. package/lib/components/panel/panel.js +1 -1
  142. package/{optimize/lib/components/panel/panel.style.js → lib/components/panel/panel.styles.js} +1 -1
  143. package/lib/components/progress/progress.styles.js +2 -2
  144. package/lib/components/title/title.styles.js +1 -1
  145. package/lib/components/toast/toast.styles.js +4 -4
  146. package/lib/components/tool_tip/icon_tip.js +11 -1
  147. package/lib/components/tool_tip/tool_tip.js +18 -6
  148. package/lib/global_styling/functions/logicals.js +3 -72
  149. package/lib/global_styling/functions/typography.js +3 -1
  150. package/lib/global_styling/mixins/_color.js +1 -1
  151. package/lib/global_styling/mixins/_helpers.js +9 -2
  152. package/lib/global_styling/reset/global_styles.js +3 -1
  153. package/lib/themes/amsterdam/global_styling/mixins/button.js +178 -24
  154. package/optimize/es/components/accessibility/screen_reader_only/screen_reader_only.styles.js +2 -1
  155. package/optimize/es/components/accordion/accordion.js +2 -1
  156. package/optimize/es/components/accordion/accordion.styles.js +17 -27
  157. package/optimize/es/components/badge/beta_badge/beta_badge.js +6 -3
  158. package/optimize/es/components/beacon/beacon.styles.js +2 -2
  159. package/optimize/es/components/button/button.js +88 -100
  160. package/optimize/es/components/button/button_display/_button_display.js +67 -32
  161. package/optimize/es/components/button/button_display/_button_display.styles.js +7 -16
  162. package/optimize/es/components/button/button_display/_button_display_content.js +5 -2
  163. package/optimize/es/components/button/button_display/_button_display_content.styles.js +7 -17
  164. package/optimize/es/components/button/button_empty/button_empty.js +55 -47
  165. package/optimize/es/components/button/button_empty/index.js +1 -1
  166. package/optimize/es/components/button/button_group/button_group.js +2 -10
  167. package/optimize/es/components/button/button_group/button_group_button.js +13 -3
  168. package/optimize/es/components/button/button_icon/button_icon.js +54 -41
  169. package/optimize/es/components/call_out/call_out.styles.js +2 -1
  170. package/optimize/es/components/card/card.js +97 -31
  171. package/optimize/es/components/card/card.styles.js +136 -0
  172. package/optimize/es/components/card/{card_select.js → card_select/card_select.js} +16 -14
  173. package/optimize/es/components/card/card_select/card_select.styles.js +25 -0
  174. package/optimize/es/components/card/card_select/index.js +8 -0
  175. package/optimize/es/components/card/checkable_card/checkable_card.js +14 -9
  176. package/optimize/es/components/card/checkable_card/checkable_card.styles.js +22 -0
  177. package/optimize/es/components/comment_list/comment_event.styles.js +1 -1
  178. package/optimize/es/components/expression/expression.styles.js +13 -31
  179. package/optimize/es/components/facet/facet_button.js +5 -3
  180. package/optimize/es/components/image/image_button.styles.js +1 -1
  181. package/optimize/es/components/image/image_wrapper.styles.js +3 -3
  182. package/optimize/es/components/link/link.styles.js +2 -2
  183. package/optimize/es/components/loading/loading_chart.styles.js +16 -26
  184. package/optimize/es/components/loading/loading_content.styles.js +2 -2
  185. package/optimize/es/components/loading/loading_logo.styles.js +4 -4
  186. package/optimize/es/components/loading/loading_spinner.styles.js +6 -6
  187. package/optimize/es/components/markdown_editor/markdown_editor_toolbar.js +2 -0
  188. package/optimize/es/components/page/page_template.js +2 -2
  189. package/optimize/es/components/page_template/inner/page_inner.styles.js +2 -2
  190. package/optimize/es/components/page_template/outer/page_outer.styles.js +3 -1
  191. package/optimize/es/components/panel/panel.js +1 -1
  192. package/optimize/es/components/panel/{panel.style.js → panel.styles.js} +2 -2
  193. package/optimize/es/components/progress/progress.styles.js +2 -2
  194. package/optimize/es/components/title/title.styles.js +2 -2
  195. package/optimize/es/components/toast/toast.styles.js +4 -4
  196. package/optimize/es/components/tool_tip/tool_tip.js +7 -5
  197. package/optimize/es/global_styling/functions/logicals.js +2 -72
  198. package/optimize/es/global_styling/functions/typography.js +2 -1
  199. package/optimize/es/global_styling/mixins/_color.js +1 -1
  200. package/optimize/es/global_styling/mixins/_helpers.js +7 -1
  201. package/optimize/es/global_styling/reset/global_styles.js +2 -1
  202. package/optimize/es/themes/amsterdam/global_styling/mixins/button.js +155 -16
  203. package/optimize/lib/components/accessibility/screen_reader_only/screen_reader_only.styles.js +3 -1
  204. package/optimize/lib/components/accordion/accordion.js +3 -1
  205. package/optimize/lib/components/accordion/accordion.styles.js +17 -26
  206. package/optimize/lib/components/badge/beta_badge/beta_badge.js +6 -3
  207. package/optimize/lib/components/beacon/beacon.styles.js +1 -1
  208. package/optimize/lib/components/button/button.js +92 -103
  209. package/optimize/lib/components/button/button_display/_button_display.js +71 -25
  210. package/optimize/lib/components/button/button_display/_button_display.styles.js +7 -16
  211. package/optimize/lib/components/button/button_display/_button_display_content.js +6 -2
  212. package/optimize/lib/components/button/button_display/_button_display_content.styles.js +7 -17
  213. package/optimize/lib/components/button/button_empty/button_empty.js +59 -50
  214. package/optimize/lib/components/button/button_empty/index.js +0 -6
  215. package/optimize/lib/components/button/button_group/button_group.js +2 -10
  216. package/optimize/lib/components/button/button_group/button_group_button.js +15 -3
  217. package/optimize/lib/components/button/button_icon/button_icon.js +54 -41
  218. package/optimize/lib/components/call_out/call_out.styles.js +2 -1
  219. package/optimize/lib/components/card/card.js +97 -30
  220. package/optimize/lib/components/card/card.styles.js +146 -0
  221. package/optimize/lib/components/card/{card_select.js → card_select/card_select.js} +16 -14
  222. package/optimize/lib/components/card/card_select/card_select.styles.js +27 -0
  223. package/optimize/lib/components/card/card_select/index.js +19 -0
  224. package/optimize/lib/components/card/checkable_card/checkable_card.js +16 -9
  225. package/optimize/lib/components/card/checkable_card/checkable_card.styles.js +33 -0
  226. package/optimize/lib/components/comment_list/comment_event.styles.js +1 -1
  227. package/optimize/lib/components/expression/expression.styles.js +12 -30
  228. package/optimize/lib/components/facet/facet_button.js +4 -2
  229. package/optimize/lib/components/image/image_button.styles.js +1 -1
  230. package/optimize/lib/components/image/image_wrapper.styles.js +2 -2
  231. package/optimize/lib/components/link/link.styles.js +1 -1
  232. package/optimize/lib/components/loading/loading_chart.styles.js +16 -25
  233. package/optimize/lib/components/loading/loading_content.styles.js +1 -1
  234. package/optimize/lib/components/loading/loading_logo.styles.js +4 -4
  235. package/optimize/lib/components/loading/loading_spinner.styles.js +5 -5
  236. package/optimize/lib/components/markdown_editor/markdown_editor_toolbar.js +2 -0
  237. package/optimize/lib/components/page/page_template.js +1 -1
  238. package/optimize/lib/components/page_template/inner/page_inner.styles.js +2 -2
  239. package/optimize/lib/components/page_template/outer/page_outer.styles.js +4 -1
  240. package/optimize/lib/components/panel/panel.js +1 -1
  241. package/{test-env/components/panel/panel.style.js → optimize/lib/components/panel/panel.styles.js} +1 -1
  242. package/optimize/lib/components/progress/progress.styles.js +2 -2
  243. package/optimize/lib/components/title/title.styles.js +1 -1
  244. package/optimize/lib/components/toast/toast.styles.js +4 -4
  245. package/optimize/lib/components/tool_tip/tool_tip.js +7 -5
  246. package/optimize/lib/global_styling/functions/logicals.js +10 -73
  247. package/optimize/lib/global_styling/functions/typography.js +3 -1
  248. package/optimize/lib/global_styling/mixins/_color.js +1 -1
  249. package/optimize/lib/global_styling/mixins/_helpers.js +9 -2
  250. package/optimize/lib/global_styling/reset/global_styles.js +3 -1
  251. package/optimize/lib/themes/amsterdam/global_styling/mixins/button.js +170 -17
  252. package/package.json +2 -2
  253. package/src/components/badge/beta_badge/_beta_badge.scss +5 -1
  254. package/src/components/button/_index.scss +0 -1
  255. package/src/components/button/button_empty/_button_empty.scss +4 -48
  256. package/src/components/button/button_group/_button_group.scss +0 -1
  257. package/src/components/button/button_group/_button_group_button.scss +55 -83
  258. package/src/components/button/button_icon/_button_icon.scss +3 -103
  259. package/src/components/control_bar/_control_bar.scss +2 -6
  260. package/src/components/flyout/_flyout.scss +4 -1
  261. package/src/components/index.scss +0 -1
  262. package/src/global_styling/mixins/_button.scss +55 -11
  263. package/src/global_styling/mixins/_index.scss +0 -1
  264. package/src/themes/amsterdam/global_styling/mixins/_index.scss +0 -2
  265. package/src/themes/amsterdam/overrides/_header.scss +0 -2
  266. package/src/themes/amsterdam/overrides/_index.scss +0 -4
  267. package/test-env/components/accessibility/screen_reader_only/screen_reader_only.styles.js +3 -1
  268. package/test-env/components/accessibility/skip_link/skip_link.js +4 -54
  269. package/test-env/components/accordion/accordion.js +3 -1
  270. package/test-env/components/accordion/accordion.styles.js +17 -26
  271. package/test-env/components/badge/beta_badge/beta_badge.js +16 -3
  272. package/test-env/components/basic_table/basic_table.js +1 -1
  273. package/test-env/components/basic_table/collapsed_item_actions.js +1 -1
  274. package/test-env/components/basic_table/in_memory_table.js +1 -1
  275. package/test-env/components/beacon/beacon.styles.js +1 -1
  276. package/test-env/components/button/button.js +111 -225
  277. package/test-env/components/button/button_display/_button_display.js +93 -32
  278. package/test-env/components/button/button_display/_button_display.styles.js +7 -16
  279. package/test-env/components/button/button_display/_button_display_content.js +7 -3
  280. package/test-env/components/button/button_display/_button_display_content.styles.js +7 -17
  281. package/test-env/components/button/button_empty/button_empty.js +64 -53
  282. package/test-env/components/button/button_empty/index.js +0 -6
  283. package/test-env/components/button/button_group/button_group.js +4 -12
  284. package/test-env/components/button/button_group/button_group_button.js +16 -4
  285. package/test-env/components/button/button_icon/button_icon.js +61 -42
  286. package/test-env/components/call_out/call_out.styles.js +2 -1
  287. package/test-env/components/card/card.js +172 -88
  288. package/test-env/components/card/card.styles.js +146 -0
  289. package/test-env/components/card/card_select/card_select.js +141 -0
  290. package/test-env/components/card/card_select/card_select.styles.js +27 -0
  291. package/test-env/components/card/card_select/index.js +19 -0
  292. package/test-env/components/card/checkable_card/checkable_card.js +16 -9
  293. package/test-env/components/card/checkable_card/checkable_card.styles.js +33 -0
  294. package/test-env/components/comment_list/comment_event.styles.js +1 -1
  295. package/test-env/components/datagrid/body/data_grid_body.js +7 -6
  296. package/test-env/components/datagrid/body/data_grid_cell.js +13 -12
  297. package/test-env/components/datagrid/body/header/data_grid_header_cell.js +7 -6
  298. package/test-env/components/datagrid/body/header/data_grid_header_row.js +7 -6
  299. package/test-env/components/datagrid/data_grid.js +7 -6
  300. package/test-env/components/datagrid/utils/in_memory.js +7 -6
  301. package/test-env/components/date_picker/auto_refresh/auto_refresh.js +3 -2
  302. package/test-env/components/date_picker/super_date_picker/super_date_picker.js +17 -1
  303. package/test-env/components/date_picker/super_date_picker/super_update_button.js +11 -1
  304. package/test-env/components/expression/expression.styles.js +12 -30
  305. package/test-env/components/facet/facet_button.js +4 -3
  306. package/test-env/components/header/header_links/header_link.js +5 -3
  307. package/test-env/components/image/image_button.styles.js +1 -1
  308. package/test-env/components/image/image_wrapper.styles.js +2 -2
  309. package/test-env/components/link/link.styles.js +1 -1
  310. package/test-env/components/list_group/list_group.js +2 -1
  311. package/test-env/components/list_group/list_group_item.js +2 -1
  312. package/test-env/components/list_group/pinnable_list_group/pinnable_list_group.js +3 -2
  313. package/test-env/components/loading/loading_chart.styles.js +16 -25
  314. package/test-env/components/loading/loading_content.styles.js +1 -1
  315. package/test-env/components/loading/loading_logo.styles.js +4 -4
  316. package/test-env/components/loading/loading_spinner.styles.js +5 -5
  317. package/test-env/components/markdown_editor/markdown_editor_toolbar.js +2 -0
  318. package/test-env/components/modal/confirm_modal.js +1 -1
  319. package/test-env/components/notification/notification_event.js +5 -3
  320. package/test-env/components/notification/notification_event_read_button.js +2 -1
  321. package/test-env/components/page/page_template.js +1 -1
  322. package/test-env/components/page_template/inner/page_inner.styles.js +2 -2
  323. package/test-env/components/page_template/outer/page_outer.styles.js +4 -1
  324. package/test-env/components/panel/panel.js +1 -1
  325. package/{lib/components/panel/panel.style.js → test-env/components/panel/panel.styles.js} +1 -1
  326. package/test-env/components/progress/progress.styles.js +2 -2
  327. package/test-env/components/title/title.styles.js +1 -1
  328. package/test-env/components/toast/toast.styles.js +4 -4
  329. package/test-env/components/tool_tip/icon_tip.js +11 -1
  330. package/test-env/components/tool_tip/tool_tip.js +18 -6
  331. package/test-env/global_styling/functions/logicals.js +10 -73
  332. package/test-env/global_styling/functions/typography.js +3 -1
  333. package/test-env/global_styling/mixins/_color.js +1 -1
  334. package/test-env/global_styling/mixins/_helpers.js +9 -2
  335. package/test-env/global_styling/reset/global_styles.js +3 -1
  336. package/test-env/themes/amsterdam/global_styling/mixins/button.js +170 -17
  337. package/es/components/card/card_select.js +0 -176
  338. package/lib/components/card/card_select.js +0 -187
  339. package/src/components/button/_button.scss +0 -143
  340. package/src/components/button/button_icon/_variables.scss +0 -11
  341. package/src/components/card/_card.scss +0 -239
  342. package/src/components/card/_card_select.scss +0 -21
  343. package/src/components/card/_index.scss +0 -5
  344. package/src/components/card/_mixins.scss +0 -11
  345. package/src/components/card/_variables.scss +0 -25
  346. package/src/components/card/checkable_card/_checkable_card.scss +0 -29
  347. package/src/components/card/checkable_card/_index.scss +0 -1
  348. package/src/global_styling/mixins/_beta_badge.scss +0 -30
  349. package/src/themes/amsterdam/global_styling/mixins/_button.scss +0 -60
  350. package/src/themes/amsterdam/overrides/_button.scss +0 -119
  351. package/src/themes/amsterdam/overrides/_button_empty.scss +0 -20
  352. package/src/themes/amsterdam/overrides/_button_group.scss +0 -91
  353. package/src/themes/amsterdam/overrides/_card.scss +0 -6
  354. package/test-env/components/card/card_select.js +0 -184
@@ -1,187 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.EuiCardSelect = void 0;
7
- exports.euiCardSelectableColor = euiCardSelectableColor;
8
-
9
- var _react = _interopRequireDefault(require("react"));
10
-
11
- var _propTypes = _interopRequireDefault(require("prop-types"));
12
-
13
- var _classnames = _interopRequireDefault(require("classnames"));
14
-
15
- var _button_empty = require("../button/button_empty");
16
-
17
- var _i18n = require("../i18n");
18
-
19
- var _react2 = require("@emotion/react");
20
-
21
- var _excluded = ["className", "isSelected", "isDisabled", "color", "children"];
22
-
23
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
24
-
25
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
26
-
27
- function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
28
-
29
- function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
30
-
31
- var EuiCardSelect = function EuiCardSelect(_ref) {
32
- var className = _ref.className,
33
- _ref$isSelected = _ref.isSelected,
34
- isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
35
- isDisabled = _ref.isDisabled,
36
- color = _ref.color,
37
- children = _ref.children,
38
- rest = _objectWithoutProperties(_ref, _excluded);
39
-
40
- var child = euiCardSelectableText(isSelected, isDisabled, children);
41
- var selectClasses = (0, _classnames.default)('euiCardSelect', "euiCardSelect--".concat(euiCardSelectableColor(color, isSelected)), className);
42
- return (0, _react2.jsx)(_button_empty.EuiButtonEmpty, _extends({
43
- className: selectClasses,
44
- color: color || 'text',
45
- size: "xs",
46
- isDisabled: isDisabled,
47
- iconType: isSelected ? 'check' : undefined,
48
- role: "switch",
49
- "aria-checked": isSelected
50
- }, rest), child);
51
- };
52
-
53
- exports.EuiCardSelect = EuiCardSelect;
54
- EuiCardSelect.propTypes = {
55
- href: _propTypes.default.string,
56
- onClick: _propTypes.default.func,
57
-
58
- /**
59
- * Any of our named colors
60
- */
61
-
62
- /**
63
- * Any of our named colors
64
- */
65
- color: _propTypes.default.oneOf(["primary", "danger", "text", "ghost", "success", "warning"]),
66
- size: _propTypes.default.oneOf(["xs", "s", "m"]),
67
-
68
- /**
69
- * Ensure the text of the button sits flush to the left, right, or both sides of its container
70
- */
71
-
72
- /**
73
- * Ensure the text of the button sits flush to the left, right, or both sides of its container
74
- */
75
- flush: _propTypes.default.oneOf(["left", "right", "both"]),
76
-
77
- /**
78
- * `disabled` is also allowed
79
- */
80
-
81
- /**
82
- * `disabled` is also allowed
83
- */
84
- isDisabled: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.bool]),
85
-
86
- /**
87
- * Force disables the button and changes the icon to a loading spinner
88
- */
89
-
90
- /**
91
- * Force disables the button and changes the icon to a loading spinner
92
- */
93
- isLoading: _propTypes.default.bool,
94
-
95
- /**
96
- * Is in the selected state
97
- */
98
-
99
- /**
100
- * Applies the boolean state as the `aria-pressed` property to create a toggle button.
101
- * *Only use when the readable text does not change between states.*
102
- */
103
-
104
- /**
105
- * Applies the boolean state as the `aria-pressed` property to create a toggle button.
106
- * *Only use when the readable text does not change between states.*
107
- */
108
- isSelected: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.bool]),
109
- target: _propTypes.default.string,
110
- rel: _propTypes.default.string,
111
- type: _propTypes.default.oneOf(["button", "submit"]),
112
- buttonRef: _propTypes.default.any,
113
-
114
- /**
115
- * Object of props passed to the <span/> wrapping the button's content
116
- */
117
- contentProps: _propTypes.default.any,
118
-
119
- /**
120
- * Any `type` accepted by EuiIcon
121
- */
122
- iconType: _propTypes.default.oneOfType([_propTypes.default.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "alert", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "asterisk", "auditbeatApp", "beaker", "bell", "bellSlash", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "codeApp", "color", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crossInACircleFilled", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "discoverApp", "document", "documentEdit", "documentation", "documents", "dot", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "eql", "eraser", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "inputOutput", "inspect", "invert", "ip", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "mobile", "monitoringApp", "moon", "namespace", "nested", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipelineApp", "play", "playFilled", "plus", "plusInCircle", "plusInCircleFilled", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "snowflake", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spacesApp", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelionApp", "timeRefresh", "timeslider", "training", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDenseVector", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable"]).isRequired, _propTypes.default.string.isRequired, _propTypes.default.elementType.isRequired]),
123
-
124
- /**
125
- * Can only be one side `left` or `right`
126
- */
127
- iconSide: _propTypes.default.oneOf(["left", "right"]),
128
-
129
- /**
130
- * Object of props passed to the <span/> wrapping the content's text (only if the children is a `string`)
131
- * It doesn't apply to the icon.
132
- */
133
- textProps: _propTypes.default.shape({
134
- className: _propTypes.default.string,
135
- "aria-label": _propTypes.default.string,
136
- "data-test-subj": _propTypes.default.string,
137
- css: _propTypes.default.any,
138
- ref: _propTypes.default.any,
139
- "data-text": _propTypes.default.string
140
- }),
141
- iconSize: _propTypes.default.oneOf(["s", "m"]),
142
- className: _propTypes.default.string,
143
- "aria-label": _propTypes.default.string,
144
- "data-test-subj": _propTypes.default.string,
145
- css: _propTypes.default.any
146
- };
147
-
148
- function euiCardSelectableText(isSelected, isDisabled, children) {
149
- if (children) {
150
- return children;
151
- }
152
-
153
- var text;
154
-
155
- if (isSelected) {
156
- text = (0, _react2.jsx)(_i18n.EuiI18n, {
157
- token: "euiCardSelect.selected",
158
- default: "Selected"
159
- });
160
- } else if (isDisabled) {
161
- text = (0, _react2.jsx)(_i18n.EuiI18n, {
162
- token: "euiCardSelect.unavailable",
163
- default: "Unavailable"
164
- });
165
- } else {
166
- text = (0, _react2.jsx)(_i18n.EuiI18n, {
167
- token: "euiCardSelect.select",
168
- default: "Select"
169
- });
170
- }
171
-
172
- return text;
173
- }
174
-
175
- function euiCardSelectableColor(color, isSelected) {
176
- var calculatedColor;
177
-
178
- if (color) {
179
- calculatedColor = color;
180
- } else if (isSelected) {
181
- calculatedColor = 'success';
182
- } else {
183
- calculatedColor = 'text';
184
- }
185
-
186
- return calculatedColor;
187
- }
@@ -1,143 +0,0 @@
1
- // This file has lots of modifiers and is somewhat nesty by nature
2
- // sass-lint:disable nesting-depth
3
-
4
- // Our base button
5
- .euiButton {
6
- @include euiButton;
7
- @include euiSlightShadow;
8
-
9
- border-radius: $euiBorderRadius;
10
- min-width: $euiButtonMinWidth;
11
-
12
- .euiButton__content {
13
- padding: 0 ($euiSize - $euiSizeXS);
14
- }
15
-
16
- .euiButton__text {
17
- text-overflow: ellipsis;
18
- overflow: hidden;
19
- }
20
-
21
- &.euiButton--small {
22
- height: $euiButtonHeightSmall;
23
- line-height: $euiButtonHeightSmall; // prevents descenders from getting cut off
24
- }
25
-
26
- &:hover,
27
- &:active {
28
- @include euiSlightShadowHover;
29
- }
30
-
31
- &:not([class*='isDisabled']) {
32
- &:hover,
33
- &:focus,
34
- &:focus-within {
35
- background-color: transparentize($euiColorPrimary, .9);
36
- }
37
- }
38
-
39
- &.euiButton-isDisabled {
40
- @include euiButtonContentDisabled;
41
- color: $euiButtonColorDisabledText;
42
- border-color: $euiButtonColorDisabled;
43
-
44
- &.euiButton--fill {
45
- // Only increase the contrast of background color to text to 2.0 for disabled
46
- color: makeHighContrastColor($euiButtonColorDisabled, $euiButtonColorDisabled, 2);
47
- background-color: $euiButtonColorDisabled;
48
- border-color: $euiButtonColorDisabled;
49
-
50
- &:hover,
51
- &:focus,
52
- &:focus-within {
53
- background-color: $euiButtonColorDisabled;
54
- border-color: $euiButtonColorDisabled;
55
- }
56
- }
57
-
58
- &:hover,
59
- &:focus,
60
- &:focus-within {
61
- @include euiSlightShadow;
62
- text-decoration: none;
63
- }
64
- }
65
- }
66
-
67
- // Create button modifiers based upon the map.
68
- @each $name, $color in $euiButtonTypes {
69
- .euiButton--#{$name} {
70
- @if ($name == 'ghost') {
71
- // Ghost is unique and ALWAYS sits against a dark background.
72
- color: $color;
73
- } @else if ($name == 'text') {
74
- // The default color is lighter than the normal text color, make the it the text color
75
- color: $euiTextColor;
76
- } @else {
77
- // Other colors need to check their contrast against the page background color.
78
- color: makeHighContrastColor($color, $euiPageBackgroundColor);
79
- }
80
-
81
- border-color: $color;
82
-
83
- &.euiButton--fill {
84
- background-color: $color;
85
- border-color: $color;
86
-
87
- // The function makes that hexes safe for theming
88
- $fillTextColor: chooseLightOrDarkText($color, $euiColorGhost, $euiColorInk);
89
-
90
- color: $fillTextColor;
91
-
92
- &:not([class*='isDisabled']) {
93
- &:hover,
94
- &:focus,
95
- &:focus-within {
96
- background-color: darken($color, 5%);
97
- border-color: darken($color, 5%);
98
- }
99
- }
100
- }
101
-
102
- &:not([class*='isDisabled']) {
103
- $shadowColor: $euiShadowColor;
104
- @if ($name == 'ghost') {
105
- $shadowColor: $euiColorInk;
106
- } @else if (lightness($euiTextColor) < 50) {
107
- // Only if this is the light theme do we use the button variant color to colorize the shadow
108
- $shadowColor: desaturate($color, 60%);
109
- }
110
-
111
- @include euiSlightShadow($shadowColor);
112
-
113
- &:hover,
114
- &:focus,
115
- &:focus-within {
116
- @include euiSlightShadowHover($shadowColor);
117
- background-color: transparentize($color, .9);
118
- }
119
- }
120
- }
121
- }
122
-
123
- // Fix ghost/disabled look specifically
124
- .euiButton.euiButton-isDisabled.euiButton--ghost {
125
- &,
126
- &:hover,
127
- &:focus,
128
- &:focus-within {
129
- @include euiSlightShadow($euiColorInk);
130
- color: $euiButtonColorGhostDisabled;
131
- border-color: $euiButtonColorGhostDisabled;
132
- }
133
-
134
- &.euiButton--fill {
135
- background-color: $euiButtonColorGhostDisabled;
136
- color: makeHighContrastColor($euiButtonColorGhostDisabled, $euiButtonColorGhostDisabled, 2);
137
- }
138
- }
139
-
140
- .euiButton--fullWidth {
141
- display: block;
142
- width: 100%;
143
- }
@@ -1,11 +0,0 @@
1
- // Modifier naming and colors.
2
- $euiButtonIconTypes: (
3
- accent: $euiColorAccentText,
4
- danger: $euiColorDangerText,
5
- ghost: $euiColorGhost,
6
- primary: $euiColorPrimaryText,
7
- subdued: $euiTextSubduedColor,
8
- success: $euiColorSuccessText,
9
- text: $euiColorDarkShade,
10
- warning: $euiColorWarningText,
11
- );
@@ -1,239 +0,0 @@
1
- /**
2
- * 1. Footer is always at the bottom.
3
- * 2. Fix for IE where the image correctly resizes in width but doesn't collapse its height
4
- (https://github.com/philipwalton/flexbugs/issues/75#issuecomment-134702421)
5
- * 3. Horizontal layouts should always top left align no matter the textAlign prop
6
- */
7
-
8
- // EuiCard inherits most from EuiPanel, these styles are for content or other states
9
-
10
- .euiCard {
11
- display: flex;
12
- flex-direction: column;
13
- min-height: 1px; /* 2 */
14
-
15
- &.euiCard-isDisabled {
16
- // sass-lint:disable-block no-important
17
- cursor: not-allowed !important; // duplicate property due to Chrome bug
18
- transform: none !important;
19
- box-shadow: none !important;
20
- text-decoration: none !important;
21
- background-color: transparentize($euiButtonColorDisabled, .9) !important;
22
- color: $euiColorDisabledText;
23
-
24
- .euiCard__top {
25
- filter: grayscale(100%);
26
- }
27
-
28
- .euiCard__titleAnchor,
29
- .euiCard__titleButton {
30
- color: $euiColorDisabledText;
31
- cursor: inherit;
32
- }
33
-
34
- .euiCard__betaBadge:not(.euiBetaBadge-isClickable):not(.euiBetaBadge--hollow) {
35
- box-shadow: inset 0 0 0 1px $euiBorderColor;
36
- background: transparent;
37
- color: inherit;
38
- }
39
-
40
- .euiCard__betaBadge:not(.euiBetaBadge-isClickable).euiBetaBadge--hollow {
41
- background-color: $euiColorEmptyShade;
42
- }
43
- }
44
-
45
- &.euiCard--isClickable {
46
- display: flex; // Override panel
47
- width: 100%;
48
-
49
- &:not(.euiCard-isDisabled) {
50
- // Progressive Enhancement Only
51
- // The title will still underline to simulate focus in IE
52
- &:focus-within {
53
- @include euiSlightShadowHover;
54
- @include euiFocusRing('large');
55
- }
56
-
57
- &:focus,
58
- &:hover {
59
- .euiCard__title,
60
- .euiCard__titleAnchor,
61
- .euiCard__titleButton {
62
- text-decoration: underline;
63
- }
64
- }
65
- }
66
- }
67
-
68
- .euiCard__top,
69
- .euiCard__content,
70
- .euiCard__footer {
71
- width: 100%; // Fixes IE and ensures they always stretch no matter the flex layout
72
- }
73
-
74
- &.euiCard--leftAligned {
75
- text-align: left;
76
- align-items: flex-start;
77
-
78
- .euiCard__titleButton {
79
- text-align: left;
80
- }
81
- }
82
-
83
- &.euiCard--centerAligned {
84
- text-align: center;
85
- align-items: center;
86
- }
87
-
88
- &.euiCard--rightAligned {
89
- text-align: right;
90
- align-items: flex-end;
91
-
92
- .euiCard__titleButton {
93
- text-align: right;
94
- }
95
- }
96
-
97
- &.euiCard-isSelected {
98
- transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
99
- }
100
- }
101
-
102
- // This creates a bunch of sub selectors for the beta badge
103
- @include euiHasBetaBadge($selector: '.euiCard', $spacing: $euiCardSpacing);
104
-
105
- .euiCard__betaBadge.euiBetaBadge--hollow {
106
- background-color: $euiColorEmptyShade;
107
- }
108
-
109
- .euiCard--isSelectable {
110
- position: relative;
111
- }
112
-
113
-
114
- @each $modifier, $paddingAmount in $euiPanelPaddingModifiers {
115
- .euiCard[class*='#{$modifier}'] {
116
- padding: $paddingAmount;
117
-
118
- &.euiCard--isSelectable {
119
- padding-bottom: $paddingAmount + $euiCardBottomNodeHeight;
120
- }
121
-
122
- .euiCard__top {
123
-
124
- .euiCard__image {
125
- width: calc(100% + (#{$paddingAmount} * 2));
126
- left: $paddingAmount * -1;
127
- top: $paddingAmount * -1;
128
- margin-bottom: $paddingAmount * -1; // ensure the parent is only as tall as the image
129
-
130
- // IF both exist, position the icon centered on top of image
131
- + .euiCard__icon {
132
- transform: translate(-50%, -75%); // Fallback for IE as it doesn't accept calcs in translates
133
- transform: translate(-50%, calc(-50% + #{$paddingAmount * -1})); // sass-lint:disable-line no-duplicate-properties
134
- }
135
- }
136
- }
137
-
138
- }
139
- }
140
-
141
- .euiCard__top {
142
- flex-grow: 0; /* 1 */
143
- position: relative;
144
- min-height: 1px; /* 2 */
145
- font-size: 0;
146
-
147
- .euiCard__image {
148
- position: relative;
149
-
150
- // match border radius, minus 1px because it's inside a border
151
- border-top-left-radius: $euiBorderRadius - 1px;
152
- border-top-right-radius: $euiBorderRadius - 1px;
153
- overflow: hidden;
154
-
155
- img {
156
- width: 100%;
157
- }
158
-
159
- // IF both exist, position the icon centered on top of image
160
- + .euiCard__icon {
161
- position: absolute;
162
- top: 50%;
163
- left: 50%;
164
- }
165
- }
166
-
167
- .euiCard__icon {
168
- margin-top: $euiCardSpacing / 2;
169
- }
170
- }
171
-
172
- .euiCard__footer:not(:empty) {
173
- flex-grow: 0; /* 1 */
174
- margin-top: $euiCardSpacing;
175
- }
176
-
177
- // Without a border, the image should stand on it's own so it needs to have all corners rounded
178
- .euiCard[class*='transparent'] .euiCard__image {
179
- border-radius: $euiBorderRadius;
180
- }
181
-
182
- @each $name, $color in $euiCardSelectButtonBorders {
183
- .euiCard--isSelectable--#{$name}.euiCard-isSelected:not(.euiCard-isDisabled) {
184
- // Override .euiPanel.has--Border
185
- border-color: $color !important; // sass-lint:disable-line no-important
186
- }
187
- }
188
-
189
- // If an icon or image exists, add some space
190
- .euiCard__top + .euiCard__content {
191
- margin-top: $euiCardSpacing;
192
- }
193
-
194
- .euiCard__content {
195
- flex-grow: 1; /* 1 */
196
-
197
- .euiCard__description,
198
- .euiCard__children {
199
- margin-top: $euiCardSpacing / 2;
200
- }
201
-
202
- .euiCard__titleAnchor,
203
- .euiCard__titleButton {
204
- font: inherit;
205
- color: inherit;
206
- letter-spacing: inherit;
207
-
208
- &:focus {
209
- text-decoration: underline;
210
- }
211
- }
212
-
213
- }
214
-
215
- .euiCard.euiCard--horizontal {
216
- .euiCard__content,
217
- .euiCard__titleButton {
218
- text-align: left; /* 3 */
219
- }
220
-
221
- // Only change the flex direction if the card has an icon
222
- // otherwise the button tag won't properly align contents to top
223
- &.euiCard--hasIcon {
224
- flex-direction: row;
225
- // sass-lint:disable-block no-important
226
- align-items: flex-start !important; /* 3 */
227
-
228
- .euiCard__top,
229
- .euiCard__content {
230
- width: auto; // Makes sure the top shrinks and the content grows
231
- margin-top: 0;
232
- }
233
-
234
- .euiCard__top .euiCard__icon {
235
- margin-top: 0;
236
- margin-right: $euiSize;
237
- }
238
- }
239
- }
@@ -1,21 +0,0 @@
1
- .euiCardSelect {
2
- // Option select button that expands to sides and bottom
3
- @include euiCardBottomNodePosition;
4
- font-weight: $euiFontWeightBold;
5
-
6
- // Create button modifiers based upon the map.
7
- @each $name, $color in $euiCardSelectButtonBackgrounds {
8
- &--#{$name}:enabled {
9
- // Override EuiButtonEmpty's focus background
10
- background-color: $color !important; // sass-lint:disable-line no-important
11
- // Custom success text color since it doesn't exist on EuiButtonEmpty
12
- @if ($name == 'success') {
13
- color: makeHighContrastColor($euiColorSuccess, $color);
14
- }
15
- }
16
- }
17
-
18
- &:disabled {
19
- background-color: $euiPageBackgroundColor;
20
- }
21
- }
@@ -1,5 +0,0 @@
1
- @import 'variables';
2
- @import 'mixins';
3
- @import 'card';
4
- @import 'card_select';
5
- @import 'checkable_card/index';
@@ -1,11 +0,0 @@
1
- @mixin euiCardBottomNodePosition {
2
- position: absolute;
3
- bottom: 0;
4
- left: 0;
5
- height: $euiCardBottomNodeHeight !important; // sass-lint:disable-line no-important -- To override .euiButtonEmpty--xSmall
6
- width: 100%;
7
- overflow: hidden;
8
- // Subtract 1px from border radius since it sits inside a border-radius
9
- border-bottom-left-radius: $euiBorderRadius - 1px;
10
- border-bottom-right-radius: $euiBorderRadius - 1px;
11
- }
@@ -1,25 +0,0 @@
1
- $euiCardSpacing: map-get($euiPanelPaddingModifiers, 'paddingMedium');
2
- $euiCardBottomNodeHeight: $euiSizeXXL;
3
-
4
- $euiCardSelectButtonBorders: (
5
- text: $euiColorSuccess, // Default for selected
6
- primary: $euiColorPrimary,
7
- success: $euiColorSuccess,
8
- danger: $euiColorDanger,
9
- ghost: $euiColorDarkShade,
10
- );
11
-
12
- $euiCardSelectButtonBackgrounds: (
13
- text: $euiColorLightestShade, // Default for unselected
14
- primary: tintOrShade($euiColorPrimary, 90%, 70%),
15
- success: tintOrShade($euiColorSuccess, 90%, 70%),
16
- danger: tintOrShade($euiColorDanger, 90%, 70%),
17
- ghost: $euiColorDarkShade,
18
- );
19
-
20
- $euiCardPaddingModifiers: (
21
- 'paddingNone': 0,
22
- 'paddingSmall': $euiSizeS,
23
- 'paddingMedium': $euiSize,
24
- 'paddingLarge': $euiSizeL
25
- ) !default;
@@ -1,29 +0,0 @@
1
- $euiCheckableCardPadding: map-get($euiPanelPaddingModifiers, 'paddingMedium');
2
-
3
- .euiCheckableCard {
4
- transition: border-color $euiAnimSpeedNormal ease-in;
5
-
6
- &:not(.euiCheckableCard-isDisabled) {
7
- &.euiCheckableCard-isChecked {
8
- border-color: $euiColorPrimary;
9
- }
10
- }
11
- }
12
-
13
- .euiCheckableCard__label {
14
- cursor: pointer;
15
- // Expand the label to cover the whole panel for easier click target
16
- display: block;
17
- width: calc(100% + #{$euiCheckableCardPadding * 2});
18
- padding: $euiCheckableCardPadding;
19
- margin: -$euiCheckableCardPadding;
20
- }
21
-
22
- .euiCheckableCard__label-isDisabled {
23
- color: $euiFormControlDisabledColor;
24
- cursor: not-allowed;
25
- }
26
-
27
- .euiCheckableCard__children {
28
- margin-top: $euiSize;
29
- }