Sebastian Krüger
6ecdc33933
Smaller variant for buttons that sit next to section labels in card headers (Preview, Color, Results rows). Applied to QRPreview, FontPreview, ColorManipulation, and FileConverter. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
16 lines
1.1 KiB
TypeScript
16 lines
1.1 KiB
TypeScript
/**
|
|
* Shared Tailwind class strings for consistent UI patterns across tools.
|
|
*/
|
|
|
|
/** Smaller button for card title rows (copy, share, export icons next to a section label) */
|
|
export const cardBtn =
|
|
'flex items-center gap-1 px-2 py-1 text-[10px] font-mono glass rounded-md border border-border/30 text-muted-foreground hover:text-primary hover:border-primary/30 hover:bg-primary/10 transition-all disabled:opacity-40 disabled:cursor-not-allowed';
|
|
|
|
/** Standard action button used throughout all tools (copy, download, share, apply…) */
|
|
export const actionBtn =
|
|
'flex items-center gap-1.5 px-3 py-1.5 text-xs font-mono glass rounded-lg border border-border/30 text-muted-foreground hover:text-primary hover:border-primary/30 hover:bg-primary/10 transition-all disabled:opacity-40 disabled:cursor-not-allowed';
|
|
|
|
/** Small square icon-only button (animate preview controls, timeline actions) */
|
|
export const iconBtn =
|
|
'flex items-center justify-center glass rounded-lg border border-border/30 text-muted-foreground hover:text-primary hover:border-primary/30 hover:bg-primary/10 transition-all disabled:opacity-40 disabled:cursor-not-allowed';
|