duckduckgo / duckduckgo-styles

Common styling elements for all DuckDuckGo properties
Other
40 stars 13 forks source link

Fix popover fade-out animation, add darker variation of the popover background #48

Closed kdzwinel closed 6 years ago

kdzwinel commented 6 years ago

Tested on Chrome, Firefox, Safari, Edge and IE11.

Fade-out animation fix

Popover fade-out animation wasn't working because 'visibility: hidden' was immediately applied after 'is-shown' class was removed hiding the whole thing instantaneously.

BEFORE Gif from production (animation slowed down to 1/4 of regular speed):

modal-visibility-broken mov

The fix was to also animate 'visibility'. Also, z-index has to be 300 through the whole animation otherwise search bar will show over the modal background.

AFTER (animation slowed down to 1/4 of regular speed):

modal-visibility-fixed mov

Darker background variation

In the manual location project we need a better contrast between the background and the map shown in the popup. See project designs for more info.