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.
93 lines
2.4 KiB
PHP
93 lines
2.4 KiB
PHP
{{--
|
|
Dropdown Item Component - AdminLTE style
|
|
--}}
|
|
|
|
@props([
|
|
'href' => null,
|
|
'icon' => null,
|
|
'variant' => 'default',
|
|
'disabled' => false,
|
|
])
|
|
|
|
@php
|
|
$tag = $href ? 'a' : 'button';
|
|
@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([
|
|
'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="dropdown-item-lte-icon" />
|
|
@endif
|
|
<span class="dropdown-item-lte-text">{{ $slot }}</span>
|
|
</{{ $tag }}>
|