shihaam/akaunting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

app show page toggle styling

Browse Source
This commit is contained in:
Cüneyt Şentürk 2022-06-24 10:20:38 +03:00
parent 08bd469057
commit af515d470f
1 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
resources/views/components/layouts/modules/show/toggle.blade.php
View File

@ -1,23 +1,23 @@
<x-form>
<div class="lg:absolute lg:ltr:right-0 lg:rtl:left-0 top-4">
<label for="priceToggle" class="flex items-center cursor-pointer" x-on:click="price_type = ! price_type">
<div class="relative">
<input type="checkbox" id="priceToggle" class="sr-only" x-model="price_type">
<div class="lg:absolute lg:ltr:right-0 lg:rtl:left-0 top-4" x-on:click="price_type = ! price_type">
<div class="relative" x-model="price_type">
<div class="w-36 flex items-center bg-gray-200 p-1 ltr:mr-2 rtl:ml-2 rounded-lg">
<button type="button"
class="w-18 flex justify-center px-2"
x-bind:class="price_type == true ? 'btn-outline-primary' : 'bg-white rounded-lg'"
>
{{ trans('general.monthly') }}
</button>
<div class="bg-purple-300 w-24 h-7 rounded-full">
<span id="apps-toggle-monthly" class="monthly-badge text-xs text-white float-left ml-3 mt-1.5" x-show="price_type == true">
{{ trans('general.monthly') }}
</span>
<span id="apps-toggle-yearly" class="yearly-badge text-xs text-white float-right mr-3 mt-1.5" x-show="price_type == false">
{{ trans('general.yearly') }}
</span>
</div>
<div class="dot absolute left-1 top-1 bg-white w-5 h-5 rounded-full transition"
x-bind:style="price_type == true ? 'transform: translateX(333%)' : ' transform: translateX(0) '"
></div>
<button type="button"
class="w-18 flex justify-center px-2"
x-bind:class="price_type == false ? 'btn-outline-primary' : 'bg-white rounded-lg'"
>
{{ trans('general.yearly') }}
</button>
</div>
</label>
</div>
</div>
</x-form>