fix css focuses
This commit is contained in:
		| @@ -14,8 +14,8 @@ const types = [ | ||||
|     text: 'Urlop wypoczynkowy', | ||||
|     value: 'vacation', | ||||
|     icon: WhiteBalanceSunnyIcon, | ||||
|     color: 'text-amber-300', | ||||
|     border: 'border-amber-300', | ||||
|     color: 'text-yellow-500', | ||||
|     border: 'border-yellow-500', | ||||
|   }, | ||||
|   { | ||||
|     text: 'Urlop na żądanie', | ||||
|   | ||||
| @@ -39,7 +39,7 @@ | ||||
|                 offset-distance="0" | ||||
|               > | ||||
|                 <div :class="[day.isPendingVacation && 'mx-0.5']"> | ||||
|                   <button :class="[day.isPendingVacation && `border-dashed`, `${getVacationBorder(day)} isolate bg-white w-full hover:bg-blumilk-25 border-b-4 py-1.5 font-medium`]"> | ||||
|                   <button :class="[day.isPendingVacation && `border-dashed`, `${getVacationBorder(day)} isolate bg-white w-full hover:bg-blumilk-25 border-b-4 py-1.5 font-medium focus:outline-blumilk-500`]"> | ||||
|                     <time | ||||
|                       :datetime="day.date.toISODate()" | ||||
|                       :class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'mx-auto flex h-7 w-7 p-4 items-center justify-center']" | ||||
| @@ -58,7 +58,7 @@ | ||||
|                 hover | ||||
|                 offset-distance="0" | ||||
|               > | ||||
|                 <button class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent"> | ||||
|                 <button class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent focus:outline-blumilk-500"> | ||||
|                   <time | ||||
|                     :datetime="day.date.toISODate()" | ||||
|                     :class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'text-red-700 font-bold mx-auto flex h-7 w-7 p-4 items-center justify-center']" | ||||
| @@ -74,7 +74,7 @@ | ||||
|               </Popper> | ||||
|               <button | ||||
|                 v-else | ||||
|                 class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent" | ||||
|                 class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent focus:outline-blumilk-500" | ||||
|               > | ||||
|                 <time | ||||
|                   :datetime="day.date.toISODate()" | ||||
|   | ||||
| @@ -11,20 +11,20 @@ | ||||
|             v-if="previousMonth" | ||||
|             as="button" | ||||
|             :href="`/vacation/calendar/${previousMonth.value}`" | ||||
|             class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-l-md border border-r-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50" | ||||
|             class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-l-md border border-r-0 border-gray-300 focus:outline-blumilk-500 md:px-2 md:w-9 md:hover:bg-gray-50" | ||||
|           > | ||||
|             <ChevronLeftIcon class="w-5 h-5" /> | ||||
|           </InertiaLink> | ||||
|           <span | ||||
|             v-else | ||||
|             class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-l-md border border-r-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50" | ||||
|             class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-l-md border border-r-0 border-gray-300 focus:outline-blumilk-500 md:px-2 md:w-9 md:hover:bg-gray-50" | ||||
|           > | ||||
|             <ChevronLeftIcon class="w-5 h-5" /> | ||||
|           </span> | ||||
|           <InertiaLink | ||||
|             as="button" | ||||
|             :href="`/vacation/calendar/${currentMonth.value}`" | ||||
|             class="hidden focus:relative items-center p-2 text-sm font-medium text-gray-700 hover:text-gray-900 bg-white hover:bg-gray-50 border-y border-gray-300 md:flex" | ||||
|             class="hidden focus:relative items-center p-2 text-sm font-medium text-gray-700 hover:text-gray-900 bg-white hover:bg-gray-50 border-y border-gray-300 focus:outline-blumilk-500 md:flex" | ||||
|           > | ||||
|             Dzisiaj | ||||
|           </InertiaLink> | ||||
| @@ -32,13 +32,13 @@ | ||||
|             v-if="nextMonth" | ||||
|             as="button" | ||||
|             :href="`/vacation/calendar/${nextMonth.value}`" | ||||
|             class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-r-md border border-l-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50" | ||||
|             class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-r-md border border-l-0 border-gray-300 focus:outline-blumilk-500 md:px-2 md:w-9 md:hover:bg-gray-50" | ||||
|           > | ||||
|             <ChevronRightIcon class="w-5 h-5" /> | ||||
|           </InertiaLink> | ||||
|           <span | ||||
|             v-else | ||||
|             class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-r-md border border-l-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50" | ||||
|             class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-r-md border border-l-0 border-gray-300 focus:outline-blumilk-500 md:px-2 md:w-9 md:hover:bg-gray-50" | ||||
|           > | ||||
|             <ChevronRightIcon class="w-5 h-5" /> | ||||
|           </span> | ||||
|   | ||||
| @@ -112,7 +112,7 @@ | ||||
|         </ListboxLabel> | ||||
|         <div class="relative mt-1 sm:col-span-2 sm:mt-0"> | ||||
|           <ListboxButton | ||||
|             class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm" | ||||
|             class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm" | ||||
|             :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.role, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.role }" | ||||
|           > | ||||
|             <span class="block truncate">{{ form.role.label }}</span> | ||||
| @@ -166,7 +166,7 @@ | ||||
|         </ListboxLabel> | ||||
|         <div class="relative mt-1 sm:col-span-2 sm:mt-0"> | ||||
|           <ListboxButton | ||||
|             class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm" | ||||
|             class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm" | ||||
|             :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }" | ||||
|           > | ||||
|             <span class="block truncate">{{ form.employmentForm.label }}</span> | ||||
|   | ||||
| @@ -112,7 +112,7 @@ | ||||
|         </ListboxLabel> | ||||
|         <div class="relative mt-1 sm:col-span-2 sm:mt-0"> | ||||
|           <ListboxButton | ||||
|             class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm" | ||||
|             class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm" | ||||
|             :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }" | ||||
|           > | ||||
|             <span class="block truncate">{{ form.role.label }}</span> | ||||
| @@ -170,7 +170,7 @@ | ||||
|         </ListboxLabel> | ||||
|         <div class="relative mt-1 sm:col-span-2 sm:mt-0"> | ||||
|           <ListboxButton | ||||
|             class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm" | ||||
|             class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm" | ||||
|             :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }" | ||||
|           > | ||||
|             <span class="block truncate">{{ form.employmentForm.label }}</span> | ||||
|   | ||||
| @@ -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" | ||||
|   | ||||
| @@ -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> | ||||
|   | ||||
| @@ -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> | ||||
|   | ||||
| @@ -71,7 +71,7 @@ | ||||
|               </InertiaLink> | ||||
|             </div> | ||||
|             <div class="pt-3 mt-3"> | ||||
|               <div class="px-2 space-y-1"> | ||||
|               <div class="py-1 px-2 space-y-1"> | ||||
|                 <InertiaLink | ||||
|                   v-for="item in navigation" | ||||
|                   :key="item.name" | ||||
| @@ -107,7 +107,7 @@ | ||||
|       <nav class="flex overflow-y-auto flex-col flex-1 px-2 mt-5 divide-y divide-blumilk-800"> | ||||
|         <InertiaLink | ||||
|           href="/" | ||||
|           :class="[$page.component === 'Dashboard' ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md']" | ||||
|           :class="[$page.component === 'Dashboard' ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 mt-1 text-sm leading-6 font-medium rounded-md']" | ||||
|         > | ||||
|           <HomeIcon class="shrink-0 mr-4 w-6 h-6 text-blumilk-200" /> | ||||
|           Strona główna | ||||
| @@ -152,7 +152,7 @@ | ||||
|                 </div> | ||||
|                 <div> | ||||
|                   <MenuButton | ||||
|                     class="inline-flex justify-center py-2 px-4 w-full text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm" | ||||
|                     class="inline-flex justify-center py-2 px-4 w-full text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500  shadow-sm" | ||||
|                   > | ||||
|                     {{ years.selected.year }} | ||||
|                     <ChevronDownIcon class="-mr-1 ml-2 w-5 h-5" /> | ||||
|   | ||||
| @@ -59,8 +59,8 @@ | ||||
|   "Vacation type: :type": "Rodzaj wniosku: :type", | ||||
|   "From :from to :to (number of days: :days)": "Od :from do :to (liczba dni: :days)", | ||||
|   "Click here for details": "Kliknij, aby zobaczyć szczegóły", | ||||
|   "Vacation request :title is waiting for your technical approval": "Wniosek urlopowy :title czeka na akceptacje techniczną", | ||||
|   "Vacation request :title is waiting for your administrative approval": "Wniosek urlopowy :title czeka na akceptacje administracyjną", | ||||
|   "Vacation request :title is waiting for your technical approval": "Wniosek urlopowy :title czeka na akceptację techniczną", | ||||
|   "Vacation request :title is waiting for your administrative approval": "Wniosek urlopowy :title czeka na akceptację administracyjną", | ||||
|   "The vacation request :title from user :requester is waiting for your technical approval.": "Wniosek urlopowy :title od użytkownika :requester czeka na Twoją akceptację techniczną.", | ||||
|   "The vacation request :title from user :requester is waiting for your administrative approval.": "Wniosek urlopowy :title od użytkownika :requester czeka na Twoją akceptację administracyjną.", | ||||
|   "Vacation request :title has been :status": "Wniosek urlopowy :title został :status", | ||||
|   | ||||
		Reference in New Issue
	
	Block a user