inveniosoftware / invenio-theme

Invenio standard theme.
https://invenio-theme.readthedocs.io
MIT License
7 stars 53 forks source link

Buttons: fix icon aligment #340

Closed Pineirin closed 1 year ago

Pineirin commented 1 year ago

closes: inveniosoftware/invenio-theme#335

Pineirin commented 1 year ago

Explanation of the change:

This issue is caused by the addition of the "labeled icon" class. My hypothesis is that the "position: absolute" is causing the problem, as now the icon is not centered in relation to the parent element but using a "transform: translateY(-50%) instead. The previous solution was creating a misalignment because the height of the text and the height of the icon were different, causing the center to be in different places. While the height of the icon is equal to the line height defined for the parent element, the height of the text is equal to the line height plus two pixels; as far as I understand, this two pixels come from the white space of the text. The idea of the solution was to add those two pixels to the height of the icon element so it both elements have the same height and they get properly aligned.

As seen in the screenshots now the icon keeps centered with different line-heights. Screenshot from 2022-11-07 09-16-35 Screenshot from 2022-11-07 09-16-54 Screenshot from 2022-11-07 09-17-12 Screenshot from 2022-11-07 09-17-22

Even if the alignment still seems a bit off, it is due to the icon not being symmetric, and using another icons it becomes more clear. Screenshot from 2022-11-07 09-26-49

kpsherva commented 1 year ago

closed as this won't be an optimal solution