A few final touches to the ToC UIs before we launch the A/B test
FAB zero state
Open state
Min height
Sticky header open
Wide
Transitions
Note that the 2nd screenshot does not auto-close the TOC when clicking a section, but @JScherer-WMF confirmed that auto-closing the TOC is the intended behavior.
Opening and closing the button is a fade in/out transition that takes 300ms
By clicking the ToC item, appropriate section scrolls into view
- 25% of the total viewport height shows above/below the menu to maintain the article context.
- 56px high linear gradient with the 'background-base' background-base colour to show that there are more links above/below
- use a large neutral-normal button. Do not change the icon when it's open. Instead, use the active button state.
- Min height of the toc menu is 250px
- Max width = 640
