Joseph.Rawlings/Virtnet.bond
Private
Public Access
1
0
Fork 0
Code Activity

Add AdminLTE-style CSS framework to app.css

Browse Source 
- 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:
Joseph.Rawlings
2025-12-17 13:45:56 -05:00
parent 3219d4d7f3
commit 760cf84451
52 changed files with 4525 additions and 1537 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
extensions/Servers/Proxmox/views/components/ui/dropdown-item.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Dropdown Item Component - TailAdmin style
Dropdown Item Component - AdminLTE style
--}}
@props([
@@ -11,28 +11,82 @@
@php
$tag = $href ? 'a' : 'button';
$variantClasses = [
'default' => 'text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white',
'danger' => 'text-error-600 hover:bg-error-50 dark:text-error-400 dark:hover:bg-error-500/10',
'success' => 'text-success-600 hover:bg-success-50 dark:text-success-400 dark:hover:bg-success-500/10',
];
$variantClass = $variantClasses[$variant] ?? $variantClasses['default'];
@endphp
<style>
.dropdown-item-lte {
display: flex;
align-items: center;
gap: 0.625rem;
width: 100%;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
color: #212529;
text-align: left;
text-decoration: none;
background-color: transparent;
border: 0;
border-radius: calc(var(--lte-border-radius, 0.375rem) - 2px);
cursor: pointer;
transition: background-color var(--lte-transition-speed, 0.3s) ease, color var(--lte-transition-speed, 0.3s) ease;
}
.dropdown-item-lte:hover,
.dropdown-item-lte:focus {
background-color: rgba(0, 0, 0, 0.04);
color: var(--lte-primary, #0d6efd);
outline: none;
}
.dropdown-item-lte-danger {
color: var(--lte-danger, #dc3545);
}
.dropdown-item-lte-danger:hover,
.dropdown-item-lte-danger:focus {
background-color: rgba(220, 53, 69, 0.08);
color: var(--lte-danger, #dc3545);
}
.dropdown-item-lte-success {
color: var(--lte-success, #198754);
}
.dropdown-item-lte-success:hover,
.dropdown-item-lte-success:focus {
background-color: rgba(25, 135, 84, 0.08);
color: var(--lte-success, #198754);
}
.dropdown-item-lte-disabled {
pointer-events: none;
opacity: 0.5;
}
.dropdown-item-lte-icon {
flex-shrink: 0;
width: 1.125rem;
height: 1.125rem;
}
.dropdown-item-lte-text {
flex: 1;
}
/* Dark mode */
.dark .dropdown-item-lte {
color: #e5e7eb;
}
.dark .dropdown-item-lte:hover,
.dark .dropdown-item-lte:focus {
background-color: rgba(255, 255, 255, 0.04);
}
</style>
<{{ $tag }}
@if($href) href="{{ $href }}" @endif
@if($tag === 'button') type="button" @endif
@if($disabled) disabled @endif
{{ $attributes->class([
'relative flex w-full cursor-pointer select-none items-center gap-2.5 rounded-lg px-3 py-2 text-theme-sm outline-none transition-colors duration-150',
$variantClass,
'pointer-events-none opacity-50' => $disabled,
'dropdown-item-lte',
'dropdown-item-lte-danger' => $variant === 'danger',
'dropdown-item-lte-success' => $variant === 'success',
'dropdown-item-lte-disabled' => $disabled,
]) }}
>
@if($icon)
<x-dynamic-component :component="$icon" class="size-4.5" />
<x-dynamic-component :component="$icon" class="dropdown-item-lte-icon" />
@endif
<span class="flex-1 text-left">{{ $slot }}</span>
<span class="dropdown-item-lte-text">{{ $slot }}</span>
</{{ $tag }}>