search

unumux / willow

HTML and SCSS for common UI components built by the Unum UX team
GNU General Public License v3.0
7 stars 2 forks source link

willow-alert icon alignment #2

Open slkennedy opened 7 years ago

slkennedy commented 7 years ago

Alignment is off in general but especially when there is no heading and only one line of content. screen shot 2017-04-06 at 9 37 36 am

townivan commented 6 years ago

Looks like it's a result of the :last-child { margin-bottom: 0; } from @unumux/willow/_styles.scss

This css has irritated me before. It has a way of sneaking into places that it's not needed. I'm not sure how to address this best without some background on it.

Would it be terrible to remove it and solve the problem another way? This first/easiest thing that comes to mind is not that likely to be a good one. I was thinking that adding it to an element with the intention of "this element and all recursive children will have the :last-child margin fix". 

<div class="willow-last-child-margin-bottom-clear">

with css something like: .willow-last-child-margin-bottom-clear *:last-child { margin-bottom: 0; }

Edit: I guess it might need a way to either manually putting it on an element with a class OR putting a class on a container with the goal of getting the last child inside that container.

https://codepen.io/townivan/pen/oGJJGJ

I'd guess that specificity of this would go against the BEM concept of keeping them at the same level...