Fixing wrapper/breakout mixins #265
Conversation
| // Elements that aren't typically affected by the wrapper, | ||
| // but we want to line up in PL. | ||
| // Mostly base and atom components. | ||
| .sg-pattern-example { |
There was a problem hiding this comment.
@evanmwillhite I'm not even done listing these here, and I'm already annoyed. I'm not sure this is a viable solution. Can you take a look at this and suggest a better way to do this?
I'm selecting each one, instead of just doing
.sg-pattern-example {
@include wrapper;
}
because if we do that ^ and then also add the wrapper mixin to the actual elements that need it. e.g. .card-grid, there's a double wrapper thing going on that adds unwanted padding, and is extra weird on mobile.
Maybe we can talk about this tomorrow/friday.
|
I was thinking something along these lines, not on every pattern in Pattern Lab https://github.com/fourkitchens/emulsify/tree/wrapper-test |
|
I think that still produces the same "sometimes double, sometime just unexpected padding" when the component inside the wrapper also has the wrapper mixin applied. |
|
It might on the pattern list display but I don't think it does on the individual components. I use those to demo. It's never bothered me on projects |
This is a work in progress, and not ready for review.