diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css index 013cf69e..6da64e6c 100644 --- a/app/assets/stylesheets/application.tailwind.css +++ b/app/assets/stylesheets/application.tailwind.css @@ -5,6 +5,20 @@ @tailwind components; @tailwind utilities; +@keyframes flash-yellow { + 0% { + background-color: #f1e3ab98; + } + 100% { + background-color: transparent; + } +} + +@layer utilities { + .animate-flash-yellow { + animation: flash-yellow 1s ease-in-out; + } +} /* @layer components { diff --git a/app/views/checklist_items/_link.html.erb b/app/views/checklist_items/_link.html.erb index fb4fec6e..9a347a51 100644 --- a/app/views/checklist_items/_link.html.erb +++ b/app/views/checklist_items/_link.html.erb @@ -4,7 +4,7 @@ link_to( edit_checklist_item_path(checklist_item), data: { turbo_frame: dom_id(checklist_item) }, - class: 'flex items-center space-x-2 text-gray-700 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-800' + class: "flex items-center space-x-2 text-gray-700 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-800 rounded-sm #{local_assigns[:link_class]}" ) do %> <%= checklist_item.characteristic.name %> <%= render_icon(:chat) if checklist_item.comment.present? %> diff --git a/app/views/checklist_items/update.turbo_stream.erb b/app/views/checklist_items/update.turbo_stream.erb index 4a388d03..46c74067 100644 --- a/app/views/checklist_items/update.turbo_stream.erb +++ b/app/views/checklist_items/update.turbo_stream.erb @@ -1,5 +1,5 @@ <%= turbo_stream.replace @checklist_item do %> <%= turbo_frame_tag dom_id(@checklist_item) do %> - <%= render 'link', checklist_item: @checklist_item %> + <%= render 'link', checklist_item: @checklist_item, link_class: 'transition-colors ease-in duration-700 animate-flash-yellow' %> <% end %> <% end %>