o-buttons

mixins

oButtonsGroup

@mixin oButtonsGroup($($o-buttons-class)) { ... }

Description

Button group Applies styles to direct children

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$($o-buttons-class)

$buttonClass

Stringnone

Example

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

Requires

Links

oButtonsSize

@mixin oButtonsSize($size) { ... }

Description

Button size Outputs dimensions for a specific button size

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$sizenoneStringnone

Example

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

Requires

Used by

Links

oButtonsTheme

@mixin oButtonsTheme($theme) { ... }

Description

Button theme construct Outputs styles for all button states

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$themenoneStringnone

Example

.my-button--standout {
	@include oButtonsTheme(standout);
}

Used by

Links

oButtonsCustomTheme

@mixin oButtonsCustomTheme($background, $accent, $colorizer) { ... }

Description

Button custom theme construct Outputs styles for all button states for custom buttons based on a background color and an accent color

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$background

The background color of the theme. Must be a color name from o-colors

Stringnone
$accent

The accent color of the theme. Must be a color name from o-colors

Stringnone
$colorizer

One of primary or secondary (default)

Stringnone

Example

.my-button--custom {
	@include oButtonsTheme(black, paper);
}

Links

oButtons

@mixin oButtons($size, $theme) { ... }

Description

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

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$size

(default)

Stringnone
$theme

(secondary)

Stringnone

Example

styles

.my-button {
	@include oButtons;
}

theme

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

size

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

size and theme

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

Requires

Links

variables

o-buttons-themes__b2c

$o-buttons-themes__b2c: (
	normal: (
		color: oColorsGetColorFor(o-buttons-b2c-normal, text),
		background-color: oColorsGetColorFor(o-buttons-b2c-normal, background),
		border-color: oColorsGetColorFor(o-buttons-b2c-normal, border),
	),
	active: (
		color: oColorsGetColorFor(o-buttons-b2c-pressedselected, text),
		background-color: rgba(oColorsGetColorFor(o-buttons-b2c-hover, background), 0.8),
		border-color: oColorsGetColorFor(o-buttons-b2c-pressedselected, border),
	),
	hover: (
		background-color: rgba(oColorsGetColorFor(o-buttons-b2c-hover, background), 0.8),
		color: oColorsGetColorFor(o-buttons-b2c-pressedselected, text),
		border-color: oColorsGetColorFor(o-buttons-b2c-hover, border),
	),
	pressedselected: (
		background-color: oColorsGetColorFor(o-buttons-b2c-pressedselected, background) !important,
		color: oColorsGetColorFor(o-buttons-b2c-pressedselected, text),
		border-color: oColorsGetColorFor(o-buttons-b2c-pressedselected, border),
	),
	disabled: (
		color: oColorsGetColorFor(o-buttons-b2c-disabled, text),
		background-color: rgba(oColorsGetColorFor(o-buttons-b2c-disabled, background), 0.4),
	)
) !default;

Description

Theme: B2C

Type

Map

Links

o-buttons-is-silent

$o-buttons-is-silent: true !default;

Description

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

Type

Boolean

Links

o-buttons-class

$o-buttons-class: o-buttons !default;

Description

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

Type

String

Links

o-buttons-font-family

$o-buttons-font-family: MetricWeb, sans-serif !default;

Description

Button font family

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

Type

String

Used by

Links

o-buttons-font-weight

$o-buttons-font-weight: 600 !default;

Description

Button font weight

Type

String

Used by

Links

o-buttons-sizes

$o-buttons-sizes: (
	default: (
		background-size: 21px, // Magic number to reduce poor antialiasing on icons at small sizes
		font-size: 14px,
		min-height: 28px,
		min-width: 60px,
		padding-left: 8px,
		padding-right: 8px,
		border-width: 1px,
	),
	big: (
		background-size: 40px,
		font-size: 16px,
		min-height: 40px,
		min-width: 80px,
		padding-left: 20px,
		padding-right: 20px,
		border-width: 1px,
	)
) !default;

Description

Button sizes, with their attached properties

Type

Map

Used by

Links

[private] _o-buttons-border-radius

$_o-buttons-border-radius: $o-normalise-border-radius;

Description

Border-radius

Type

Number

Used by

Links

o-buttons-themes

$o-buttons-themes: (
	primary: 'primary',
	secondary: 'secondary',
	inverse: 'inverse',
	mono: 'mono',
	b2c: $o-buttons-themes__b2c
) !default;

Description

Button themes, with their respective states Each state is a Map of CSS properties, find all theme definitions in _themes.scss

Type

Map

Used by

Links

o-buttons-icons

$o-buttons-icons: "arrow-left", "arrow-right", "upload", "tick", "plus", "warning" !default;

Description

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

Type

List

Used by

Links

General

functions

[private] _oButtonsThemeHasState

@function _oButtonsThemeHasState($theme, $state) { ... }

Description

Check if a theme has a certain state

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$theme

One of $o-buttons-themes

Stringnone
$state

One of normal, hover, focus, selected, disabled, pressed

Stringnone

Requires

[private] _oButtonsStateHasProperty

@function _oButtonsStateHasProperty($theme, $state, $property) { ... }

Description

Check if a state has a property

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$theme

One of $o-buttons-themes

Stringnone
$state

One of normal, hover, focus, selected, disabled, pressed

Stringnone
$property

CSS property name

Stringnone

Example

@if _oButtonsStateHasProperty(standout, focus, color) {}

Requires

[private] _oButtonsStateGetProperty

@function _oButtonsStateGetProperty($theme, $state, $property) { ... }

Description

Get the value of a property in a given state

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$theme

One of $o-buttons-themes

Stringnone
$state

One of normal, hover, focus, selected, disabled, pressed

Stringnone
$property

CSS property name

Stringnone

Example

div {
	background-color: _oButtonsStateHasProperty(standout, selected, background);
}

Requires

mixins

oButtonsIcon

@mixin oButtonsIcon($buttonClass) { ... }

Description

Icon Buttons

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

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$buttonClass

class to apply o-buttons styles to

Stringnone

Requires

oButtonsGetButtonForIconAndTheme

@mixin oButtonsGetButtonForIconAndTheme($icon-name,, $theme,, $button-class,) { ... }

Description

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); }

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$icon-name,

any icon name found in o-ft-icons

Stringnone
$theme,

any theme name as defined in $o-buttons-themes (standard, standout, etc). Defaults to standard.

Stringnone
$button-class,

defaults to o-buttons ($o-buttons-class' default value)

Stringnone

Requires

Used by

oButtonsBaseStyles

@mixin oButtonsBaseStyles($button-class,) { ... }

Description

Base styling for buttons

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$button-class,

defaults to o-buttons ($o-buttons-class' default value)

Stringnone

Requires

Used by

[private] _oButtonsGetIconForThemeAndState

@mixin _oButtonsGetIconForThemeAndState($icon-name,, $theme,, $state) { ... }

Description

Request an icon from o-icons with color based on the o-buttons theme and state

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$icon-name,

icon to request

Stringnone
$theme,

one of $o-colors-theme

Stringnone
$state

One of normal, hover, focus, selected, disabled, pressed

Stringnone

Used by

oButtonsIconButtonLabel

@mixin oButtonsIconButtonLabel() { ... }

Description

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

Parameters

None.

Used by

oButtonsPagination

@mixin oButtonsPagination($buttonClass) { ... }

Description

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

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$buttonClass

($o-buttons-class) $buttonClass

Stringnone

Example

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

Links