Polish the editor toolbars and their sizes #891
Conversation
| } | ||
| } | ||
|
|
||
| // compensate for making the button hit area include the visual spacing | ||
| .components-toolbar__control.components-button + .components-toolbar__control.components-button { | ||
| margin-left: -3px; |
There was a problem hiding this comment.
Doesn't this make it asymmetric?
There was a problem hiding this comment.
When the rule is not here, there's as much space for the button left as for the button right. With this rule, the entire spacing goes to the right button.
There was a problem hiding this comment.
Yeah, so this one is a bit hard to explain, to be honest, but it seems to be visually working for me, so if you're seeing any visible weirdness do let me know.
The thing is — the toolbar background, the wrapping container, is now 38px tall including the borders.
Inside this, are 36x36px buttons. So that means they take up the FULL vertical space.
Now these 36x36px buttons have 3px padding. This adds that 3px white bit of space around the dark gray toggled version. This was previously margin.
The thing is, if you put two of these 36x36px buttons next to each other, the white space between them will be 6px. By adding a negative 3px margin to element + element we essentially ensure that that spacing between button is always 3px, when there's more than one.
|
Looking good! Not sure if this is a result of the smaller buttons, but the number on the heading buttons seems slightly off:
|
Yeah I'm increasingly thinking it might be worth exploring an alternate way of picking heading size, as discussed in #522. So I'm thinking about how to best approach that. In the mean time, I polished a bit:
|
|
Please, more specific pull request titles 😁 |
😂 My apologies. I will do better. |
jasmussen
changed the title
Better done early on, right? This relabels the medium blue color with a number, same as the grays.
Previously it did not use the editor monospace font, colors, or sizes.
Biggish change: - The toolbar has grown through regressions, and ended being 46px tall. It's only supposed to be 38px. This fixes that. - Increased the clickable aread to include padding. The bigger the clickable area, the better. As such, hover and active style are now set on the child SVG element, so as to retain the look of the padding.
Screenshot: https://cloudup.com/cthwne4w3zs It was lineheight bleed.
This adds negative left margins to successive editor bar buttons, compensating for their increased hit area, so it visually still looks like there's a 3px margin.
jasmussen
force-pushed
the
add/misc-polish
branch
from
f205524 to
125a20d
Compare
|
Unless anyone objects, I think I'll merge this in the next couple of hours. |
This is a bundle PR, and improves a few things.
$blue-mediumto$blue-medium-500, to match the hierarchy of the other medium bluesScreenshots: