Table: fixes row focus styles (safari)

helpscout · Jun 20, 2022 · 4751c2e · 4751c2e
1 parent fea1250
commit 4751c2e
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/src/components/Table/Table.css.js b/src/components/Table/Table.css.js
@@ -74,10 +74,19 @@ export const TableUI = styled('table')`
 
   tbody tr:focus {
     background-color: ${props => props.theme.bgFocus};
-    box-shadow: inset 3px 0 ${props => props.theme.bgFocusIndicator};
     outline: 0;
   }
 
+  tbody tr:focus > td:first-child {
+    background: linear-gradient(
+      to right,
+      ${props => props.theme.bgFocusIndicator},
+      ${props => props.theme.bgFocusIndicator} 3px,
+      transparent 3px,
+      transparent 100%
+    );
+  }
+
   th,
   td {
     /* Borders: Rows */