@elastic/eui 89.0.0 → 90.0.0

package/dist/eui_theme_dark.css

@@ -1574,247 +1574,6 @@ The following files still use the Sass version:
   color: #FFF;
 }
 
-.euiContextMenu {
-  width: 256px;
-  max-width: 100%;
-  position: relative;
-  overflow: hidden;
-  transition: height 150ms cubic-bezier(0.694, 0.0482, 0.335, 1);
-  border-radius: 6px;
-}
-.euiContextMenu .euiContextMenu__content {
-  padding: 8px;
-}
-
-/**
-  * 1. When there are multiple ContextMenuPanels, the ContextMenu will absolutely
-  *    position them. ContextMenuPanel will break the layout of a Popover if it's
-  *    absolutely positioned by default.
-  */
-.euiContextMenu__panel {
-  position: absolute; /* 1 */
-}
-
-.euiContextMenu__icon {
-  margin-right: 8px;
-}
-
-.euiContextMenuPanel {
-  width: 100%;
-  visibility: visible;
-  outline-offset: -2px;
-}
-.euiContextMenuPanel:focus {
-  outline: none;
-}
-.euiContextMenuPanel.euiContextMenuPanel-txInLeft {
-  pointer-events: none;
-  -webkit-animation: euiContextMenuPanelTxInLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
-          animation: euiContextMenuPanelTxInLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
-  -webkit-animation-fill-mode: forwards;
-          animation-fill-mode: forwards;
-}
-.euiContextMenuPanel.euiContextMenuPanel-txOutLeft {
-  pointer-events: none;
-  -webkit-animation: euiContextMenuPanelTxOutLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
-          animation: euiContextMenuPanelTxOutLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
-  -webkit-animation-fill-mode: forwards;
-          animation-fill-mode: forwards;
-}
-.euiContextMenuPanel.euiContextMenuPanel-txInRight {
-  pointer-events: none;
-  -webkit-animation: euiContextMenuPanelTxInRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
-          animation: euiContextMenuPanelTxInRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
-  -webkit-animation-fill-mode: forwards;
-          animation-fill-mode: forwards;
-}
-.euiContextMenuPanel.euiContextMenuPanel-txOutRight {
-  pointer-events: none;
-  -webkit-animation: euiContextMenuPanelTxOutRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
-          animation: euiContextMenuPanelTxOutRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
-  -webkit-animation-fill-mode: forwards;
-          animation-fill-mode: forwards;
-}
-
-.euiContextMenuPanel--next {
-  -webkit-transform: translateX(256px);
-          transform: translateX(256px);
-  visibility: hidden;
-}
-
-.euiContextMenuPanel--previous {
-  -webkit-transform: translateX(-256px);
-          transform: translateX(-256px);
-  visibility: hidden;
-}
-
-.euiContextMenuPanelTitle {
-  overflow-wrap: break-word !important;
-  word-break: break-word;
-  color: #DFE5EF;
-  font-size: 14px;
-  font-size: 1rem;
-  line-height: 1.7142857143rem;
-  font-weight: 700;
-  padding: 12px;
-  width: 100%;
-  text-align: left;
-  outline-offset: -2px;
-  border-bottom: 1px solid #343741;
-}
-.euiContextMenuPanelTitle:enabled:hover, .euiContextMenuPanelTitle:enabled:focus {
-  text-decoration: underline;
-}
-.euiContextMenuPanelTitle--small {
-  padding: 6px 8px;
-}
-
-@-webkit-keyframes euiContextMenuPanelTxInLeft {
-  0% {
-    -webkit-transform: translateX(256px);
-            transform: translateX(256px);
-  }
-  100% {
-    -webkit-transform: translateX(0);
-            transform: translateX(0);
-  }
-}
-
-@keyframes euiContextMenuPanelTxInLeft {
-  0% {
-    -webkit-transform: translateX(256px);
-            transform: translateX(256px);
-  }
-  100% {
-    -webkit-transform: translateX(0);
-            transform: translateX(0);
-  }
-}
-@-webkit-keyframes euiContextMenuPanelTxOutLeft {
-  0% {
-    -webkit-transform: translateX(0);
-            transform: translateX(0);
-  }
-  100% {
-    -webkit-transform: translateX(-256px);
-            transform: translateX(-256px);
-  }
-}
-@keyframes euiContextMenuPanelTxOutLeft {
-  0% {
-    -webkit-transform: translateX(0);
-            transform: translateX(0);
-  }
-  100% {
-    -webkit-transform: translateX(-256px);
-            transform: translateX(-256px);
-  }
-}
-@-webkit-keyframes euiContextMenuPanelTxInRight {
-  0% {
-    -webkit-transform: translateX(-256px);
-            transform: translateX(-256px);
-  }
-  100% {
-    -webkit-transform: translateX(0);
-            transform: translateX(0);
-  }
-}
-@keyframes euiContextMenuPanelTxInRight {
-  0% {
-    -webkit-transform: translateX(-256px);
-            transform: translateX(-256px);
-  }
-  100% {
-    -webkit-transform: translateX(0);
-            transform: translateX(0);
-  }
-}
-@-webkit-keyframes euiContextMenuPanelTxOutRight {
-  0% {
-    -webkit-transform: translateX(0);
-            transform: translateX(0);
-  }
-  100% {
-    -webkit-transform: translateX(256px);
-            transform: translateX(256px);
-  }
-}
-@keyframes euiContextMenuPanelTxOutRight {
-  0% {
-    -webkit-transform: translateX(0);
-            transform: translateX(0);
-  }
-  100% {
-    -webkit-transform: translateX(256px);
-            transform: translateX(256px);
-  }
-}
-.euiContextMenuItem {
-  display: block;
-  padding: 12px;
-  width: 100%;
-  text-align: left;
-  color: #DFE5EF;
-  outline-offset: -2px;
-}
-.euiContextMenuItem:hover, .euiContextMenuItem:focus {
-  text-decoration: underline;
-}
-.euiContextMenuItem:focus {
-  background-color: rgba(54, 162, 239, 0.2);
-}
-.euiContextMenuItem.euiContextMenuItem-isDisabled {
-  color: #515761;
-  cursor: default;
-}
-.euiContextMenuItem.euiContextMenuItem-isDisabled:hover, .euiContextMenuItem.euiContextMenuItem-isDisabled:focus {
-  text-decoration: none;
-}
-.euiContextMenuItem--small {
-  padding: 6px 8px;
-}
-.euiContextMenuItem--small .euiContextMenuItem__text {
-  font-size: 14px;
-  font-size: 1rem;
-  line-height: 1.7142857143rem;
-}
-
-.euiContextMenuItem__inner {
-  display: -webkit-flex;
-  display: flex;
-}
-
-.euiContextMenuItem__text {
-  -webkit-flex-grow: 1;
-          flex-grow: 1;
-  overflow: hidden;
-}
-
-.euiContextMenuItem__arrow {
-  -webkit-align-self: flex-end;
-          align-self: flex-end;
-}
-
-.euiContextMenu__itemLayout {
-  display: -webkit-flex;
-  display: flex;
-  -webkit-align-items: center;
-          align-items: center;
-}
-.euiContextMenu__itemLayout.euiContextMenu__itemLayout--bottom {
-  -webkit-align-items: flex-end;
-          align-items: flex-end;
-}
-.euiContextMenu__itemLayout.euiContextMenu__itemLayout--top {
-  -webkit-align-items: flex-start;
-          align-items: flex-start;
-}
-.euiContextMenu__itemLayout .euiContextMenu__icon {
-  -webkit-flex-shrink: 0;
-          flex-shrink: 0;
-}
-
 .euiControlBar {
   background: #000;
   color: #a9aaad;
@@ -2277,7 +2036,8 @@ The following files still use the Sass version:
   text-align: center;
 }
 
