Merge pull request #2486 from brkcvn/text-hover

Hover animation development
This commit is contained in:
Burak Civan
2022-06-28 15:37:32 +03:00
committed by GitHub
39 changed files with 12320 additions and 856 deletions

View File

@ -190,18 +190,18 @@
@if (! $hideDiscount && in_array(setting('localisation.discount_location'), ['item', 'both']))
<div class="text-left border-0 p-0 mr-16" v-if="!row.add_discount">
<button type="button" class="text-xs text-purple" @click="onAddLineDiscount(index)">
<span class="border-b border-transparent transition-all hover:border-purple">
<x-link.hover color="to-purple">
{{ trans('general.title.add', ['type' => trans('invoices.discount')]) }}
</span>
</x-link.hover>
</button>
</div>
@endif
<div class="text-right border-0 p-0 pr-4">
<button type="button" class="text-xs text-purple" @click="onAddTax(index)">
<span class="border-b border-transparent transition-all hover:border-purple">
<x-link.hover color="to-purple">
{{ trans('general.title.add', ['type' => trans_choice('general.taxes', 1)]) }}
</span>
</x-link.hover>
</button>
</div>
</div>

View File

@ -79,10 +79,10 @@
<td class="border-t-0 py-0"></td>
<td class="text-right border-t-0 border-r-0 border-b-0 align-middle py-0 pr-0">
<div v-if="show_discount_text">
<span class="border-b border-transparent transition-all text-sm text-purple cursor-pointer hover:border-purple" v-if="!totals.discount_text" @click="onAddDiscount()">
<div v-if="show_discount_text" v-if="!totals.discount_text" @click="onAddDiscount()">
<x-link.hover color="to-purple">
{{ trans('invoices.add_discount') }}
</span>
</x-link.hover>
</div>
<span v-if="totals.discount_text" v-html="totals.discount_text"></span>

View File

@ -35,9 +35,9 @@
override="class"
class="py-1.5 mb-3 sm:mb-0 text-xs bg-transparent hover:bg-transparent font-medium leading-6"
>
<span class="border-b border-transparent transition-all hover:border-black">
<x-link.hover>
{{ trans('documents.accept_payment_online') }}
</span>
</x-link.hover>
</x-link>
@endif
</div>
@ -62,16 +62,16 @@
@if (! empty($transaction->contact) && $transaction->contact->email)
<x-button id="button-email-send" class="text-purple mt-1" override="class" @click="onEmail('{{ route($transactionEmailRoute, $transaction->id) }}')">
<span class="border-b border-transparent transition-all hover:border-purple">
<x-link.hover color="to-purple">
{{ trans('general.title.send', ['type' => trans_choice('general.receipts', 1)]) }}
</span>
</x-link.hover>
</x-button>
@else
<x-tooltip message="{{ trans('invoices.messages.email_required') }}" placement="top">
<x-button class="text-purple mt-1" override="class" disabled="disabled">
<span class="border-b border-transparent transition-all hover:border-purple">
<x-link.hover color="to-purple">
{{ trans('general.title.send', ['type' => trans_choice('general.receipts', 1)]) }}
</span>
</x-link.hover>
</x-button>
</x-tooltip>
@endif
@ -84,9 +84,9 @@
class="text-purple mt-1"
override="class"
>
<span class="border-b border-transparent transition-all hover:border-purple">
<x-link.hover color="to-purple">
{{ trans('general.title.edit', ['type' => trans_choice('general.payments', 1)]) }}
</span>
</x-link.hover>
</x-button>
<span> - </span>
@ -105,7 +105,7 @@
:message="$message"
:label="trans('general.title.delete', ['type' => trans_choice('general.payments', 1)])"
class="text-purple mt-1"
text-class="border-b border-transparent transition-all hover:border-purple"
text-class="bg-no-repeat bg-0-2 bg-0-full hover:bg-full-2 bg-gradient-to-b from-transparent to-purple transition-backgroundSize"
override="class"
/>
</div>

View File

