Overriding the margin on one level

[frufrufrufrufru]

If I have 2 (or more) classes at the same level then there is a problem with overriding margin:

So if I have:

<div class="Header Page__header>
  ...
</div>

.Header {
  gap: 20px;
  ...
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.Page__header {
  margin-top: 60px;
}

Then generated margin for .Header will overrides margin-top from .Page__header.

[gavinmcfarland]

Thanks for reporting. This is a shortcoming of the polyfill as it's using CSS alone so it doesn't know what selectors will be used together. A workaround for cases like this is by factoring in the margin that the polyfill creates.

For example:

.Page__header {
    margin-top: calc(60px + var(--fgp-margin-top, 0px));
}

The next release will provide a better solution to this, although it comes at the cost of more code.

[frufrufrufrufru]

I tried this and it doesn't work. Or I am doing something wrong.

.Page__header before:

.Page__header {
    margin-top: 60px;
}

margin-top: 60px; > margin-top: calc(60px + var(--fgp-margin-top, 0px));

.Page__header after:

.Page__header {
    margin-top: calc(60px + 0px);
    margin-top: calc(60px + var(--fgp-margin-top, 0px));
}

[gavinmcfarland]

Ah sorry, the earlier version had to use !important to override containers which may be nested, but I have since managed to move this to a custom property so this doesn't happen. Does it work if you do either of these options?

.Page__header {
    margin-top: calc(60px + var(--fgp-margin-top, 0px)) !important;
}

/* or */

.Page__header.Page__header {
    margin-top: calc(60px + var(--fgp-margin-top, 0px));
}

[frufrufrufrufru]

Looks like it works with !important, but not for all cases. I'm still trying to figure it out, it's very strange.

Also, for some reason, the link broke on some elements... I have a block (component) with elements inside, the padding is no longer clickable, :hover also not works but not for elements inside.

[frufrufrufrufru]

Also, for some reason, the link broke on some elements... I have a block (component) with elements inside, the padding is no longer clickable, :hover also not works but not for elements inside.

It was because of pointer-events: none, for some reason it was generated too.

[gavinmcfarland]

If you get a chance I would love to see a repo example. pointer-events: none is used to prevent the negative margin getting in the way of any clicks events above and to the side of the container. This is reset back to pointer-events: all on the items of the container though.

[frufrufrufrufru]

I sent you an invite, as this is a private project.

[gavinmcfarland]

Thanks, I had a quick look around but couldn't see anything out of the ordinary. With regards to the issue, you're having with pointer-events: none I can only suggest if you can override it for now. If you can provide more details on the issue I can look into it for the next version. Thanks again.

[gavinmcfarland]

Hi @frufrufrufrufru. The latest version should resolve the problem you're experiencing. The polyfill now applies more liberally by default, with the option to make it exclusive with the only option. The pointer-events issue should also be resolved, this was a bug/issue in Sarafi.