Skip to content

Custom design

Arthur Beaulieu edited this page Mar 4, 2019 · 2 revisions

Just in case the options object you pass to the handler isn't enough to make Notification.js yours, you can dive into the stylesheet code and fine tune it.

Notification.js style is made with compiled .scss for more flexibility and ease to modify. Run your favorite SASS compiler, and open the src/scss/notification.scss file. In it, there are several variable that modifies the Notification skeleton:

$notification-width: 325px;
$notification-min-height: 50px;
$notification-icon: 25px;
$notification-counter-size: 18px;
$notification-padding: 12px;
$notification-margin: 10px;
$notification-border-thick: 3px;
$notification-border-std: 1px;

There is also some RGB colors variables in the .scss file. If you modify those, don't forget to change accordingly the default color values in the Notification.js file, since they are required in the JavaScript class too. They can be found in the Notification constructor, in the this._default.color object.

Clone this wiki locally