diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss index 8e0a4286b922..990fec953698 100644 --- a/src/components/datagrid/_data_grid_data_row.scss +++ b/src/components/datagrid/_data_grid_data_row.scss @@ -51,17 +51,22 @@ } } - // On hover, color the cell actions more subdued and show a same-colored focus ring - // so the cell actions look less weird on datagrids without cell borders + // On hover &:hover:not(:focus, :focus-within, .euiDataGridRowCell--open) { .euiDataGridRowCell__actions { - background-color: $euiBorderColor; - border-color: $euiBorderColor; - color: $euiColorFullShade; + // Delay the actions showing on hover + // (Note: the focus ring show instantly on hover & the actions show instantly on focus) + animation-delay: $euiAnimSpeedNormal; + + // Color the actions and focus ring grayscale on hover + // (Actions look odd without the ring on grids without cell borders) + background-color: $euiColorDarkShade; + border-color: $euiColorDarkShade; + color: $euiColorEmptyShade; } &::after { - border-color: $euiBorderColor; + border-color: $euiColorDarkShade; } }