Compare commits

...

2 Commits

Author SHA1 Message Date
lukidev 3b4de82f92
fix: Ajusta o checkmark após select da opção.
fix: Ajusta o checkmark após select da opção.
2025-11-09 16:39:25 -03:00
lukibeg 63aa8864c8 fix: Ajusta o checkmark após select da opção. 2025-11-09 16:38:44 -03:00
4 changed files with 65 additions and 33 deletions

View File

@ -93,4 +93,5 @@ @layer components {
.container h1 {
@apply text-2xl font-bold transition-all duration-300 transform hover:scale-105 mb-4;
}
}
}

View File

@ -65,5 +65,4 @@ @layer components {
/* Espaçamento e uma borda sutil no topo */
@apply p-4 border-t border-gray-100;
}
}
}

View File

@ -147,6 +147,32 @@ @layer components {
background-color: #eff6ff;
}
/* Ajuste visual do ícone de check dentro do select */
.select-option {
position: relative;
padding-left: 2.5rem;
/* espaço para o check */
}
.select-option .absolute {
position: absolute;
inset-y: 0;
left: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.select-option svg {
width: 1rem;
height: 1rem;
color: #2563eb;
flex-shrink: 0;
transition: transform 0.15s ease, opacity 0.15s ease;
}
.form-footer {
display: flex;
justify-content: flex-end;

View File

@ -1,18 +1,12 @@
<!-- create-user.blade.php -->
<div x-data="{ showModal: false }"
x-on:user-created.window="showModal = false"
x-on:open-create-user.window="showModal = true">
<div x-data="{ showModal: false }" x-on:user-created.window="showModal = false"
x-on:open-create-user.window="showModal = true">
<div x-show="showModal" class="modal-overlay">
<div x-on:click.outside="showModal = false"
x-show="showModal"
x-transition:enter="transition-enter"
x-transition:enter-start="transition-enter-start"
x-transition:enter-end="transition-enter-end"
x-transition:leave="transition-leave"
x-transition:leave-start="transition-leave-start"
x-transition:leave-end="transition-leave-end"
class="modal-container">
<div x-on:click.outside="showModal = false" x-show="showModal" x-transition:enter="transition-enter"
x-transition:enter-start="transition-enter-start" x-transition:enter-end="transition-enter-end"
x-transition:leave="transition-leave" x-transition:leave-start="transition-leave-start"
x-transition:leave-end="transition-leave-end" class="modal-container">
<h3 class="modal-title">Novo Usuário Nexus</h3>
@ -54,35 +48,47 @@ class="modal-container">
open: false,
selected: @entangle('permission_level'),
options: { '0': 'Usuário', '1': 'Admin' }
}"
x-on:click.outside="open = false"
class="select-wrapper">
}" x-on:click.outside="open = false" class="select-wrapper">
<button type="button" x-on:click="open = true" class="select-button">
<span class="select-text" x-text="options[selected]"></span>
<span class="select-icon">
<svg class="select-svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M10 3a.75.75 0 01.53.22l3.5 3.5a.75.75 0 01-1.06 1.06L10 4.81 6.53 8.28a.75.75 0 01-1.06-1.06l3.5-3.5A.75.75 0 0110 3zm-3.5 9.28a.75.75 0 011.06 0L10 15.19l3.47-3.47a.75.75 0 111.06 1.06l-3.5 3.5a.75.75 0 01-1.06 0l-3.5-3.5a.75.75 0 010-1.06z"
clip-rule="evenodd" />
<svg class="select-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M10 3a.75.75 0 01.53.22l3.5 3.5a.75.75 0 01-1.06 1.06L10 4.81 6.53 8.28a.75.75 0 01-1.06-1.06l3.5-3.5A.75.75 0 0110 3zm-3.5 9.28a.75.75 0 011.06 0L10 15.19l3.47-3.47a.75.75 0 111.06 1.06l-3.5 3.5a.75.75 0 01-1.06 0l-3.5-3.5a.75.75 0 010-1.06z"
clip-rule="evenodd" />
</svg>
</span>
</button>
<div x-show="open" x-transition style="display: none;" class="select-options">
<div x-on:click="selected = '0'; open = false"
class="select-option"
:class="{ 'selected-option': selected == '0' }">
<span class="option-label"
:class="{ 'font-semibold': selected == '0' }">Usuário</span>
<div x-on:click="selected = '0'; open = false" class="select-option"
:class="{ 'selected-option': selected == '0' }">
<span class="option-label" :class="{ 'font-semibold': selected == '0' }">Usuário</span>
<span x-show="selected == '0'"
class="absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600">
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
clip-rule="evenodd" />
</svg>
</span>
</div>
<div x-on:click="selected = '1'; open = false"
class="select-option"
:class="{ 'selected-option': selected == '1' }">
<span class="option-label"
:class="{ 'font-semibold': selected == '1' }">Admin</span>
<div x-on:click="selected = '1'; open = false" class="select-option"
:class="{ 'selected-option': selected == '1' }">
<span class="option-label" :class="{ 'font-semibold': selected == '1' }">Admin</span>
<span x-show="selected == '1'"
class="absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600">
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
clip-rule="evenodd" />
</svg>
</span>
</div>
</div>
</div>
@ -103,4 +109,4 @@ class="select-option"
</form>
</div>
</div>
</div>
</div>