Toast CSS Styling

Smart.Toast represents an element which displays an unobtrusive notification to the user. Multiple instances of the same toast can be shown at the same time. In case with multiple instances, they are stacked vertically into special containers positioned ‘top-left’, ‘top-right’, ‘bottom-left’, ‘bottom-right’, in center(in modal mode) or in custom container, defined by the user.

Required files

The Smart.Toast element requires the following file references to be placed on a web page in order for the custom element to be successfully registered and properly working:

  • smart.element.js — this is the base file that defines the common architecture of all Smart custom elements. It is part of the repository ni-kismet/smart-element.
  • smart.toast.js — this file defines the functionality of the Smart.Toast custom element.

Smart.Toast also requires the following style sheets in order to be displayed correctly.

  • smart.base.css — the base style sheet file.

Initialization

To create an instance of a Smart.Toast custom element, you can use the following HTML structures:

<smart-toast>Toast!</smart-toast>

Getting and setting properties dynamically

Before accessing the custom element’s API in JavaScript, the custom element’s instance has to be retrieved:

let customElement = document.querySelector('smart-toast');

Properties are represented as members of the custom element’s instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let value = customElement.value;

Here is an example showing how to set a property dynamically:

customElement.value = "Warning!!!";

Calling methods

Before accessing the custom element’s API in JavaScript, the custom element’s instance has to be retrieved:

let customElement = document.querySelector('smart-toast');

Methods are represented as members of the custom element’s instance object and can be accessed as such.

Here is an example showing how to call a method:

customElement.open();

Animations

By default the animation for the Smart.Toast is disabled. It can be enabled by adding the CSS class called “animation” to the element, like so:

<smart-toast class="animation">Toast!</smart-toast>

Styling (CSS API)

Smart HTML Elements use a pair of css files – smart.base.css and smart.[theme name].css. The base stylesheet creates the styles related to the element’s layout like margin, padding, border-width, position. The second CSS file applies the HTML Element’s colors, fonts, borders and backgrounds. The smart.base.css should be included before the second CSS file.

CSS selectors

The following CSS selectors can be used to style Smart.Toast:

  • smart-toast – the element itself. Classes applied to the element are also applied to the toast’s items(.smart-toast-item).
    • .smart-container – the container used in all custom elements. In smart-toast it doesn’t affect to the styling.
    • .smart-toast-container-top-left – the container used as storage of toast instances positioned in the top left corner of the page.
    • .smart-toast-container-top-right – the container used as storage of toast instances positioned in the top right corner of the page.
    • .smart-toast-container-bottom-left – the container as storage of about toast instances positioned in the bottom left corner of the page.
    • .smart-toast-container-bottom-right – the container as storage of about toast instances positioned in the bottom right corner of the page.
    • .smart-toast-container-custom – the container used as storage of toast instances positioned in custom html element.
    • .smart-toast-container-modal – the container used as storage of toast instances in modal mode.
    • .smart-toast-item – defines an accordion item. Classes applied to smart-toast are applied to .smart-toast-item when a new item is opened.
      • .smart-toast-item-header – used as an item’s header container.
      • .smart-toast-item-close-button – an HTML Span element used as item’s close button.
      • .smart-toast-item-container – used as a container of the icon and text content.
      • .smart-toast-item-icon – an HTML Span element used as item’s icon.
      • .smart-toast-item-content – an HTML Span element used as item’s content storage.

The following classes are related to .smart-toast-item’s styling:

  • .smart-info – applied when type is set to ‘info’.
  • .smart-warning – applied when type is set to ‘warning’.
  • .smart-success – applied when type is set to ‘success’.
  • .smart-error – applied when type is set to ‘error’.
  • .smart-mail – applied when type is set to ‘mail’.
  • .smart-time – applied when type is set to ‘time’.
  • .animation – sets animation.
  • .blink – makes the toast instance blinking.

CSS variables

Smart.Toast uses the following CSS variables:

  • –smart-toast-container-default-width – used to set the default width of the element’s containers at positions ‘top-left’, ‘top-right’, ‘bottom-left’ and ‘bottom-right’. Default value is 300px.