UI: DirectionsPage stepper

[otormaigh]

Basil uses non-linear steppers for recipe directions, so users can move between the different steps in any order they want. Steppers use Basil’s typography and color scheme, with customized vertical spacing.

https://material.io/design/assets/1LUJfB9Wd3yjJOBt2zsJ8Jpz7DHd8zbsE/casestudies-basil-steppers-1.png
(1) Basil uses magnification to focus on the activated stepper, scaled up to 200%
(2) Basil’s stepper appears on the right side of the screen.

https://material.io/design/assets/1SsJFp5e-WbeGJr5cBV2_E73QOq-kNtxr/steppers-custom-basil-mobile.mp4
Basil’s use of stretch motion on steppers demonstrates an elastic style.