Jump To:

  1. Variables
    1. $config
    2. $styles
  2. Mixins
    1. set()
    2. set-styles()
    3. styles()
  3. Functions
    1. get()

Callout

A container for content that highlights important information, provides context, or guides user attention within an interface

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "background-color" : rgb(240, 240, 240),
  "border-color" : "rule-light",
  "border-radius" :  6px,
  "border-width" : 1px,
  "box-shadow" : none,
  "caps-disabled" : false,
  "cap" : false,
  "cap-side" : "left",
  "cap-match-radius" : false,
  "cap-options" : (
    "color" : rgb(160, 160, 160),
    "size" : 0.5rem,
  ),
  "margin" : 2rem,
  "padding" : 1.5rem,
);
File Information
  • File: _callout.scss
  • Group: callout
  • Type: variable
  • Lines (comments): 23-36
  • Lines (code): 38-54

Map Properties

Name Type Default Description
background-color Color rgb(240, 240, 240) The background color of the Callout.
border-color Color "rule-light" The border color of the Callout.
border-radius Boolean true The border radius of the Callout.
border-width Dimension 1px The border width of the Callout.
box-shadow CssValue none The box-shadow of the Callout.
caps-disabled Boolean false If set will not output any cap styles for both base and styles
cap Boolean false Toggles the use of caps on default callout
cap-side Boolean "left" The side that gets the cap
cap-match-radius Number true The cap should have be rounded to match the parent's border radius
cap-options Map The options for cap (see element.cap for options)
margin Dimension 2rem Bottom margin of the Callout.
padding Dimension 1.5rem Padding of the Callout.

$styles

Variable Type: Map

Styles Map (for unique variations/modifiers)

  • Adjust this with set-styles
$styles: (
  "outline" : (
    "background-color": transparent
  ),
  "info" : (
    "background-color" : "info-background",
  ),
  "warning" : (
    "background-color" : "info-background",
  ),
  "success" : (
    "background-color" : "success-background",
  ),
  "danger" : (
    "background-color" : "danger-background",
  ),
);
File Information
  • File: _callout.scss
  • Group: callout
  • Type: variable
  • Lines (comments): 56-58
  • Lines (code): 60-76

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _callout.scss
  • Group: callout
  • Type: mixin
  • Lines (comments): 78-81
  • Lines (code): 83-85

Examples

@include ulu.component-callout-set(( "property" : value ));

Parameters

Name Type Description
$changes Map Map of changes

Require

set-styles()

Mixin

Set callout style variations

  • Styles that modify padding when using mix-match caps on/off should be included last
File Information
  • File: _callout.scss
  • Group: callout
  • Type: mixin
  • Lines (comments): 97-100
  • Lines (code): 102-104

Parameters

Name Type Description
$changes Map Map of changes (options for style include [background-color, color, border-color, border-radius, border-width, box-shadow, padding, cap, cap-options]
$merge-mode String Merge mode see utils.map-merge() [null

Require

styles()

Mixin

Output component stylesheet

File Information
  • File: _callout.scss
  • Group: callout
  • Type: mixin
  • Lines (comments): 106-108
  • Lines (code): 110-158

Examples

@include ulu.component-callout-styles();

Require

Functions

get()

Function

Get a config option

File Information
  • File: _callout.scss
  • Group: callout
  • Type: function
  • Lines (comments): 87-90
  • Lines (code): 92-95

Examples

@include ulu.component-callout-get("property");

Parameters

Name Type Description
$name Map Name of property

Require