oButtonsGroup(($o-buttons-class))

Button group Applies styles to direct children

parameter type default description
($o-buttons-class) $buttonClass

Example

.my-button-group {
	@include oButtonsGroup(my-buttons);
}

Links

oButtons(size, theme)

Button construct Basic button styling and default states for specific theme and size

parameter type default description
size (default)
theme (secondary)

Examples

Example #1

styles

.my-button {
	@include oButtons;
}

Example #2

theme

.my-inverse-button {
	@include oButtons($theme: inverse);
}

Example #3

size

.my-big-button {
	@include oButtons(big);
}

Example #4

size and theme

.my-big-standout-button {
	@include oButtons(big, primary);
}

Links

oButtonsTheme(theme)

Button theme construct Outputs styles for all button states

parameter type default description
theme

Examples

Example #1

.my-button--inverse {
	@include oButtonsTheme($theme: 'inverse');
}

Example #2

.my-button--custom {
	@include oButtonsTheme($theme: ($background: 'slate', $accent: 'lemon', $colorizer: 'primary'));
}

Links

oButtonsSize(size)

Button size Outputs dimensions for a specific button size

parameter type default description
size

Example

.my-button--big {
	@include oButtonsSize(big);
}

Links

o-buttons-is-silent

Silent mode: on (true) or off (false) Set to false to output default button classes

Links

o-buttons-class

Default button class used when $o-buttons-is-silent is true

Links

o-buttons-font-family

Button font family

This is required to override default system form element styling, since <input>, <button>… don't inherit global font styles

Links

o-buttons-font-weight

Button font weight

Links

o-buttons-sizes

Button sizes, with their attached properties

Links

o-buttons-themes

Button themes Keys are a brand variant (@see _brand.scss). Values are used to output selectors e.g. ".o-buttons--primary.o-buttons--inverse".

Links

o-buttons-icons

List of icons to generate classes for icon buttons. Build service users will only be able to use these icons, but there is a mixin for people using this via Sass, meaning any icon in 'fticons' is available to those users. Icon names as used in fticons

Links

oButtonsCustomTheme

$colorizer or $accent have been provided then the $theme map will be ignored.

Links

The mixin "oButtonsIcon" is deprecated.

This mixin has been deprecated

oButtonsIcon(buttonClass)

Icon Buttons

Outputs styles for every icon in o-buttons-icons at every theme in o-buttons-themes

parameter type default description
buttonClass class to apply o-buttons styles to

Links

oButtonsGetButtonForIconAndTheme(...)

Get Button For Icon and Theme

Outputs background-image property for a given icon/theme at all states set in that theme's state list example: .my-button--left-arrow { @include oButtonsGetButtonForIconAndTheme(left-arrow, standout); }

parameter type default description
icon-name, any icon name found in o-ft-icons
theme, any theme name as defined in $o-buttons-themes or a custom theme map.
button-class, defaults to o-buttons ($o-buttons-class' default value)

Links

The mixin "oButtonsBaseStyles" is deprecated.

Use oButtonsIconBaseStyles

oButtonsBaseStyles(button-class,)

Base styling for buttons

parameter type default description
button-class, defaults to o-buttons ($o-buttons-class' default value)

Links

oButtonsGetColor(...)

Gets the color of a button property for a given theme and state.

parameter type default description
state
property
theme A theme string/list or a custom theme map. Will default to the currently configured theme.

Returns

Color

Links

oButtonsIconButton(...)

Icon Button

Outputs the CSS properties for an icon button for the given icon, theme and size

parameter type default description
icon-name, any icon name found in the fticons image set http://registry.origami.ft.com/components/fticons
size, "big" or "default"
theme, any theme name as defined in $o-buttons-themes (primary, secondary, etc) or a Map defining a custom theme.
is-icon-only, if this icon has text accompaniment or is an icon only.

Links

oButtonsIconBaseStyles(button-class,)

Base styling for buttons

parameter type default description
button-class, defaults to o-buttons ($o-buttons-class' default value)

Links

oButtonsIconButtonLabel

Icon Button Label

Where an icon button is used, a span with an informative text label in should be included so that if the styles don't load, the button will fallback to a text label. This solution also works well for screen readers. This mixin outputs the styles for visually hiding the label

Links

oButtonsPagination(buttonClass)

Pagination button wrapper styles Applies styles of pagination buttons to direct children

parameter type default description
buttonClass ($o-buttons-class) $buttonClass

Example

.my-buttons-pagination {
	@include oButtonsPagination(my-buttons);
}

Links

oButtons(size, theme)

Button construct Basic button styling and default states for specific theme and size

parameter type default description
size (default)
theme (secondary)

Examples

Example #1

styles

.my-button {
	@include oButtons;
}

Example #2

theme

.my-inverse-button {
	@include oButtons($theme: inverse);
}

Example #3

size

.my-big-button {
	@include oButtons(big);
}

Example #4

size and theme

.my-big-standout-button {
	@include oButtons(big, primary);
}

Links