julienfroidefond/towercontrol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add pointer-events-none to Card variants

Browse Source 
- Updated Card component styles to include `pointer-events-none` for all variants, preventing interaction during background effects. This enhances user experience by ensuring visual elements do not interfere with user actions.
This commit is contained in:
Julien Froidefond
2025-10-01 22:50:49 +02:00
parent 133a09f995
commit ead02e0aaa
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/ui/Card.tsx
View File

@@ -11,9 +11,9 @@ interface CardProps extends HTMLAttributes<HTMLDivElement> {
const Card = forwardRef<HTMLDivElement, CardProps>( const Card = forwardRef<HTMLDivElement, CardProps>(
({ className, variant = 'default', shadow = 'sm', border = 'default', background = 'default', ...props }, ref) => { ({ className, variant = 'default', shadow = 'sm', border = 'default', background = 'default', ...props }, ref) => {
const backgrounds = { const backgrounds = {
default: 'bg-[var(--card)] bg-gradient-to-br from-[var(--card)] via-[color-mix(in_srgb,var(--card)_90%,var(--background)_10%)] to-[color-mix(in_srgb,var(--card)_75%,var(--background)_25%)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_8%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_4%,transparent)] before:to-transparent before:opacity-80', default: 'bg-[var(--card)] bg-gradient-to-br from-[var(--card)] via-[color-mix(in_srgb,var(--card)_90%,var(--background)_10%)] to-[color-mix(in_srgb,var(--card)_75%,var(--background)_25%)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_8%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_4%,transparent)] before:to-transparent before:opacity-80 before:pointer-events-none',
column: 'bg-[var(--card-column)] bg-gradient-to-br from-[var(--card-column)] via-[color-mix(in_srgb,var(--card-column)_90%,var(--background)_10%)] to-[color-mix(in_srgb,var(--card-column)_75%,var(--background)_25%)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_10%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_5%,transparent)] before:to-transparent before:opacity-90', column: 'bg-[var(--card-column)] bg-gradient-to-br from-[var(--card-column)] via-[color-mix(in_srgb,var(--card-column)_90%,var(--background)_10%)] to-[color-mix(in_srgb,var(--card-column)_75%,var(--background)_25%)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_10%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_5%,transparent)] before:to-transparent before:opacity-90 before:pointer-events-none',
muted: 'bg-[var(--muted)]/15 bg-gradient-to-br from-[var(--muted)]/15 via-[color-mix(in_srgb,var(--muted)_10%,var(--background)_5%)] to-[color-mix(in_srgb,var(--muted)_8%,var(--background)_7%)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-transparent before:via-[color-mix(in_srgb,var(--muted)_12%,transparent)] before:to-transparent before:opacity-60' muted: 'bg-[var(--muted)]/15 bg-gradient-to-br from-[var(--muted)]/15 via-[color-mix(in_srgb,var(--muted)_10%,var(--background)_5%)] to-[color-mix(in_srgb,var(--muted)_8%,var(--background)_7%)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-transparent before:via-[color-mix(in_srgb,var(--muted)_12%,transparent)] before:to-transparent before:opacity-60 before:pointer-events-none'
}; };
const borders = { const borders = {
@@ -32,11 +32,11 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
// Variants prédéfinis pour la rétrocompatibilité // Variants prédéfinis pour la rétrocompatibilité
const variantStyles = { const variantStyles = {
default: 'shadow-lg shadow-[var(--card-shadow-medium)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_6%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_3%,transparent)] before:to-transparent before:opacity-70', default: 'shadow-lg shadow-[var(--card-shadow-medium)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_6%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_3%,transparent)] before:to-transparent before:opacity-70 before:pointer-events-none',
elevated: 'shadow-xl shadow-[var(--card-shadow-heavy)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_8%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_4%,transparent)] before:to-[color-mix(in_srgb,var(--primary)_2%,transparent)] before:opacity-80', elevated: 'shadow-xl shadow-[var(--card-shadow-heavy)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_8%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_4%,transparent)] before:to-[color-mix(in_srgb,var(--primary)_2%,transparent)] before:opacity-80 before:pointer-events-none',
bordered: 'border-[var(--primary)]/40 shadow-xl shadow-[var(--primary)]/20 relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_10%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_5%,transparent)] before:to-transparent before:opacity-90', bordered: 'border-[var(--primary)]/40 shadow-xl shadow-[var(--primary)]/20 relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_10%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_5%,transparent)] before:to-transparent before:opacity-90 before:pointer-events-none',
column: 'bg-[var(--card-column)] shadow-xl shadow-[var(--card-shadow-heavy)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_8%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_4%,transparent)] before:to-[color-mix(in_srgb,var(--primary)_2%,transparent)] before:opacity-80', column: 'bg-[var(--card-column)] shadow-xl shadow-[var(--card-shadow-heavy)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_8%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_4%,transparent)] before:to-[color-mix(in_srgb,var(--primary)_2%,transparent)] before:opacity-80 before:pointer-events-none',
glass: 'bg-[var(--card)]/40 border border-[var(--border)]/60 backdrop-blur-md shadow-xl shadow-[var(--card-shadow-medium)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_12%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_6%,transparent)] before:to-transparent before:opacity-90' glass: 'bg-[var(--card)]/40 border border-[var(--border)]/60 backdrop-blur-md shadow-xl shadow-[var(--card-shadow-medium)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_12%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_6%,transparent)] before:to-transparent before:opacity-90 before:pointer-events-none'
}; };
// Appliquer le variant si spécifié, sinon utiliser les props individuelles // Appliquer le variant si spécifié, sinon utiliser les props individuelles