Stepper

Introduction

The stepper is used to guide through multiple steps. The steps are indicated by the progress indicator on the top. There should be at least 3 steps.

Stepper measurements

Dimensions

x: 16px
y: 20px
z: 24px

H1

font-family: Bernina Sans Light
font-size: 24px
color: $gray-700

Body

font-family: Bernina Sans regular
font-size: 14px
color: $gray-700

Progress indicator

The progress indicator is used to visualize the next steps and the progress made. As soon as a step is available - it is clickable.

Progress indicator measurements

Dimensions

x: 8px
y: 4px
z: 2px

Two circles

small circle width: 8px //foreground
big circle width: 12px //background
Progress indicator elements

Step "Done"

Already completed steps.
font-family: Bernina Sans Regular
font-size: 10px
color: $turquoise-600
align: center
small circle background color: $turquoise-600
big circle background color: $background-color
big circle border: 1px solid $turquoise-600
big circle outline: 2px solid $background-color

Step "Selected"

The currently shown step.
color: $gray-700
small circle background color: $turquoise-600
big circle background color: $background-color
big circle border: 1px solid $gray-300
big circle outline: 2px solid $background-color

Step "Not visited"

Step that are ahead.
color: $gray-500
small circle background color: $gray-300
small circle outline: 4px solid $background-color

Line

Connecting steps that are done with the selected one.
line active: 1px solid $turquoise-600
Connecting the selected step with the steps ahead.
line default: 1px solid $gray-300

States of steps done

Hover state

Progress indicator hover state
color: $turquoise-700
text-decoration: underline
small circle background color: $turquoise-700
big circle border: 1px solid $turquoise-700

Active state

Progress indicator active state
color: $turquoise-800
small circle background color: $turquoise-800
big circle border: 1px solid $turquoise-800