SassDoc: o-buttons

oButtonsGroup(($o-buttons-class))

Button group Applies styles to direct children

Example

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

Links

• "oButtonsGroup" mixin on Github

oButtons(size, theme)

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

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

• "oButtons" mixin on Github

oButtonsTheme(theme)

Button theme construct Outputs styles for all button states

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

• "oButtonsTheme" mixin on Github

oButtonsSize(size)

Button size Outputs dimensions for a specific button size

Example

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

Links

• "oButtonsSize" mixin on Github

o-buttons-is-silent

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

Links

• "o-buttons-is-silent" variable on Github

o-buttons-class

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

Links

• "o-buttons-class" variable on Github

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-family" variable on Github

o-buttons-font-weight

Button font weight

Links

• "o-buttons-font-weight" variable on Github

o-buttons-sizes

Button sizes, with their attached properties

Links

• "o-buttons-sizes" variable on Github

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-themes" variable on Github

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

• "o-buttons-icons" variable on Github

oButtonsCustomTheme

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

Links

• "oButtonsCustomTheme" mixin on Github

oButtonsIcon(buttonClass)

Icon Buttons

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

Links

• "oButtonsIcon" mixin on Github

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

Links

• "oButtonsGetButtonForIconAndTheme" mixin on Github

oButtonsBaseStyles(button-class,)

Base styling for buttons

Links

• "oButtonsBaseStyles" mixin on Github

oButtonsGetColor(...)

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

Returns

Links

• "oButtonsGetColor" function on Github

oButtonsIconButton(...)

Icon Button

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

Links

• "oButtonsIconButton" mixin on Github

oButtonsIconBaseStyles(button-class,)

Base styling for buttons

Links

• "oButtonsIconBaseStyles" mixin on Github

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

• "oButtonsIconButtonLabel" mixin on Github

oButtonsPagination(buttonClass)

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

Example

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

Links

• "oButtonsPagination" mixin on Github