Change bottom border for sticky "merge request tab holder" and "diff bar" to a translucent shadow

What does this MR do?

Changes bottom borders for sticky "merge request tab holder" and "diff bar" to translucent shadows

Are there points in the code the reviewer needs to double check?

• Introduced function which translates the original variable hex color to a certain opacity black. This let's us keep using the same variable, as sass does the conversion (so #e5e5e5 for example becomes rgba(0,0,0,0.1)). I added a functions.scss file, similar to the mixins.scss file. See for demo: https://codepen.io/strages/pen/eEoOzp?editors=1100

Why was this MR needed?

When UI elements become sticky when scrolling, they are basically elevated above the rest of the UI which will scroll underneath. The bottom border can double function as a shadow to enhance the idea of this UI element being on top of the other. The effect is very subtle, but adds up.

Screenshots (if relevant)

Before

After

See how the letters from the text in the content scrolling underneath the tabs/bar can now shimmer through, to give a sense of shadow:

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• Documentation created/updated
• API support added
• Tests added for this feature/bug
• Review
  • Has been reviewed by UX
  • Has been reviewed by Frontend
  • Has been reviewed by Backend
  • Has been reviewed by Database
• Conform by the merge request performance guides
• Conform by the style guides
• Squashed related commits together

What are the relevant issue numbers?