Add AdminLTE-style CSS framework to app.css
- Introduced AdminLTE CSS variables for color palette, body colors, card styles, and button styles. - Implemented card components with variants for primary, success, warning, danger, and info. - Added button styles including sizes and outline variants. - Created form controls, select inputs, and input groups with consistent styling. - Included utility classes for text and background colors, gradients, and shadows. - Developed components for badges, alerts, callouts, progress bars, tables, small boxes, and info boxes. - Integrated modal, dropdown, spinner, tooltip, and direct chat styles. - Established timeline and close button styles, with dark mode support for specific components.
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
{{--
|
||||
Tabs Component - TailAdmin style
|
||||
Tabs Component - AdminLTE style
|
||||
|
||||
Usage:
|
||||
<x-proxmox::ui.tabs :tabs="['Overview', 'Settings', 'Logs']" active="Overview">
|
||||
@@ -16,37 +16,176 @@
|
||||
])
|
||||
|
||||
@php
|
||||
$variantClasses = [
|
||||
'default' => [
|
||||
'container' => 'inline-flex items-center gap-1 rounded-lg border border-gray-200 bg-gray-50 p-1 dark:border-gray-800 dark:bg-gray-800/50',
|
||||
'tab' => 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-4 py-2 text-theme-sm font-medium transition-all duration-150',
|
||||
'active' => 'bg-white text-gray-800 shadow-theme-xs dark:bg-gray-900 dark:text-white/90',
|
||||
'inactive' => 'text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300',
|
||||
],
|
||||
'pills' => [
|
||||
'container' => 'inline-flex items-center gap-1 rounded-lg border border-gray-200 bg-gray-50 p-1 dark:border-gray-800 dark:bg-gray-800/50',
|
||||
'tab' => 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-4 py-2 text-theme-sm font-medium transition-all duration-150',
|
||||
'active' => 'bg-white text-gray-800 shadow-theme-xs dark:bg-gray-900 dark:text-white/90',
|
||||
'inactive' => 'text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300',
|
||||
],
|
||||
'buttons' => [
|
||||
'container' => 'flex gap-2',
|
||||
'tab' => 'inline-flex items-center justify-center whitespace-nowrap rounded-lg px-4 py-2.5 text-theme-sm font-medium transition-colors duration-150',
|
||||
'active' => 'bg-brand-500 text-white shadow-theme-xs hover:bg-brand-600',
|
||||
'inactive' => 'bg-white text-gray-700 shadow-theme-xs ring-1 ring-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-700 dark:hover:bg-gray-700',
|
||||
],
|
||||
];
|
||||
|
||||
$styles = $variantClasses[$variant] ?? $variantClasses['default'];
|
||||
$activeTab = $active ?? ($tabs[0] ?? null);
|
||||
@endphp
|
||||
|
||||
<style>
|
||||
.nav-tabs-lte {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
border-bottom: 1px solid var(--lte-border-color, #dee2e6);
|
||||
}
|
||||
.nav-tabs-lte .nav-item-lte {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
.nav-link-lte {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.625rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--lte-secondary, #6c757d);
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-top-left-radius: var(--lte-border-radius, 0.375rem);
|
||||
border-top-right-radius: var(--lte-border-radius, 0.375rem);
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
.nav-link-lte:hover {
|
||||
color: var(--lte-primary, #0d6efd);
|
||||
border-color: #e9ecef #e9ecef var(--lte-border-color, #dee2e6);
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
.nav-link-lte.active {
|
||||
color: var(--lte-primary, #0d6efd);
|
||||
background-color: #fff;
|
||||
border-color: var(--lte-border-color, #dee2e6) var(--lte-border-color, #dee2e6) #fff;
|
||||
}
|
||||
.nav-pills-lte {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: var(--lte-border-radius, 0.375rem);
|
||||
border: 1px solid var(--lte-border-color, #dee2e6);
|
||||
}
|
||||
.nav-pills-lte .nav-link-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--lte-secondary, #6c757d);
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: calc(var(--lte-border-radius, 0.375rem) - 2px);
|
||||
transition: all var(--lte-transition-speed, 0.3s) ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.nav-pills-lte .nav-link-pill:hover {
|
||||
color: #495057;
|
||||
background-color: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.nav-pills-lte .nav-link-pill.active {
|
||||
color: #212529;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.nav-buttons-lte {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.nav-buttons-lte .nav-btn-lte {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.625rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--lte-secondary, #6c757d);
|
||||
background-color: #fff;
|
||||
border: 1px solid var(--lte-border-color, #dee2e6);
|
||||
border-radius: var(--lte-border-radius, 0.375rem);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
transition: all var(--lte-transition-speed, 0.3s) ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.nav-buttons-lte .nav-btn-lte:hover {
|
||||
background-color: #f8f9fa;
|
||||
border-color: #adb5bd;
|
||||
}
|
||||
.nav-buttons-lte .nav-btn-lte.active {
|
||||
color: #fff;
|
||||
background-color: var(--lte-primary, #0d6efd);
|
||||
border-color: var(--lte-primary, #0d6efd);
|
||||
}
|
||||
.tab-badge-lte {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.125rem 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
color: var(--lte-primary, #0d6efd);
|
||||
background-color: rgba(13, 110, 253, 0.1);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
.tab-content-lte {
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
/* Dark mode support */
|
||||
.dark .nav-tabs-lte {
|
||||
border-bottom-color: #374151;
|
||||
}
|
||||
.dark .nav-link-lte {
|
||||
color: #9ca3af;
|
||||
}
|
||||
.dark .nav-link-lte:hover {
|
||||
color: var(--lte-primary, #0d6efd);
|
||||
border-color: #374151 #374151 #374151;
|
||||
background-color: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
.dark .nav-link-lte.active {
|
||||
color: var(--lte-primary, #0d6efd);
|
||||
background-color: #1f2937;
|
||||
border-color: #374151 #374151 #1f2937;
|
||||
}
|
||||
.dark .nav-pills-lte {
|
||||
background-color: #1f2937;
|
||||
border-color: #374151;
|
||||
}
|
||||
.dark .nav-pills-lte .nav-link-pill {
|
||||
color: #9ca3af;
|
||||
}
|
||||
.dark .nav-pills-lte .nav-link-pill:hover {
|
||||
color: #e5e7eb;
|
||||
background-color: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
.dark .nav-pills-lte .nav-link-pill.active {
|
||||
color: #f3f4f6;
|
||||
background-color: #374151;
|
||||
}
|
||||
.dark .nav-buttons-lte .nav-btn-lte {
|
||||
color: #9ca3af;
|
||||
background-color: #1f2937;
|
||||
border-color: #374151;
|
||||
}
|
||||
.dark .nav-buttons-lte .nav-btn-lte:hover {
|
||||
background-color: #374151;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div
|
||||
x-data="{ activeTab: '{{ $activeTab }}' }"
|
||||
{{ $attributes }}
|
||||
>
|
||||
{{-- Tab Navigation --}}
|
||||
<div class="{{ $styles['container'] }}">
|
||||
@if($variant === 'pills')
|
||||
<div class="nav-pills-lte">
|
||||
@elseif($variant === 'buttons')
|
||||
<div class="nav-buttons-lte">
|
||||
@else
|
||||
<ul class="nav-tabs-lte">
|
||||
@endif
|
||||
@foreach($tabs as $tab)
|
||||
@php
|
||||
$tabName = is_array($tab) ? ($tab['name'] ?? $tab['label'] ?? '') : $tab;
|
||||
@@ -54,27 +193,63 @@
|
||||
$tabIcon = is_array($tab) ? ($tab['icon'] ?? null) : null;
|
||||
$tabBadge = is_array($tab) ? ($tab['badge'] ?? null) : null;
|
||||
@endphp
|
||||
<button
|
||||
type="button"
|
||||
@click="activeTab = '{{ $tabName }}'"
|
||||
:class="activeTab === '{{ $tabName }}' ? '{{ $styles['active'] }}' : '{{ $styles['inactive'] }}'"
|
||||
class="{{ $styles['tab'] }} gap-2"
|
||||
>
|
||||
@if($tabIcon)
|
||||
<x-dynamic-component :component="$tabIcon" class="size-4" />
|
||||
@endif
|
||||
<span>{{ $tabLabel }}</span>
|
||||
@if($tabBadge)
|
||||
<span class="ml-1.5 rounded-full bg-brand-50 px-2 py-0.5 text-theme-xs font-medium text-brand-600 dark:bg-brand-500/15 dark:text-brand-400">
|
||||
{{ $tabBadge }}
|
||||
</span>
|
||||
@endif
|
||||
</button>
|
||||
@if($variant === 'pills')
|
||||
<button
|
||||
type="button"
|
||||
@click="activeTab = '{{ $tabName }}'"
|
||||
:class="activeTab === '{{ $tabName }}' ? 'active' : ''"
|
||||
class="nav-link-pill"
|
||||
>
|
||||
@if($tabIcon)
|
||||
<x-dynamic-component :component="$tabIcon" class="size-4" />
|
||||
@endif
|
||||
<span>{{ $tabLabel }}</span>
|
||||
@if($tabBadge)
|
||||
<span class="tab-badge-lte">{{ $tabBadge }}</span>
|
||||
@endif
|
||||
</button>
|
||||
@elseif($variant === 'buttons')
|
||||
<button
|
||||
type="button"
|
||||
@click="activeTab = '{{ $tabName }}'"
|
||||
:class="activeTab === '{{ $tabName }}' ? 'active' : ''"
|
||||
class="nav-btn-lte"
|
||||
>
|
||||
@if($tabIcon)
|
||||
<x-dynamic-component :component="$tabIcon" class="size-4" />
|
||||
@endif
|
||||
<span>{{ $tabLabel }}</span>
|
||||
@if($tabBadge)
|
||||
<span class="tab-badge-lte">{{ $tabBadge }}</span>
|
||||
@endif
|
||||
</button>
|
||||
@else
|
||||
<li class="nav-item-lte">
|
||||
<button
|
||||
type="button"
|
||||
@click="activeTab = '{{ $tabName }}'"
|
||||
:class="activeTab === '{{ $tabName }}' ? 'active' : ''"
|
||||
class="nav-link-lte"
|
||||
>
|
||||
@if($tabIcon)
|
||||
<x-dynamic-component :component="$tabIcon" class="size-4" />
|
||||
@endif
|
||||
<span>{{ $tabLabel }}</span>
|
||||
@if($tabBadge)
|
||||
<span class="tab-badge-lte">{{ $tabBadge }}</span>
|
||||
@endif
|
||||
</button>
|
||||
</li>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
@if($variant === 'pills' || $variant === 'buttons')
|
||||
</div>
|
||||
@else
|
||||
</ul>
|
||||
@endif
|
||||
|
||||
{{-- Tab Panels --}}
|
||||
<div class="mt-5">
|
||||
<div class="tab-content-lte">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user