Output all o-message features. Accepts an options map to include features granularly. Options include which types, states, and layouts of o-message to include. See the README for more details.
include all o-message styles.
@include oMessage();include only error and success alert styles.
@include oMessage($opts: (
'types': ('alert'),
'states': ('error', 'success'),
));Overlay close button styles.
The output does not include a class definition, and should be wrapped in a selector.
Output button styles
.my-close-button {
@include oOverlayContentClose();
}Returns a single list on the scale
Returns a maximum line width based on the given scale
Get font family for o-typography type i.e "sans", "serif", or "display".
Note: we do not recommend setting font-family this way. Instead use
mixins oTypographySans, oTypographySerif, oTypographyDisplay without
any arguments.
Output a new message state (i.e. theme) which supports one or more types of messages.
a Pikachu (lemon/slate) state for notice and alert messages.
// Outputs CSS for a custom message state called "pikachu"
// Outputs a modifier class `o-message--pikachu`
@include oMessageAddState(
$name: 'pikachu', // the custom state is named "pikachu"
$opts: (
'background-color': 'slate', // slate message
'foreground-color': 'white', // white text
'highlight-color': 'lemon', // lemon highlights with `o-message__content-highlight-color` and a lemon button
'button-type': 'primary', // a primary o-buttons button`o-message__content-highlight` highlight copy
'icon': 'user', // show a 'user' o-icons icon if used as an alert
), $types: ('notice', 'alert')); // this state should work with notice and alert message typesSilent mode: on (true) or off (false) Set to false to output default message classes
List of states that can be applied to alert type messages
Output styles for page headings.
heading level 1 styles.
h1 {
@include oTypographyHeading($level: 1);
}heading level 5 styles.
h5 {
@include oTypographyHeading($level: 5);
}Output link styles.
the styles for a standard link.
.my-link {
@include oTypographyLink();
}a custom, claret coloured link to go on the default background colour (paper for the core brand, white otherwise).
.my-claret-link {
@include oTypographyLink($theme: (
'base': 'claret',
'hover': 'claret-30',
));
}a custom, lemon coloured link to go on a slate background.
.my-inverse-link {
@include oTypographyLink($theme: (
'base': 'lemon',
'hover': 'lemon-30',
'context': 'slate',
));
}Output styles for lists.
Styles child li elements. Apply to a
containing list element such as ul or ol.
Does not output font styles, these are
inherited (@see oTypographyBody).
the styles for an unordered list.
.my-unordered-list {
@include oTypographyList('unordered');
}the styles for an ordered and unordered list, sharing base list styles.
.my-list {
@include oTypographyList();
}
.my-list--ordered {
@include oTypographyList('ordered', $include-base-styles: false);
}
.my-list--unordered {
@include oTypographyList('unordered', $include-base-styles: false);
}Styles for photo or video credit/caption
Output all o-message features. Accepts an options map to include features granularly. Options include which types, states, and layouts of o-message to include. See the README for more details.
include all o-message styles.
@include oMessage();include only error and success alert styles.
@include oMessage($opts: (
'types': ('alert'),
'states': ('error', 'success'),
));