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.
127 lines
3.3 KiB
PHP
127 lines
3.3 KiB
PHP
{{--
|
|
Toggle/Switch Component - AdminLTE style
|
|
|
|
Usage:
|
|
<x-proxmox::ui.toggle wire:model="enabled" label="Enable Feature" />
|
|
--}}
|
|
|
|
@props([
|
|
'label' => null,
|
|
'description' => null,
|
|
'disabled' => false,
|
|
])
|
|
|
|
<style>
|
|
.toggle-wrapper-lte {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
cursor: pointer;
|
|
}
|
|
.toggle-wrapper-lte-disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.65;
|
|
}
|
|
.toggle-content-lte {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.125rem;
|
|
}
|
|
.toggle-label-lte {
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: #495057;
|
|
}
|
|
.toggle-description-lte {
|
|
font-size: 0.8125rem;
|
|
color: var(--lte-secondary, #6c757d);
|
|
}
|
|
.toggle-switch-lte {
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
}
|
|
.toggle-input-lte {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
.toggle-track-lte {
|
|
display: block;
|
|
width: 2.75rem;
|
|
height: 1.5rem;
|
|
background-color: #dee2e6;
|
|
border-radius: 9999px;
|
|
border: 2px solid transparent;
|
|
transition: background-color var(--lte-transition-speed, 0.3s) ease;
|
|
}
|
|
.toggle-input-lte:checked + .toggle-track-lte {
|
|
background-color: var(--lte-primary, #0d6efd);
|
|
}
|
|
.toggle-input-lte:focus-visible + .toggle-track-lte {
|
|
outline: none;
|
|
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
|
|
}
|
|
.toggle-input-lte:disabled + .toggle-track-lte {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
.toggle-thumb-lte {
|
|
position: absolute;
|
|
top: 0.125rem;
|
|
left: 0.125rem;
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
background-color: #fff;
|
|
border-radius: 9999px;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
transition: transform var(--lte-transition-speed, 0.3s) ease;
|
|
pointer-events: none;
|
|
}
|
|
.toggle-input-lte:checked ~ .toggle-thumb-lte {
|
|
transform: translateX(1.25rem);
|
|
}
|
|
/* Dark mode */
|
|
.dark .toggle-label-lte {
|
|
color: #d1d5db;
|
|
}
|
|
.dark .toggle-description-lte {
|
|
color: #9ca3af;
|
|
}
|
|
.dark .toggle-track-lte {
|
|
background-color: #374151;
|
|
}
|
|
.dark .toggle-input-lte:checked + .toggle-track-lte {
|
|
background-color: var(--lte-primary, #0d6efd);
|
|
}
|
|
</style>
|
|
|
|
<label {{ $attributes->only('class')->class(['toggle-wrapper-lte', 'toggle-wrapper-lte-disabled' => $disabled]) }}>
|
|
@if($label || $description)
|
|
<div class="toggle-content-lte">
|
|
@if($label)
|
|
<span class="toggle-label-lte">{{ $label }}</span>
|
|
@endif
|
|
@if($description)
|
|
<p class="toggle-description-lte">{{ $description }}</p>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
<div class="toggle-switch-lte">
|
|
<input
|
|
type="checkbox"
|
|
{{ $attributes->whereDoesntStartWith('class')->merge(['disabled' => $disabled]) }}
|
|
class="toggle-input-lte"
|
|
/>
|
|
<div class="toggle-track-lte"></div>
|
|
<div class="toggle-thumb-lte"></div>
|
|
</div>
|
|
</label>
|