Joseph.Rawlings
760cf84451
- 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.
88 lines
2.6 KiB
PHP
88 lines
2.6 KiB
PHP
{{--
|
|
Dropdown Component - AdminLTE style
|
|
|
|
Usage:
|
|
<x-proxmox::ui.dropdown>
|
|
<x-slot:trigger>
|
|
<x-proxmox::ui.button>Options</x-proxmox::ui.button>
|
|
</x-slot:trigger>
|
|
|
|
<x-proxmox::ui.dropdown-item href="/profile">Profile</x-proxmox::ui.dropdown-item>
|
|
<x-proxmox::ui.dropdown-item href="/settings">Settings</x-proxmox::ui.dropdown-item>
|
|
<x-proxmox::ui.dropdown-divider />
|
|
<x-proxmox::ui.dropdown-item wire:click="logout" variant="danger">Sign out</x-proxmox::ui.dropdown-item>
|
|
</x-proxmox::ui.dropdown>
|
|
--}}
|
|
|
|
@props([
|
|
'align' => 'right',
|
|
'width' => '48',
|
|
'contentClasses' => '',
|
|
])
|
|
|
|
@php
|
|
$alignStyles = [
|
|
'left' => 'left: 0; transform-origin: top left;',
|
|
'right' => 'right: 0; transform-origin: top right;',
|
|
'center' => 'left: 50%; transform: translateX(-50%); transform-origin: top center;',
|
|
];
|
|
|
|
$widthStyles = [
|
|
'32' => 'width: 8rem;',
|
|
'40' => 'width: 10rem;',
|
|
'48' => 'width: 12rem;',
|
|
'56' => 'width: 14rem;',
|
|
'64' => 'width: 16rem;',
|
|
'80' => 'width: 20rem;',
|
|
];
|
|
@endphp
|
|
|
|
<style>
|
|
.dropdown-lte {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
.dropdown-menu-lte {
|
|
position: absolute;
|
|
z-index: 1000;
|
|
margin-top: 0.5rem;
|
|
min-width: 10rem;
|
|
padding: 0.5rem;
|
|
background-color: #fff;
|
|
border: 1px solid var(--lte-border-color, #dee2e6);
|
|
border-radius: var(--lte-border-radius, 0.375rem);
|
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
|
}
|
|
.dropdown-menu-lte[x-cloak] {
|
|
display: none !important;
|
|
}
|
|
/* Dark mode */
|
|
.dark .dropdown-menu-lte {
|
|
background-color: #1f2937;
|
|
border-color: #374151;
|
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
|
|
}
|
|
</style>
|
|
|
|
<div class="dropdown-lte" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false">
|
|
<div @click="open = !open">
|
|
{{ $trigger }}
|
|
</div>
|
|
|
|
<div
|
|
x-show="open"
|
|
x-transition:enter="transition ease-out duration-150"
|
|
x-transition:enter-start="opacity-0 scale-95"
|
|
x-transition:enter-end="opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-100"
|
|
x-transition:leave-start="opacity-100 scale-100"
|
|
x-transition:leave-end="opacity-0 scale-95"
|
|
class="dropdown-menu-lte {{ $contentClasses }}"
|
|
style="{{ $widthStyles[$width] ?? 'width: 12rem;' }} {{ $alignStyles[$align] ?? $alignStyles['right'] }}"
|
|
x-cloak
|
|
@click="open = false"
|
|
>
|
|
{{ $slot }}
|
|
</div>
|
|
</div>
|