Toast CSS API Reference

All Common CSS variables:

    Specific CSS variables for Toast styling:

    • --smart-toast-container-default-width: Default width of the Toast's containers, positioned top-left, top-right, bottom-left, bottom-right.

    The following CSS selectors can be used to style 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.

    Demo

    <style>
            #toast{
                    --smart-color: #ccc;
                    --smart-font-size: 20px;
            }
    </style>