@ -46,16 +46,16 @@
@if (! empty($transaction->contact) && $transaction->contact->email)
<x-button id="button-email-send" class="text-purple mt-1" override="class" @click="onEmail('{{ route($transactionEmailRoute, $transaction->id) }}')">
<span class="border-b border-transparent transition-all hover:border-purple">
<x-link.hover color="to-purple">
{{ trans('general.title.send', ['type' => trans_choice('general.receipts', 1)]) }}
</span>
</x-link.hover>
</x-button>
@else
<x-tooltip message="{{ trans('invoices.messages.email_required') }}" placement="top">
<x-button class="text-purple mt-1" override="class" disabled="disabled">
<span class="border-b border-transparent transition-all hover:border-purple">
<x-link.hover color="to-purple">
{{ trans('general.title.send', ['type' => trans_choice('general.receipts', 1)]) }}
</span>
</x-link.hover>
</x-button>
</x-tooltip>
@endif
@ -68,9 +68,9 @@
class="text-purple mt-1"
override="class"
>
<span class="border-b border-transparent transition-all hover:border-purple">
<x-link.hover color="to-purple">
{{ trans('general.title.edit', ['type' => trans_choice('general.payments', 1)]) }}
</span>
</x-link.hover>
</x-button>
<span> - </span>
@ -89,7 +89,7 @@
:message="$message"
:label="trans('general.title.delete', ['type' => trans_choice('general.payments', 1)])"
class="text-purple mt-1"
text-class="border-b border-transparent transition-all hover:border-purple"
text-class="bg-no-repeat bg-0-2 bg-0-full hover:bg-full-2 bg-gradient-to-b from-transparent to-purple transition-backgroundSize"
override="class"
/>
</div>

View File

@ -56,8 +56,10 @@
</div>
<div class="ltr:mr-4 rtl:ml-4" v-if="bulk_action.count">
<button type="button" class="text-sm border-b border-transparent transition-all hover:border-black" @click="onClearBulkAction">
<span>{{ trans('general.clear') }}</span>
<button type="button" @click="onClearBulkAction">
<x-link.hover>
{{ trans('general.clear') }}
</x-link.hover>
</button>
</div>
</div>

View File

@ -113,9 +113,9 @@
<div class="flex ltr:ml-2 rtl:mr-2">
<span class="w-28 text-left block text-base truncate">
<span class="border-b border-transparent transition-all hover:border-black">
<x-link.hover>
{{ Str::limit(setting('company.name'), 22) }}
</span>
</x-link.hover>
</span>
@can('read-common-companies')

View File

@ -14,9 +14,9 @@
<div class="grid grid-cols-2 gap-2">
@foreach ($categories as $slug => $category)
<x-link href="{{ $categoryUrl($slug) }}" class="font-semibold text-sm ltr:pr-4 rtl:pl-4 lg:pr-0 truncate bg-transparent" override="class">
<span class="border-b border-transparent transition-all hover:border-black">
<x-link.hover>
{{ $category }}
</span>
</x-link.hover>
</x-link>
@endforeach
</div>
@ -80,27 +80,27 @@
<div class="flex flex-row items-end lg:items-center mb-1 divide-x divide-black-400">
<x-link href="{{ route('apps.home.index') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
<span class="border-b border-transparent transition-all hover:border-black-400">
<x-link.hover color="to-black-400">
{{ trans('modules.home') }}
</span>
</x-link.hover>
</x-link>
<x-link href="{{ route('apps.new') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
<span class="border-b border-transparent transition-all hover:border-black-400">
<x-link.hover color="to-black-400">
{{ trans('modules.new') }}
</span>
</x-link.hover>
</x-link>
<x-link href="{{ route('apps.paid') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
<span class="border-b border-transparent transition-all hover:border-black-400">
<x-link.hover color="to-black-400">
{{ trans('modules.top_paid') }}
</span>
</x-link.hover>
</x-link>
<x-link href="{{ route('apps.free') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
<span class="border-b border-transparent transition-all hover:border-black-400">
<x-link.hover color="to-black-400">
{{ trans('modules.top_free') }}
</span>
</x-link.hover>
</x-link>
</div>
</div>

View File

@ -84,9 +84,9 @@
<div class="flex ltr:ml-2 rtl:mr-2">
<span class="w-28 text-left block text-base truncate">
<span class="border-b border-transparent transition-all hover:border-black">
<x-link.hover>
{{ Str::limit(setting('company.name'), 22) }}
</span>
</x-link.hover>
</span>
@can('read-common-companies')

View File

@ -0,0 +1,10 @@
<span
@class([
$color,
$groupHover ? 'group-hover:bg-full-2' : 'hover:bg-full-2',
'bg-no-repeat bg-0-2 bg-0-full bg-gradient-to-b from-transparent transition-backgroundSize'
])
>
{!! $slot !!}
</span>

View File

@ -11,9 +11,9 @@
@if ($attributes->has('route'))
<div class="flex justify-center items-center group">
<a href="{{ route($attributes->get('route')) }}">
<span class="border-b border-transparent transition-all group-hover:border-black">
<x-link.hover group-hover>
{{ trans('modules.see_all_type', ['type' => $attributes->get('title')]) }}
</span>
</x-link.hover>
</a>
<i class="material-icons text-sm ltr:ml-1 rtl:mr-1 transform transition-all group-hover:translate-x-1">arrow_forward</i>

View File

@ -1,8 +1,8 @@
<div>
<h2 class="lg:text-lg font-medium text-black">
<span class="border-b border-transparent transition-all group-hover:border-black">
<x-link.hover group-hover>
{{ $title }}
</span>
</x-link.hover>
</h2>
@if (! empty($description))

