When we hover over links then the background color appears over the link has a specific height 0f -30px, In some cases when we have 2-3 lines of URL then this is looking broke. Here I am adding a screenshot for reference.

CommentFileSizeAuthor
#8 After--patch.jpg419.05 KBranjith_kumar_k_u
#8 Before--patch.jpg512.27 KBranjith_kumar_k_u
#7 before-patch.png689.61 KBkomalk
#7 After-patch.png705.18 KBkomalk
#7 interdiff_2-7.txt1.22 KBkomalk
#7 3183112-7.patch1.1 KBkomalk
#4 Drupal_9_Olivero__Turning_Conversation_into_a_Core_Initiative___Olivero.jpg481.5 KBproeung
#2 after-patch.png33.22 KBgauravvvv
#2 Box-shadow-updated-3183112-2.patch492 bytesgauravvvv
before-patch.png31.37 KBgauravvvv

Comments

Gauravmahlawat created an issue. See original summary.

gauravvvv’s picture

gauravvvv commented
Status: Active » Needs review
StatusFileSize
new Box-shadow-updated-3183112-2.patch492 bytes
new after-patch.png33.22 KB
pameeela’s picture

pameeela commented
Version: 10.0.x-dev » 9.2.x-dev

Thanks for the patch! I think Olivero bugs should be against 9.2.x.

proeung’s picture

proeung
she/her
commented
Status: Needs review » Needs work
StatusFileSize
new Drupal_9_Olivero__Turning_Conversation_into_a_Core_Initiative___Olivero.jpg481.5 KB

@Gauravmahlawat Thank you for opening this issue and submitting a patch.

+++ b/css/components/text-content.css
@@ -141,7 +141,7 @@
+        box-shadow: inset 0 -100vw 0 0 #d9ecfa;

Let's use `em` unit instead of `vw` so that we have a smoother transition of the box-shadow/background on hover. Please see attached for an example.

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented

I just checked locally, maybe -2em or -3em value will be enough? To keep smoother animation, since em is based on font-size * line-height. Probably it will be enough

komalk’s picture

komalk commented
Assigned: Unassigned » komalk

Looking into this.

komalk’s picture

komalk commented
Assigned: komalk » Unassigned
Status: Needs work » Needs review
StatusFileSize
new 3183112-7.patch1.1 KB
new interdiff_2-7.txt1.22 KB
new After-patch.png705.18 KB
new before-patch.png689.61 KB

Added -2em value that is enough to keep smoother animation as mentioned in #5.
Attached screenshot for reference.
Review the patch.

ranjith_kumar_k_u’s picture

ranjith_kumar_k_u commented
StatusFileSize
new Before--patch.jpg512.27 KB
new After--patch.jpg419.05 KB

The patch works fine
Before patch
before patch

After Patch
after patch

ranjith_kumar_k_u’s picture

ranjith_kumar_k_u commented
Status: Needs review » Reviewed & tested by the community

  • lauriii committed eefad6e on 9.2.x 
    Issue #3183112 by komalk, Gauravmahlawat, ranjith_kumar_k_u, proeung,...
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Version: 9.2.x-dev » 9.1.x-dev

Tested this manually with various different elements, font-sizes and line-heights and it seems to work fine 👍

Committed eefad6e and pushed to 9.2.x. Thanks!

Leaving open for backport to 9.1.x.

  • lauriii committed 76f5595 on 9.1.x 
    Issue #3183112 by komalk, Gauravmahlawat, ranjith_kumar_k_u, proeung,...
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Fixed

Cherry-picked to 9.1.x.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.