search

picocss / pico

Minimal CSS Framework for semantic HTML
https://picocss.com
MIT License
13.82k stars 406 forks source link

v2: inconsistent switch states #467

Closed mpldr closed 8 months ago

mpldr commented 8 months ago

Describe the issue

The switches as shown in the docs have an inconsistency in the "knob position". The off-state has a different "border" width, than the on-state

Current Behavior

2024-02-23-11-42-48

Expected Behavior

Consistent spacing

2024-02-23-11-42-48

Reproduction URL

https://picocss.com/docs/forms/switch

Environment

Reproduced on Firefox and Chromium

Mozilla/5.0 (X11; Linux x86_64; rv:122.0) Gecko/20100101 Firefox/122.0

and

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

mpldr commented 8 months ago

Subtle, but it really bugs me. And unfortunately I can't unsee it ^^

mpldr commented 8 months ago

I know, this sounds borderline nitpicky, but it's still not the same. Speaking in terms of pixels, the left gap is (on my 1440p monitor at 100% scaling) 3px, while the right one is 4px. Yes, I know this sounds dumb, and it probably is. I have also noticed that the switch isn't a circle, but an oval. It's not 50% either, that is slightly oval in the other direction.

I'm sorry, this feels like such a stupid thing, but it for some reason really bugs me.

mpldr commented 8 months ago

Maybe I just shouldn't use a switch…

lucaslarroche commented 8 months ago

@mpldr, you're right. I looked closer, and the thumb is not round, and the borders are not consistent. I will publish a patch

lucaslarroche commented 8 months ago

@mpldr, done with v2.0.6

https://github.com/picocss/pico/assets/23470684/250b589a-95c3-4537-8524-3181d9159f5c