Button/hidden text

[JefMari]

Resolves #52

[srph]

Haha, let's wait for Lemon's approval

[srph]

• IMO, the 3 dots should be set through css content.
• Vertically center the 3 dots
• Also, I think it's better if we had a new button instead of a modifier because it's clearly not (.more-btn or something).

stressed out atm. also i have something to discuss in #52

[srph]

Mind checking #126? Might be nice to have 'em for this feature.

[JefMari]

Heads up!

Im having some difficulties in making the dots vertically centered because when i use 'vetical-align:middle', it doesnt behave the way i want. thus, i ended up using 'display:flex;' to make it vertically centered.

But i see that we dont want to use 'flexbox'. so if you have a suggestion which is better, ill give it a shot! 👍

Just like in #hidden-text-button of primer.css, i add a variant '.-inline' to make it appear inline since it 'display:block' by default. i also add 'top:-3px' when appear inline to make it more ok to view.

[brianbodollo]

self close? <button />

[srph]

Thanks.

• To vertically center the text, make sure the height and line-height have the same values. This is a cheap trick to do the task.
• It should be using display: inline-block so it works with text.
• To align it with the sibling text, make sure the height is around the same as the font-size. Check label / badge.