No inner border shown for active buttons if there are 2 elements only
vasyl-shumskyi opened this issue · comments
Looks like inner-border is missing for 2 stacked active buttons. Meanwhile, border showing nicely for 3+ stacked active buttons:
I will do my best to fix ist soon as possible! Please keep in mind that it's always not easy to implement "workarounds" for borders on retina displays. And this problem only exists on retina displays.
But if you take a look at native macOS applications, segmented controls that are activated more than once doesn't show borders between the activated segmented buttons.
The problems is that I use 'box-shadow' to create "hairline borders" for retina displays(Chromium doesn't supports 0.5px border). And at the moment I can't regulate the scaling factor on x or y axis of a box shadow. Therefore it's not possible to fix it at the moment without changing the workaround.
Thanks for your reply!
I really need to fix this somehow and will be fine even with hardcoding, if you show me what needs to be changed
Because it just looks now like one wide button...
Thanks again!
Okay, but what exactly do you need?
Do you want the borders even when cocoa doesn't looks so? Okay, I totally understand. To implement something like this, I have to rethink the whole workaround.
But I will do my best to implement it :)
Okay, there is a solution now.
I use background-image with SVG to set the new hairline borders.
Now, you have the possibility to choose if you want the borders or not. Just add the class "separated" to the btn-group parent element.
Look at: https://jsfiddle.net/rbg0q4b1/
(Please use Electron or Chrome) The new code is published ;-) https://github.com/MauriceConrad/PhotonKit-Components/tree/master/Photon-Components/segment
That's wonderful! Just tested new code and it looks amazing! Thanks for the blazingly quick workaround