Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-18 02:21:47 -05:00
Code Issues Activity

Removed lines when hovering

Browse source
This commit is contained in:
Daniël van der Winden 2024-10-14 16:33:29 +02:00
parent 1504163925
commit 05f0fc5d36
2 changed files with 4 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/admin-x-design-system/src/global/ListItem.tsx
View file

@ -47,7 +47,7 @@ const ListItem: React.FC<ListItemProps> = ({
separator ? 'border-b border-grey-100 last-of-type:border-b-transparent dark:border-grey-900' : 'border-y border-transparent',
onClick && 'cursor-pointer before:absolute before:inset-0 before:content-[""]',
'hover:z-10 hover:border-b-transparent',
'-mb-px pb-px', // Negative margin to overlap borders
'-mb-px pb-px',
className
);

5
apps/admin-x-design-system/src/global/TableRow.tsx
View file

@ -1,7 +1,7 @@
import clsx from 'clsx';
import React, {forwardRef} from 'react';
export const tableRowHoverBgClasses = 'before:absolute before:inset-x-[-16px] before:top-0 before:bottom-0 before:bg-grey-50 before:opacity-0 hover:before:opacity-100 before:rounded-md before:transition-opacity dark:before:bg-grey-950';
export const tableRowHoverBgClasses = 'before:absolute before:inset-x-[-16px] before:top-[-1px] before:bottom-0 before:bg-grey-50 before:opacity-0 hover:before:opacity-100 before:rounded-md before:transition-opacity dark:before:bg-grey-950 hover:z-10';
export interface TableRowProps {
id?: string;
@ -32,6 +32,7 @@ const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(function TableRo
bgOnHover && tableRowHoverBgClasses,
onClick && 'cursor-pointer',
separator ? 'border-b border-grey-100 last-of-type:border-b-transparent dark:border-grey-950' : 'border-y border-none first-of-type:hover:border-t-transparent',
'hover:border-b-transparent',
className
);
@ -41,7 +42,7 @@ const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(function TableRo
<div className="relative z-10 flex items-center">
<div className="grow py-2">{children}</div>
{action &&
<div className={`flex items-center justify-end p-2${hideActions ? 'opacity-0 group-hover/table-row:opacity-100' : ''}`}>
<div className={`flex items-center justify-end p-2${hideActions ? ' opacity-0 group-hover/table-row:opacity-100' : ''}`}>
{action}
</div>
}