Amphtml: [amp-sidebar] - Customizing amp-sidebar mask

Created on 12 Jul 2017 · 13Comments · Source: ampproject/amphtml

What's the issue?

In our amp template design the sidebar mask is fully transparent. However adding custom styles to this element causes the validator to fail as it's targeting i-amphtml-sidebar-mask.

It would be useful to customize the mask such as changing the background colour, the opacity and other properties like margins.

A simple solution to this would be to add an amp-sidebar-mask class to it to allow developers to add styles or override default styles.

Thanks

amp-sidebar Developer Soon DevX Feature Request components

Source

WillDonohoe

👍3

Most helpful comment

All 13 comments

@WillDonohoe That is working as intended. Any i-amphtml- css class will be prohibited as that's an internal css class for amp runtime. There may be another way to target the mask, adding @camelburrito for that possibility.

honeybadgerdontcare on 12 Jul 2017

/to @camelburrito. Maybe @tiendt can take this?

jridgewell on 12 Jul 2017

yes @tiendt - do you wanna take this?

camelburrito on 12 Jul 2017

@camelburrito yeah sure!

tiendt on 12 Jul 2017

I found simple solution for this issue. It not causes the validator to fail.
For example to change the opacity of .i-amphtml-sidebar-mask add to your style:

footer.center + div{
   opacity: 0.8;
}

Where footer.center is a last element in <body> .

kazmenko on 7 Apr 2018

This might not work as you are relying on the mask being the last element. Other components or the runtime could change this behavior

camelburrito on 7 Apr 2018

👍1

Yes of course this is not a universal solution. But in some cases it works.

kazmenko on 7 Apr 2018

other solution is:

[class*="amphtml-sidebar-mask"] {
    background: none;
}

josegustavo on 7 Apr 2018

👍18 🎉5 ❤3

@josegustavo I came to the same solution and ended up here trying to find out if there are any negative consequences to doing it. It seems like "cheating." As far as you know, is this okay to do?

tylertrotter on 14 Sep 2018

I ended up using this:

body ~ div:last-child {
  background: none;
}

I prefer not targeting the mask directly since it can be changed without notice.

VMBindraban on 17 Sep 2019

ping @ampproject/wg-ui-and-a11y

jridgewell on 17 Sep 2019

We're doing some work (polish + upgrade) on sidebar that will likely resolve this, the current target launch date is mid November. We're having a design review on the new version of sidebar tomorrow (links incoming).

/cc @nainar @leafsy