Problem/Motivation
User themes can have something like font-size: 1vw;
(just for instance) set on html
tag, to have proportional scaling of all UI elements no matter which resolution of the screen.
Almost all sizes of everything related to Navigation module are based on --admin-toolbar-rem
CSS variable, which is doing its job great. However we still have few UI elements with the px
sizes set, or some where don't have sizes set at all (for instance logotype)
Steps to reproduce
1. Standard profile installation
2. Enable Navigation module
3. Then on any page try to zoom out or zoom in
4. Then add for instance font-size: 1vw;
to the html
tag and try to zoom out or zoom it again
I found 3 UI elements (could be more, but seems only 3, at least i didn't find anything else) where we have to set or replace sizes in rems:
1. Logotype
2. Dividing line between sections in navigation bar
3. Outlines/borders, hovers and focuses (to be checked for all interactive elements which does have these states with outlines)
Proposed resolution
1. Convert existing hardcoded px values into rems (using --admin-toolbar-rem
css variable)
2. For the elements like logotype - add sizes