Discussion: Visual Styles on amp-accordion

[krdwan]

As part of the port of amp-accordion to Bento, we are considering specifics of porting visual styles.

In 0.1 we have the following CSS styles applied to header sections in an amp-accordion:

background-color: #efefef;
padding-right: 20px;
border: solid 1px #dfdfdf;

This results in the accordion displayed visually as shown below (Notice the gray styled Section 1, 2, and 3)

For 1.0, we are considering how we would like to style the component. The options we are considering include:

1. Remove the visual styling. Is it necessary for us to provide these default styles?
2. Provide the styling on amp level only. Maintains a similar look and feel as 0.1 when in amp mode. In Preact mode, the user will not be tied to any pre-set default styling.
3. Provide default styling on amp and preact.. Maintains similar look and feel as 0.1 in both amp and preact modes. Will require a bit of extra work to enable JSX for light-DOM in preact mode.

[nainar]

My vote is for option 3.

[dvoytenko]

Agree. Let's proceed with option 3.