opensource/filament
3
0
Fork 0
mirror of https://github.com/filamentphp/filament.git synced 2026-10-28 03:44:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

Refactor tabs item styling

Browse Source
This commit is contained in:
Zep Fietje
2023-08-30 09:39:38 +02:00
parent 94a304621f
commit aa5b5d92a8
3 changed files with 28 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/panels/dist/theme.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/support/dist/index.js
Vendored
+7 -7
View File
File diff suppressed because one or more lines are too long
packages/support/resources/views/components/tabs/item.blade.php
+20 -4
View File
@@ -16,9 +16,13 @@
@php
$hasAlpineActiveClasses = filled($alpineActive);
$inactiveItemClasses = 'text-gray-500 hover:bg-gray-50 hover:text-gray-700 focus:bg-gray-50 focus:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-200 dark:focus:bg-white/5 dark:focus:text-gray-200';
$inactiveItemClasses = 'hover:bg-gray-50 focus:bg-gray-50 dark:hover:bg-white/5 dark:focus:bg-white/5';
$activeItemClasses = 'fi-active fi-tabs-item-active bg-gray-50 text-primary-600 dark:bg-white/5 dark:text-primary-400';
$activeItemClasses = 'fi-active fi-tabs-item-active bg-gray-50 dark:bg-white/5';
$inactiveLabelClasses = 'text-gray-500 group-hover:text-gray-700 group-focus:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-200 dark:group-focus:text-gray-200';
$activeLabelClasses = 'text-primary-600 dark:text-primary-400';
$iconClasses = 'fi-tabs-item-icon h-5 w-5';
@@ -44,7 +48,7 @@
'role' => 'tab',
])
->class([
'fi-tabs-item flex items-center gap-x-2 rounded-lg px-3 py-2 text-sm font-medium outline-none transition duration-75',
'fi-tabs-item group flex items-center gap-x-2 rounded-lg px-3 py-2 text-sm font-medium outline-none transition duration-75',
$inactiveItemClasses => (! $hasAlpineActiveClasses) && (! $active),
$activeItemClasses => (! $hasAlpineActiveClasses) && $active,
])
@@ -62,7 +66,19 @@
/>
@endif
<span>
<span
@if ($hasAlpineActiveClasses)
x-bind:class="{
@js($inactiveLabelClasses): ! {{ $alpineActive }},
@js($activeLabelClasses): {{ $alpineActive }},
}"
@endif
@class([
'fi-tabs-item-label',
$inactiveLabelClasses => (! $hasAlpineActiveClasses) && (! $active),
$activeLabelClasses => (! $hasAlpineActiveClasses) && $active,
])
>
{{ $slot }}
</span>