mozilla / webmaker-core

React-based core for Webmaker shared across all platforms
https://foundation.mozilla.org/en/artifacts/webmaker/
Mozilla Public License 2.0
64 stars 39 forks source link

Add padding to text element for background color #908

Closed xmatthewx closed 8 years ago

xmatthewx commented 8 years ago

When a text element has a background color, a little padding would improve appearance (particularly on the left/right).

alanmoo commented 8 years ago

This can be tricky, I think I had a specific reason for the padding being set this way when I fixed the layout rendering, so we just have to be careful when changing this.

xmatthewx commented 8 years ago

What if we used a border of the same color and opacity? Or outline since that isn't counted in box model dimensions? The look is less than ideal currently. cc @vazquez

alanmoo commented 8 years ago

With #858 getting fixed, should I still take a look at this? @vazquez what do you think?

xmatthewx commented 8 years ago

I think so. #858 provides a hack, but won't help most users. I fully understand that adjusting padding can be a nightmare. Let's see if there's an easy alternative before we punt this to the backlog.

Something like this might work:

background: rgba(111,111,111,0.5);
outline: 10px solid rgba(111,111,111,0.5);
alanmoo commented 8 years ago

Ah, outline. Good idea, I'll give it a try.