fix: Ajusta o checkmark após select da opção.

This commit is contained in:
lukibeg 2025-11-09 16:38:44 -03:00
parent b3ac0826aa
commit 63aa8864c8
4 changed files with 65 additions and 33 deletions

View File

@ -93,4 +93,5 @@ @layer components {
.container h1 { .container h1 {
@apply text-2xl font-bold transition-all duration-300 transform hover:scale-105 mb-4; @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 */ /* Espaçamento e uma borda sutil no topo */
@apply p-4 border-t border-gray-100; @apply p-4 border-t border-gray-100;
} }
}
} }

View File

@ -147,6 +147,32 @@ @layer components {
background-color: #eff6ff; 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 { .form-footer {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;

View File

@ -1,18 +1,12 @@
<!-- create-user.blade.php --> <!-- create-user.blade.php -->
<div x-data="{ showModal: false }" <div x-data="{ showModal: false }" x-on:user-created.window="showModal = false"
x-on:user-created.window="showModal = false" x-on:open-create-user.window="showModal = true">
x-on:open-create-user.window="showModal = true">
<div x-show="showModal" class="modal-overlay"> <div x-show="showModal" class="modal-overlay">
<div x-on:click.outside="showModal = false" <div x-on:click.outside="showModal = false" x-show="showModal" x-transition:enter="transition-enter"
x-show="showModal" x-transition:enter-start="transition-enter-start" x-transition:enter-end="transition-enter-end"
x-transition:enter="transition-enter" x-transition:leave="transition-leave" x-transition:leave-start="transition-leave-start"
x-transition:enter-start="transition-enter-start" x-transition:leave-end="transition-leave-end" class="modal-container">
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> <h3 class="modal-title">Novo Usuário Nexus</h3>
@ -54,35 +48,47 @@ class="modal-container">
open: false, open: false,
selected: @entangle('permission_level'), selected: @entangle('permission_level'),
options: { '0': 'Usuário', '1': 'Admin' } 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"> <button type="button" x-on:click="open = true" class="select-button">
<span class="select-text" x-text="options[selected]"></span> <span class="select-text" x-text="options[selected]"></span>
<span class="select-icon"> <span class="select-icon">
<svg class="select-svg" xmlns="http://www.w3.org/2000/svg" <svg class="select-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
viewBox="0 0 20 20" fill="currentColor"> fill="currentColor">
<path fill-rule="evenodd" <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" 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" /> clip-rule="evenodd" />
</svg> </svg>
</span> </span>
</button> </button>
<div x-show="open" x-transition style="display: none;" class="select-options"> <div x-show="open" x-transition style="display: none;" class="select-options">
<div x-on:click="selected = '0'; open = false" <div x-on:click="selected = '0'; open = false" class="select-option"
class="select-option" :class="{ 'selected-option': selected == '0' }">
:class="{ 'selected-option': selected == '0' }"> <span class="option-label" :class="{ 'font-semibold': selected == '0' }">Usuário</span>
<span class="option-label" <span x-show="selected == '0'"
:class="{ 'font-semibold': selected == '0' }">Usuário</span> 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 x-on:click="selected = '1'; open = false" <div x-on:click="selected = '1'; open = false" class="select-option"
class="select-option" :class="{ 'selected-option': selected == '1' }">
:class="{ 'selected-option': selected == '1' }"> <span class="option-label" :class="{ 'font-semibold': selected == '1' }">Admin</span>
<span class="option-label" <span x-show="selected == '1'"
:class="{ 'font-semibold': selected == '1' }">Admin</span> 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> </div>
</div> </div>
@ -103,4 +109,4 @@ class="select-option"
</form> </form>
</div> </div>
</div> </div>
</div> </div>