feature: display a border when hovering the component

2023-04-19 17:20:18 +02:00
parent 71c18e864f
commit b4915895fe
2 changed files with 21 additions and 3 deletions
--- a/front/src/components/table/ClickableCell.tsx
+++ b/front/src/components/table/ClickableCell.tsx
@ -10,6 +10,24 @@ type OwnProps = {

 const TD = styled.td`
  position: relative;
+  box-sizing: border-box;
+
+  ::before {
+    content: '';
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    width: calc(100% + 2px);
+    height: calc(100% + 2px);
+    border: 1px solid ${(props) => props.theme.text20};
+    box-sizing: border-box;
+    border-radius: 4px;
+    display: none;
+  }
+
+  :hover::before {
+    display: block;
+  }
 `;

 const Container = styled.span`