allow more triangle styling and better placement

[malteludwig]

PR Checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• [ x] Feature
• Code style update (formatting)
• Refactoring (no functional changes)
• Documentation content changes

Other information

• draw triangle using border-top to permit better size and placement handling.
• add a drop-shadow to mimic your design (instead of border-box)
• add vars allow styling from outside

Issue Number: N/A

[peterpeterparker]

Thanks for the PR 👍.

Had to make few adjustements after merge and I released it v0.0.44 afterwards.

[malteludwig]

@peterpeterparker There is a case where the triangle is off the toolbar, when you select text at the very left:

I had added this: left: max(var(--stylo-toolbar-triangle-start), calc(var(--stylo-triangle-width) / 2)); to prevent the triangle going to far to the left if --stylo-toolbar-triangle-star is negative

[peterpeterparker]

@malteludwig thanks for the ping. this did not work if the position was set in percent - i.e. when the menu set 50% the triangle was not correct positioned neither.

I fixed this edge case in this commit d9b6696

Thanks for the ping