Fix the .dot components about pup-legacy

[realplatanopapi]

Instead of vertically aligning with flexbox, you could try aligning them by setting display: inline-block and vertical-align: middle for both elements

[brettlangdon]

Hmm... seems to work, but I think vertical-align: baseline lines up a little better.

Baseline

Middle

However, is this starting to get very specific to .dot?

Should we consider:

<span class="dot">
  <span class="dot__label">Blue:&nbsp;</span>
  <span class="dot__icon"></span>
</span>

Or just a more... robust .dot component?

[brettlangdon]

Also, baseline really only works for .dot--small just a normal dot kind of sucks and doesn't line up right... maybe we should drop .dot--small and make that the default/only size?

[brettlangdon]

@restlessbit what do you think about separating .inline-center and .dot. It doesn't seem like I can get exactly what I want... unless we add an .inline-baseline helper as well... which seems weird.

Does it make sense to have a component structure like I suggested with having the label be a part of .dot?

[realplatanopapi]

Having a block of text with inline-center and applying that to the block looks good to me:

[brettlangdon]

idk, the dot looks too high to me.

Looking at it in this context:

Baseline

Middle

Middle just... looks off to me

[realplatanopapi]

i think both are fine tbh 😺