Skip to content

Commit

Permalink
[Design feedback] Re-add animation delay, shade hover actions darker
Browse files Browse the repository at this point in the history
  • Loading branch information
cee-chen committed Nov 16, 2023
1 parent 047caf5 commit 0ea0363
Showing 1 changed file with 11 additions and 6 deletions.
17 changes: 11 additions & 6 deletions src/components/datagrid/_data_grid_data_row.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down

0 comments on commit 0ea0363

Please sign in to comment.