The confirmation dialog appears to confirm setting changes via save or cancel button. It is part off all settings views.
The confirmation dialog enables saving bulk changes conveniently. It provides information about consequences of the changes before saving them.
x: 8px y: 20px height: 56px width: 100% background-color: $gray-700 padding: 20px
font-family: Bernina Sans Regular font-size: 14px color: #fff vertical-align: center
Please use a primary button to
save changes and a secondary button to
Any settings changes trigger the confirmation bar, it slides in from the bottom. The description will be updated according to the users changes.
save changes button triggers a feedback message. After 800ms, the whole dialog slides out to the bottom. In order to avoid unintended changes, the
discard changes action needs to be confirmed. When the button is triggerd, it gets replaced by
no buttons for confirmation, the
save changes action is disabled.
width: 20px height: 20px color: #fff
Slide in and out
The confirmation dialog slides in from the bottom and slides out to the bottom.
transition: translate 250ms ease
Leaving the context
To prevent users from navigating without saving, an overlay interrupts the action and forces the user to make a decision. Before navigating, the overlay as well as the confirmation dialog disappear.
width: 100% height: 100% background-color: rgba(255, 255, 255, 0.6)
Confirmation dialog on smaller screens