TASK: Use AnimatedArrow on BentoBoxes

neos · Feb 21, 2024 · 09bf489 · 09bf489
1 parent f548b9b
commit 09bf489
Show file tree

Hide file tree

Showing 3 changed files with 321 additions and 40 deletions.
diff --git a/...ages/Neos.Presentation/Resources/Private/Fusion/Molecule/BentoBoxes/BentoBoxes.Box.fusion b/...ages/Neos.Presentation/Resources/Private/Fusion/Molecule/BentoBoxes/BentoBoxes.Box.fusion
@@ -75,7 +75,7 @@ prototype(Neos.Presentation:BentoBoxes.Box) < prototype(Neos.Fusion:Component) {
 
                     <Neos.Presentation:Paragraph
                         @if={props.link} display="cta-xl" class="mt-8 2xl:mt-14 text-md mdl:text-lg">
-                        {props.linkLabel} <Neos.Presentation:Icon name="pixel-chevron-right" class="inline-block h-6" />
+                        {props.linkLabel} <Neos.Presentation:Atom.AnimatedArrow />
                     </Neos.Presentation:Paragraph>
                 </Neos.Fusion:Tag>
 

diff --git a/...onPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/BentoBoxes/BentoBoxes.pcss b/...onPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/BentoBoxes/BentoBoxes.pcss
@@ -42,6 +42,14 @@
         --bento-boxes-column-width: 50%;
         width: var(--bento-boxes-column-width);
       }
+
+      .n-paragraph svg {
+        @apply inline-block;
+      }
+
+      &:hover .n-paragraph svg > path:first-child {
+        @apply scale-x-100;
+      }
     }
 
     @screen md {