The UiSlider's marker text is now showing correctly in the docs because the .page class has line-height: 1.6. When used in a project with different line heights the marker text position is not aligned well vertically. This fix addresses that.
There was an issue with the previous PR so I created a new one.
The general issue here is that the "drop" SVG icon has not the same width and height. By calculating the ratio between the height and the width we can make sure that the text will always be at the center of the "visual" circle. Let me know what you think of this solution. It looks a bit dirty but seems to be the best one.
I have also extracted the font size to a variable so it can be configured, it also helps to test if the marker text is positioned correctly visually. This will be handy when having larger text, but I can reverse this if you think it's too much.
The UiSlider's marker text is now showing correctly in the docs because the .page class has line-height: 1.6. When used in a project with different line heights the marker text position is not aligned well vertically. This fix addresses that.
There was an issue with the previous PR so I created a new one.
The general issue here is that the "drop" SVG icon has not the same width and height. By calculating the ratio between the height and the width we can make sure that the text will always be at the center of the "visual" circle. Let me know what you think of this solution. It looks a bit dirty but seems to be the best one.
I have also extracted the font size to a variable so it can be configured, it also helps to test if the marker text is positioned correctly visually. This will be handy when having larger text, but I can reverse this if you think it's too much.