refactor: Update UI components to TailAdmin theme
- Changed badge, button, card, dropdown, input, modal, select, table, tabs, toggle, and tooltip components to align with the TailAdmin design system. - Updated class names and styles for consistency across components. - Enhanced accessibility and responsiveness in various components. - Improved hover and focus states for better user experience.
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
{{--
|
||||
Table Component - shadcn-style
|
||||
Table Component - TailAdmin style
|
||||
|
||||
Usage:
|
||||
<x-proxmox::ui.table>
|
||||
@@ -21,27 +21,27 @@
|
||||
'compact' => false,
|
||||
])
|
||||
|
||||
<div @class(['relative w-full overflow-auto' => $responsive])>
|
||||
<div @class(['relative w-full overflow-x-auto rounded-xl border border-gray-200 dark:border-gray-800' => $responsive])>
|
||||
<table
|
||||
{{ $attributes->class([
|
||||
'w-full caption-bottom text-sm',
|
||||
'[&_tbody_tr:nth-child(even)]:bg-muted/50' => $striped,
|
||||
'w-full text-theme-sm',
|
||||
'[&_tbody_tr:nth-child(even)]:bg-gray-50 dark:[&_tbody_tr:nth-child(even)]:bg-gray-800/50' => $striped,
|
||||
]) }}
|
||||
data-hoverable="{{ $hoverable ? 'true' : 'false' }}"
|
||||
data-compact="{{ $compact ? 'true' : 'false' }}"
|
||||
>
|
||||
@if(isset($head))
|
||||
<thead class="[&_tr]:border-b">
|
||||
<tr class="border-b transition-colors">
|
||||
<thead class="border-b border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-800/50">
|
||||
<tr>
|
||||
{{ $head }}
|
||||
</tr>
|
||||
</thead>
|
||||
@endif
|
||||
<tbody class="[&_tr:last-child]:border-0">
|
||||
<tbody class="divide-y divide-gray-200 dark:divide-gray-800">
|
||||
{{ $slot }}
|
||||
</tbody>
|
||||
@if(isset($foot))
|
||||
<tfoot class="border-t bg-muted/50 font-medium [&>tr]:last:border-b-0">
|
||||
<tfoot class="border-t border-gray-200 bg-gray-50 font-medium dark:border-gray-800 dark:bg-gray-800/50">
|
||||
{{ $foot }}
|
||||
</tfoot>
|
||||
@endif
|
||||
|
||||
Reference in New Issue
Block a user