fix css focuses

This commit is contained in:
Adrian Hopek
2022-04-11 08:47:35 +02:00
parent 4af0482a93
commit 90e8812a98
10 changed files with 28 additions and 28 deletions

View File

@@ -63,7 +63,7 @@
leave-to-class="opacity-0"
>
<ListboxOptions
class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 focus:ring-blumilk-500 ring-opacity-5 shadow-lg sm:text-sm"
class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
>
<ListboxOption
v-for="user in users.data"
@@ -156,7 +156,7 @@
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<ListboxOptions class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 focus:ring-blumilk-500 ring-opacity-5 shadow-lg sm:text-sm">
<ListboxOptions class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm">
<ListboxOption
v-for="vacationType in vacationTypes"
:key="vacationType.value"

View File

@@ -19,7 +19,7 @@
<button
v-for="(status, index) in statuses"
:key="index"
:class="[status.value === filters.status ? 'text-blumilk-600 font-semibold' : 'hover:bg-blumilk-25 text-gray-700 focus:z-10', 'group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-sm font-medium text-center']"
:class="[status.value === filters.status ? 'text-blumilk-600 font-semibold' : 'hover:bg-blumilk-25 text-gray-700 focus:z-10', 'group relative min-w-0 flex-1 overflow-hidden focus:outline-blumilk-500 bg-white py-4 px-4 text-sm font-medium text-center']"
@click="form.status = status"
>
<span>{{ status.name }}</span>
@@ -140,7 +140,7 @@
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<InertiaLink
:href="`/vacation/requests/${request.id}`"
class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline"
class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline focus:outline-blumilk-500"
>
{{ request.name }}
</InertiaLink>
@@ -163,13 +163,13 @@
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<InertiaLink
:href="`/vacation/requests/${request.id}`"
class="flex justify-around"
class="flex justify-around focus:outline-blumilk-500"
>
<ChevronRightIcon class="block w-6 h-6 fill-blumilk-500" />
</InertiaLink>
<InertiaLink
:href="`/vacation/requests/${request.id}`"
class="absolute inset-0"
class="absolute inset-0 focus:outline-blumilk-500"
/>
</td>
</tr>

View File

@@ -219,7 +219,7 @@
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<InertiaLink
:href="`/vacation/requests/${request.id}`"
class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline"
class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline focus:outline-blumilk-500"
>
{{ request.name }}
</InertiaLink>
@@ -257,13 +257,13 @@
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<InertiaLink
:href="`/vacation/requests/${request.id}`"
class="flex justify-around"
class="flex justify-around focus:outline-blumilk-500"
>
<ChevronRightIcon class="block w-6 h-6 fill-blumilk-500" />
</InertiaLink>
<InertiaLink
:href="`/vacation/requests/${request.id}`"
class="absolute inset-0"
class="absolute inset-0 focus:outline-blumilk-500"
/>
</td>
</tr>