adjust icon sizing, add icon-wrapper class, closes #763 #781
Conversation
src/icons.css
Outdated
| * <p class='txt-xl'>Ring the <span class='icon-wrapper'><svg class='icon icon--l'><use xlink:href='#icon-bell'/></svg></span></p> | ||
| * <p class='txt-s'>Keep your <span class='icon-wrapper'><svg class='icon icon--s'><use xlink:href='#icon-home'/></svg></span> safe from <span class='icon-wrapper'><svg class='icon icon--s'><use xlink:href='#icon-bug'/></svg></span></p> | ||
| **/ | ||
| .icon-wrapper { |
There was a problem hiding this comment.
Just curious, what makes the !important cut vs what doesn't?
There was a problem hiding this comment.
i don't have a good answer for you. The importanted properties are the ones they definitely shouldn't ever get overriden when using this class. But the same could be said for almost every property here. Should I important everything?
There was a problem hiding this comment.
I would think everything except for the top property? I guess this wrapper should do what it says on the tin so everything could be important'ized
There was a problem hiding this comment.
I'll important all but top and I'm going to rename the class .icon-inline-wrapper
| vertical-align: top !important; | ||
| align-items: center !important; | ||
| justify-content: center !important; | ||
| height: 1em !important; |
There was a problem hiding this comment.
@samanpwbb: I think that conventionally we haven't been using !important unless the declaration corresponds directly to the class name. Is there a reason we need to use !important on these declarations?
This PR adds two new classes for centering icons inline, plus a new catalog entry for icons. The solution uses a wrapping element, which has some advantages:
The one big disadvantage being that it requires more markup. I don't think there's any other option though (trust me, I tried a lot of things here!)
The PR also increases the size of the small icon. 12px was just way too tiny. Nothing was legible.