Notification bar

notification bar notification bar

Introduction

The notification bar is used for global notifications, concerning the whole environment or account.

Notification bar example

The bar can show

The messages may contain links that allow users to perform related actions directly. An abort icon button allows to dismiss a notification. There can be multiple layers of notification bars, the most recent on top.

Styleguide

bar-color: #fff
bar-color: $warning

Notification bar style guide

x: 40px
y: 12px

Description

font-family: Bernina Sans Regular
font-size: 14px
color: $gray-700
vertical-align: center

Icon

width: 20px
height: 20px
color: $turquoise-600
vertical-align: center

Appearance

The notification bar slides in from left to right directly underneath the menubar. By clicking the abort icon the bar slides back out to the left again.

Notification bar appearance

The transition should last 500ms.

transition: translate 500ms cubic-bezier(0.25, 0.1, 0.25, 1)