Kirby page sticky content shouldn't be transparent

[thupi]

Which issue does this PR close?

This PR closes #2685

What is the new behavior?

This PR adds a pseudo element behind the sticky content that expands 16px to the left and right with the same logic as with the divider. This was we can cover the entire area with a background-color without changing the layout.

Does this PR introduce a breaking change?

• Yes
• No

Are there any additional context?

Most context should be available in the initial issue.

Checklist:

The following tasks should be carried out in sequence in order to follow the process of contributing correctly.

Reminders

• Make sure you have implemented tests following the guidelines in: "The good: Test".
• Make sure you have updated the cookbook with examples and showcases (for bug fixes, enhancements & new components).

Review

• Determine if your changes are a fix, feature or breaking-change, and add the matching label to your PR. If it is tooling, dependency updates or similar, add ignore-for-release.
• Do a self-review.
• Request that the changes are code-reviewed
• Request that the changes are UX reviewed (only necessary if your PR introduces visual changes)

When the pull request has been approved it will be merged to develop by Team Kirby.

[RasmusKjeldgaard]

Looks good.

One thing I thought about is that the two implementations are so close to each other conceptually that it could just be one ::before that fills the whole pinned content with the background color, and has a 1px border bottom, but I am unsure if that is doable in reality.

Also, remember to remove the [Bug] text from the PR title so it looks good on the changelog 👼

[thupi]

@RasmusKjeldgaard We could do that but I wasn't sure why it was made as a background in the first place. I thought this could be to enable the option to use opacity for scroll animations or so :-) By using border we won't be able to use opacity as this would then include the background :-) ?

I can make the change if you would like but I think the current implementation would be more flexible going forward :-)

[RasmusKjeldgaard]

By using border we won't be able to use opacity as this would then include the background :-) ?

Exactly the kind of insight I was lacking.

🚢 it!