mirror of
https://github.com/eitchtee/WYGIWYH.git
synced 2026-03-30 06:02:10 +02:00
34 lines
1.2 KiB
HTML
34 lines
1.2 KiB
HTML
<div class="tw-min-h-16">
|
|
<div
|
|
id="fab-wrapper"
|
|
class="tw-fixed tw-bottom-5 tw-right-5 tw-ml-auto tw-w-max tw-flex tw-flex-col tw-items-end mt-5">
|
|
<div
|
|
id="menu"
|
|
class="tw-flex tw-flex-col tw-items-end tw-space-y-6 tw-transition-all tw-duration-300 tw-ease-in-out tw-opacity-0 tw-invisible tw-hidden tw-mb-2">
|
|
|
|
{{ slot }}
|
|
</div>
|
|
|
|
<button
|
|
class="btn btn-primary rounded-circle p-0 tw-w-12 tw-h-12 tw-flex tw-items-center tw-justify-center tw-shadow-lg hover:tw-shadow-xl focus:tw-shadow-xl tw-transition-all tw-duration-300 tw-ease-in-out"
|
|
_="
|
|
on click or focusout
|
|
if #menu matches .tw-invisible and event.type === 'click'
|
|
add .tw-rotate-45 to #fab-icon
|
|
remove .tw-invisible from #menu
|
|
remove .tw-hidden from #menu
|
|
remove .tw-opacity-0 from #menu
|
|
else
|
|
wait 0.2s
|
|
remove .tw-rotate-45 from #fab-icon
|
|
add .tw-invisible to #menu
|
|
add .tw-hidden to #menu
|
|
add .tw-opacity-0 to #menu
|
|
end
|
|
"
|
|
>
|
|
<i id="fab-icon" class="fa-solid fa-plus tw-text-3xl tw-transition-transform tw-duration-300 tw-ease-in-out"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|