View File

@ -22,8 +22,10 @@
@if (! empty($button) && $button->isNotEmpty())
{!! $button !!}
@else
<a href="{!! $url !!}" class="border-b border-transparent transition-all hover:border-white">
{{ $textAction }}
<a href="{!! $url !!}">
<x-link.hover color="to-white">
{{ $textAction }}
</x-link.hover>
</a>
@endif
</div>

View File

@ -14,8 +14,10 @@
{!! $item->description !!}
</p>
<a href="{{ $item->action }}" class="font-light text-sm border-b border-transparent transition-all hover:border-black" target="_blank">
{{ $item->learn_more }}
<a href="{{ $item->action }}" class="font-light text-sm" target="_blank">
<x-link.hover>
{{ $item->learn_more }}
</x-link.hover>
</a>
</div>

View File

@ -14,8 +14,10 @@
{!! $item->description !!}
</p>
<a href="{{ $item->action }}" class="font-light text-sm border-b border-transparent transition-all hover:border-black">
{{ $item->learn_more }}
<a href="{{ $item->action }}" class="font-light text-sm">
<x-link.hover>
{{ $item->learn_more }}
</x-link.hover>
</a>
</div>

View File

@ -5,8 +5,10 @@
<div class="relative w-full text-left cursor-pointer group"
x-on:click="attachment !== 1 ? attachment = 1 : attachment = null"
>
<span class="font-medium border-b border-transparent transition-all group-hover:border-black">
{{ trans_choice('general.attachments', 2) }}
<span class="font-medium">
<x-link.hover group-hover>
{{ trans_choice('general.attachments', 2) }}
</x-link.hover>
</span>
<div class="text-black-400 text-sm">

View File

@ -2,8 +2,10 @@
<button class="relative w-full text-left cursor-pointer group"
x-on:click="children !== 1 ? children = 1 : children = null"
>
<span class="font-medium border-b border-transparent transition-all group-hover:border-black">
{{ trans_choice('general.transactions', 2) }}
<span class="font-medium">
<x-link.hover group-hover>
{{ trans_choice('general.transactions', 2) }}
</x-link.hover>
</span>
<div class="text-black-400 text-sm">

View File

@ -4,8 +4,10 @@
<button class="relative w-full text-left group"
x-on:click="create !== 1 ? create = 1 : create = null"
>
<span class="font-medium border-b border-transparent transition-all group-hover:border-black">
{{ trans('general.create') }}
<span class="font-medium">
<x-link.hover>
{{ trans('general.create') }}
</x-link.hover>
</span>
<div class="text-black-400 text-sm">

View File

@ -7,8 +7,10 @@
<button class="relative w-full text-left cursor-pointer group"
x-on:click="schedule !== 1 ? schedule = 1 : schedule = null"
>
<span class="font-medium border-b border-transparent transition-all group-hover:border-black">
{{ trans_choice('general.schedules', 1) }}
<span class="font-medium">
<x-link.hover group-hover>
{{ trans_choice('general.schedules', 1) }}
</x-link.hover>
</span>
<div class="text-black-400 text-sm">

View File

@ -1,8 +1,10 @@
@if ($transfer->attachment)
<div class="border-b border-gray-200 pb-4" x-data="{ attachment : null }">
<div class="relative w-full text-left cursor-pointer group" x-on:click="attachment !== 1 ? attachment = 1 : attachment = null">
<span class="font-medium border-b border-transparent transition-all group-hover:border-black">
{{ trans_choice('general.attachments', 2) }}
<span class="font-medium">
<x-link.hover group-hover>
{{ trans_choice('general.attachments', 2) }}
</x-link.hover>
</span>
<div class="text-black-400 text-sm">

View File

@ -2,8 +2,10 @@
<div class="border-b pb-4" x-data="{ create : null }">
<button class="relative w-full text-left group" x-on:click="create !== 1 ? create = 1 : create = null">
<span class="font-medium border-b border-transparent transition-all group-hover:border-black">
{{ trans('general.create') }}
<span class="font-medium">
<x-link.hover group-hover>
{{ trans('general.create') }}
</x-link.hover>
</span>
<div class="text-black-400 text-sm">

View File

@ -7,7 +7,11 @@
<div class="flex items-center">
@if ($report = $class->getReportUrl())
<a href="{{ $report }}" class="text-purple text-sm mr-3 border-b border-transparent transition-all hover:border-purple hover:text-purple-700">{{ trans('widgets.view_report') }}</a>
<a href="{{ $report }}" class="text-purple text-sm mr-3">
<x-link.hover color="to-purple">
{{ trans('widgets.view_report') }}
</x-link.hover>
</a>
@endif
<x-dropdown id="dropdown-widget-{{ $class->model->id }}">