SASS LESS Configuration

If you decide to integrate the CSS for the ToastController into your app/build using the provided SASS file, there are a few (optional) variables you can set to configure how Toasts appear, which are documented below.

These variables are also available in the LESS version of the stylesheet to override (with a @ instead of a $ declaring it, of course), unless otherwise noted below.

$toast_offset_left

Type: Distance Unit
Default: 5px

Controls the distance a visible Toast is from the left side of the screen.

$toast_offset_bottom

Type: Distance Unit
Default: 5px

Controls the distance a visible Toast is from the bottom of the screen.

$toast_mobile_cutoff

Type: Distance Unit
Default: 320px

Toasts have a slightly different look (they span the whole bottom of the screen) on smaller screens. This is the cutoff number for the screen width before the Toasts look like that.

$toast_font_size

Type: Font Size
Default: 16px

Controls the size of the font in a Toast.

$toast_font_size_mobile

Type: Font Size
Default: $toast_font_size + 2px

Controls the size of the font in a Toast when below the mobile cutoff size.

$toast_mobile_style_change

Type: Boolean
Default: true

If false, there will be no change to how the Toast looks on mobile.

Note: Not available in the LESS stylesheet.