Refactor modal close behavior and improve styling

- Changed modal close event from `@click.away` to `@click.self` for better control over closing modals.
- Updated various modal button styles for consistency and improved accessibility.
- Adjusted transition durations for modal animations to enhance user experience.
- Added aria-labels to close buttons for better screen reader support.
This commit is contained in:
2026-02-23 20:02:41 -05:00
parent f394483daa
commit af62a16354
45 changed files with 393 additions and 4700 deletions

View File

@@ -19,10 +19,10 @@
@if($label || $description)
<div class="flex flex-col gap-0.5">
@if($label)
<span class="text-sm font-medium text-secondary dark:text-gray-300">{{ $label }}</span>
<span class="text-sm font-medium text-secondary">{{ $label }}</span>
@endif
@if($description)
<p class="text-xs text-secondary/80 dark:text-gray-400">{{ $description }}</p>
<p class="text-xs text-secondary/80">{{ $description }}</p>
@endif
</div>
@endif
@@ -33,7 +33,7 @@
{{ $attributes->whereDoesntStartWith('class')->merge(['disabled' => $disabled]) }}
class="peer sr-only"
/>
<div class="w-11 h-6 bg-neutral/40 dark:bg-gray-600 rounded-full border-2 border-transparent transition-colors duration-200 peer-checked:bg-primary peer-focus-visible:ring-2 peer-focus-visible:ring-primary/25 peer-disabled:opacity-50 peer-disabled:cursor-not-allowed"></div>
<div class="w-11 h-6 bg-neutral/40 rounded-full border-2 border-transparent transition-colors duration-200 peer-checked:bg-primary peer-focus-visible:ring-2 peer-focus-visible:ring-primary/25 peer-disabled:opacity-50 peer-disabled:cursor-not-allowed"></div>
<div class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow-sm transition-transform duration-200 peer-checked:translate-x-5 pointer-events-none"></div>
</div>
</label>