-.euiDatePopoverContent {
+.euiDatePopoverContent,
+.euiDatePopoverContent .react-datepicker {
   width: 400px;
   max-width: 100%;
 }
@@ -2906,16 +2666,6 @@ The following files still use the Sass version:
   z-index: 2;
   pointer-events: none;
 }
-.euiDataGridRowCell:hover {
-  /*
-   * For some incredibly bizarre reason, Safari doesn't correctly update the flex
-   * width of the content (when rows are an undefined height/single flex row),
-   * which causes the action icons to overlap & makes the content less readable.
-   * This workaround "animation" forces a rerender of the flex content width
-   *
-   * TODO: Remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=258539 is resolved
-   */
-}
 .euiDataGridRowCell:hover .euiDataGridRowCell__actionButtonIcon {
   -webkit-animation-duration: 90ms;
           animation-duration: 90ms;
@@ -2928,20 +2678,6 @@ The following files still use the Sass version:
   -webkit-animation-fill-mode: forwards;
           animation-fill-mode: forwards;
 }
-.euiDataGridRowCell:hover .euiDataGridRowCell__expandContent {
-  -webkit-animation-name: euiDataGridCellActionsSafariWorkaround;
-          animation-name: euiDataGridCellActionsSafariWorkaround;
-  -webkit-animation-duration: 1000ms;
-          animation-duration: 1000ms;
-  -webkit-animation-delay: 340ms;
-          animation-delay: 340ms;
-  -webkit-animation-iteration-count: 1;
-          animation-iteration-count: 1;
-  -webkit-animation-fill-mode: forwards;
-          animation-fill-mode: forwards;
-  -webkit-animation-timing-function: linear;
-          animation-timing-function: linear;
-}
 .euiDataGridRowCell:focus .euiDataGridRowCell__actionButtonIcon, .euiDataGridRowCell:focus-within .euiDataGridRowCell__actionButtonIcon, .euiDataGridRowCell.euiDataGridRowCell--open .euiDataGridRowCell__actionButtonIcon {
   -webkit-animation: none;
           animation: none;
@@ -2966,22 +2702,6 @@ The following files still use the Sass version:
 .euiDataGridRowCell.euiDataGridRowCell--capitalize {
   text-transform: capitalize;
 }
-.euiDataGridRowCell .euiDataGridRowCell__definedHeight {
-  overflow-wrap: break-word !important;
-  word-break: break-word;
-  -webkit-flex-grow: 1;
-          flex-grow: 1;
-}
-.euiDataGridRowCell:not(.euiDataGridRowCell--controlColumn) .euiDataGridRowCell__content,
-.euiDataGridRowCell:not(.euiDataGridRowCell--controlColumn) .euiDataGridRowCell__truncate, .euiDataGridRowCell:not(.euiDataGridRowCell--controlColumn).euiDataGridRowCell__truncate,
-.euiDataGridRowCell:not(.euiDataGridRowCell--controlColumn) .euiDataGridRowCell__expandContent {
-  max-width: 100%;
-  overflow: hidden !important;
-  text-overflow: ellipsis !important;
-  white-space: nowrap !important;
-  overflow: hidden;
-  white-space: nowrap;
-}
 
 .euiDataGridRowCell__popover {
   scrollbar-color: rgba(152, 162, 179, 0.5) transparent;
@@ -3008,46 +2728,48 @@ The following files still use the Sass version:
   background-color: transparent;
 }
 
-.euiDataGridRowCell__expandFlex {
+.euiDataGridRowCell__contentWrapper {
   position: relative;
+  height: 100%;
+}
+
+.euiDataGridRowCell__defaultHeight {
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: baseline;
           align-items: baseline;
-  height: 100%;
-}
-.euiDataGridRowCell--controlColumn .euiDataGridRowCell__expandFlex {
-  -webkit-align-items: center;
-          align-items: center;
+  max-width: 100%;
 }
-
-.euiDataGridRowCell__expandContent {
+.euiDataGridRowCell__defaultHeight .euiDataGridRowCell__content {
   -webkit-flex-grow: 1;
           flex-grow: 1;
 }
+.euiDataGridRowCell__defaultHeight .euiDataGridRowCell__actions {
+  -webkit-flex-grow: 0;
+          flex-grow: 0;
+}
+.euiDataGridRowCell--controlColumn .euiDataGridRowCell__defaultHeight {
+  height: 100%;
+  -webkit-align-items: center;
+          align-items: center;
+}
 
-.euiDataGridRowCell__contentByHeight {
-  -webkit-flex-grow: 1;
-          flex-grow: 1;
+.euiDataGridRowCell__numericalHeight [data-euiportal],
+.euiDataGridRowCell__numericalHeight .euiPopover,
+.euiDataGridRowCell__numericalHeight .euiPopover__anchor {
   height: 100%;
 }
 
-.euiDataGridRowCell__expandActions {
+.euiDataGridRowCell__actions {
   display: -webkit-flex;
   display: flex;
 }
-
-.euiDataGridRowCell__expandContent + .euiDataGridRowCell__expandActions {
-  -webkit-flex-grow: 0;
-          flex-grow: 0;
-}
-
-.euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandActions {
-  background-color: #1D1E24;
+.euiDataGridRowCell__actions--overlay {
   position: absolute;
   right: 0;
   top: 0;
   padding: 6px 0;
+  background-color: #1D1E24;
 }
 
 .euiDataGridRowCell__actionButtonIcon {
@@ -3060,17 +2782,13 @@ The following files still use the Sass version:
   border: none;
 }
 
-.euiDataGrid--stripes .euiDataGridRow--striped {
-  background-color: #25262E;
-}
-.euiDataGrid--stripes .euiDataGridRow--striped .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandActions {
+.euiDataGrid--stripes .euiDataGridRow--striped,
+.euiDataGrid--stripes .euiDataGridRow--striped .euiDataGridRowCell__actions--overlay {
   background-color: #25262E;
 }
 
-.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover {
-  background-color: #2E2D25;
-}
-.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandActions {
+.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover,
+.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover .euiDataGridRowCell__actions--overlay {
   background-color: #2E2D25;
 }
 
@@ -3103,10 +2821,10 @@ The following files still use the Sass version:
   padding: 8px;
 }
 
-.euiDataGrid--fontSizeSmall.euiDataGrid--paddingSmall .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandActions {
+.euiDataGrid--fontSizeSmall.euiDataGrid--paddingSmall .euiDataGridRowCell__actions--overlay {
   padding: 2px 0;
 }
-.euiDataGrid--fontSizeSmall.euiDataGrid--paddingSmall .euiDataGridRowCell__expandContent + .euiDataGridRowCell__expandActions {
+.euiDataGrid--fontSizeSmall.euiDataGrid--paddingSmall .euiDataGridRowCell__defaultHeight .euiDataGridRowCell__actions {
   -webkit-transform: translateY(1px);
           transform: translateY(1px);
 }
@@ -3132,30 +2850,6 @@ The following files still use the Sass version:
     width: 12px;
   }
 }
-@-webkit-keyframes euiDataGridCellActionsSafariWorkaround {
-  from {
-    width: 100%;
-    -webkit-flex-basis: 100%;
-            flex-basis: 100%;
-  }
-  to {
-    width: auto;
-    -webkit-flex-basis: auto;
-            flex-basis: auto;
-  }
-}
-@keyframes euiDataGridCellActionsSafariWorkaround {
-  from {
-    width: 100%;
-    -webkit-flex-basis: 100%;
-            flex-basis: 100%;
-  }
-  to {
-    width: auto;
-    -webkit-flex-basis: auto;
-            flex-basis: auto;
-  }
-}
 .euiDataGrid__controls {
   background: #141519;
   position: relative;
@@ -6615,230 +6309,6 @@ The following files still use the Sass version:
   stroke: #343741;
 }
 
-.euiPageContent {
-  width: 100%;
-  min-width: 0;
-}
-.euiPageContent.euiPageContent--borderRadiusNone {
-  border-left-width: 0;
-  border-right-width: 0;
-  border-bottom-width: 0;
-}
-.euiPageContent.euiPageContent--verticalCenter {
-  -webkit-align-self: center;
-          align-self: center;
-  margin-top: auto;
-  margin-bottom: auto;
-  -webkit-flex-grow: 0;
-          flex-grow: 0;
-}
-.euiPageContent.euiPageContent--horizontalCenter {
-  width: auto;
-  margin-left: auto;
-  margin-right: auto;
-  -webkit-flex-grow: 0;
-          flex-grow: 0;
-}
-
-.euiPageContentBody--restrictWidth-default, .euiPageContentBody--restrictWidth-custom {
-  margin-left: auto;
-  margin-right: auto;
-  width: 100%;
-}
-.euiPageContentBody--restrictWidth-default {
-  max-width: 1200px;
-}
-
-.euiPageContentBody--paddingSmall {
-  padding: 8px;
-}
-
-.euiPageContentBody--paddingMedium {
-  padding: 16px;
-}
-
-.euiPageContentBody--paddingLarge {
-  padding: 24px;
-}
-
-.euiPageContentHeader {
-  display: -webkit-flex;
-  display: flex;
-  -webkit-flex-direction: row;
-          flex-direction: row;
-  -webkit-justify-content: space-between;
-          justify-content: space-between;
-  -webkit-align-items: center;
-          align-items: center;
-}
-.euiPageContent[class*=paddingSmall] .euiPageContentHeader {
-  margin-bottom: 8px;
-}
-.euiPageContent[class*=paddingMedium] .euiPageContentHeader {
-  margin-bottom: 16px;
-}
-.euiPageContent[class*=paddingLarge] .euiPageContentHeader {
-  margin-bottom: 24px;
-}
-
-@media only screen and (max-width: 574px) {
-  .euiPageContentHeader--responsive {
-    -webkit-flex-direction: column;
-            flex-direction: column;
-    -webkit-align-items: flex-start;
-            align-items: flex-start;
-  }
-}
-@media only screen and (min-width: 575px) and (max-width: 767px) {
-  .euiPageContentHeader--responsive {
-    -webkit-flex-direction: column;
-            flex-direction: column;
-    -webkit-align-items: flex-start;
-            align-items: flex-start;
-  }
-}
-.euiPageContentHeaderSection + .euiPageContentHeaderSection {
-  margin-left: 32px;
-}
-
-@media only screen and (max-width: 574px) {
-  .euiPageContent[class*=paddingSmall] .euiPageContentHeader--responsive .euiPageContentHeaderSection + .euiPageContentHeaderSection {
-    margin-left: 0;
-    margin-top: 4px;
-  }
-  .euiPageContent[class*=paddingMedium] .euiPageContentHeader--responsive .euiPageContentHeaderSection + .euiPageContentHeaderSection {
-    margin-left: 0;
-    margin-top: 8px;
-  }
-  .euiPageContent[class*=paddingLarge] .euiPageContentHeader--responsive .euiPageContentHeaderSection + .euiPageContentHeaderSection {
-    margin-left: 0;
-    margin-top: 12px;
-  }
-}
-@media only screen and (min-width: 575px) and (max-width: 767px) {
-  .euiPageContent[class*=paddingSmall] .euiPageContentHeader--responsive .euiPageContentHeaderSection + .euiPageContentHeaderSection {
-    margin-left: 0;
-    margin-top: 4px;
-  }
-  .euiPageContent[class*=paddingMedium] .euiPageContentHeader--responsive .euiPageContentHeaderSection + .euiPageContentHeaderSection {
-    margin-left: 0;
-    margin-top: 8px;
-  }
-  .euiPageContent[class*=paddingLarge] .euiPageContentHeader--responsive .euiPageContentHeaderSection + .euiPageContentHeaderSection {
-    margin-left: 0;
-    margin-top: 12px;
-  }
-}
-/**
- * Note: Margin is added in _page.scss when EuiPage has `paddingSize`
- * 1. Prevent side bar width from changing when content width changes.
- */
-.euiPageSideBar {
-  min-width: 240px;
-  -webkit-flex: 0 1 0%;
-          flex: 0 1 0%; /* 1 */
-}
-
-.euiPageSideBar--paddingSmall {
-  padding: 8px;
-}
-
-.euiPageSideBar--paddingMedium {
-  padding: 16px;
-}
-
-.euiPageSideBar--paddingLarge {
-  padding: 24px;
-}
-
-@media only screen and (max-width: 574px) {
-  .euiPageSideBar {
-    width: 100%;
-  }
-}
-@media only screen and (min-width: 575px) and (max-width: 767px) {
-  .euiPageSideBar {
-    width: 100%;
-  }
-}
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-  .euiPageSideBar--sticky {
-    scrollbar-color: rgba(152, 162, 179, 0.5) transparent;
-    scrollbar-width: thin;
-    overflow-y: auto;
-    -webkit-flex-grow: 1;
-            flex-grow: 1;
-    position: -webkit-sticky;
-    position: sticky;
-    max-height: 100vh;
-    top: 0;
-  }
-  .euiPageSideBar--sticky::-webkit-scrollbar {
-    width: 16px;
-    height: 16px;
-  }
-  .euiPageSideBar--sticky::-webkit-scrollbar-thumb {
-    background-color: rgba(152, 162, 179, 0.5);
-    background-clip: content-box;
-    border-radius: 16px;
-    border: 6px solid transparent;
-  }
-  .euiPageSideBar--sticky::-webkit-scrollbar-corner, .euiPageSideBar--sticky::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-}
-@media only screen and (min-width: 992px) and (max-width: 1199px) {
-  .euiPageSideBar--sticky {
-    scrollbar-color: rgba(152, 162, 179, 0.5) transparent;
-    scrollbar-width: thin;
-    overflow-y: auto;
-    -webkit-flex-grow: 1;
-            flex-grow: 1;
-    position: -webkit-sticky;
-    position: sticky;
-    max-height: 100vh;
-    top: 0;
-  }
-  .euiPageSideBar--sticky::-webkit-scrollbar {
-    width: 16px;
-    height: 16px;
-  }
-  .euiPageSideBar--sticky::-webkit-scrollbar-thumb {
-    background-color: rgba(152, 162, 179, 0.5);
-    background-clip: content-box;
-    border-radius: 16px;
-    border: 6px solid transparent;
-  }
-  .euiPageSideBar--sticky::-webkit-scrollbar-corner, .euiPageSideBar--sticky::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-}
-@media only screen and (min-width: 1200px) {
-  .euiPageSideBar--sticky {
-    scrollbar-color: rgba(152, 162, 179, 0.5) transparent;
-    scrollbar-width: thin;
-    overflow-y: auto;
-    -webkit-flex-grow: 1;
-            flex-grow: 1;
-    position: -webkit-sticky;
-    position: sticky;
-    max-height: 100vh;
-    top: 0;
-  }
-  .euiPageSideBar--sticky::-webkit-scrollbar {
-    width: 16px;
-    height: 16px;
-  }
-  .euiPageSideBar--sticky::-webkit-scrollbar-thumb {
-    background-color: rgba(152, 162, 179, 0.5);
-    background-clip: content-box;
-    border-radius: 16px;
-    border: 6px solid transparent;
-  }
-  .euiPageSideBar--sticky::-webkit-scrollbar-corner, .euiPageSideBar--sticky::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-}
 .euiTreeView__wrapper .euiTreeView {
   margin: 0;
   list-style-type: none;