Compare commits
2 Commits
6f0ffa14d5
...
3b4de82f92
| Author | SHA1 | Date |
|---|---|---|
|
|
3b4de82f92 | |
|
|
63aa8864c8 |
|
|
@ -93,4 +93,5 @@ @layer components {
|
|||
|
||||
.container h1 {
|
||||
@apply text-2xl font-bold transition-all duration-300 transform hover:scale-105 mb-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -65,5 +65,4 @@ @layer components {
|
|||
/* Espaçamento e uma borda sutil no topo */
|
||||
@apply p-4 border-t border-gray-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue