o-ft-buttons

This module is now deprecated, please use o-buttons instead.

---

Standard FT-branded buttons.

Buttons come in four themes:

• default: blue outline
• uncolored: monochrome
• inverse: white
• standout: solid blue

and two sizes:

• default: 24px high
• big: 36px high

and have 6 different states:

• standard: without any interaction
• hover: when the mouse pointer is over
• focus: it's the current target of keyboard input
• selected: marked as chosen
• disabled: when clicking it will have no effect
• pressed: for toggable buttons that are currently activated

Button width is determined by its content.

Browser support

The following browser features are used but will degrade gracefully:

• CSS negation pseudo-class: (not()) is used for the hover states. Buttons will not have hover states in IE8 and earlier.
• sibling CSS selectors: spacing between tabs or button groups may be incorrect on very old browsers
• border-radius: older browsers will show square corners
• web fonts: older browsers will use websafe alternative fonts

Mixins

Various Sass mixins are provided to obtain styles for buttons in all their states and variants. Also, when $o-ft-buttons-is-silent: false;, the module outputs a set of classes that are also documented in each section.

Default button

These are the base styles that must be called in addition to any of the other mixins listed below.

Example Sass:

.my-button-class {
	@include oFtButtons();
}

Example HTML:

<button class="my-button-class">Standard</button>

Silent mode off: .o-ft-buttons

Grouped buttons

Include grouped button styles. It accepts one argument: - Base buttons class

Example Sass:

.my-button-group-class {
	@include oFtButtonsGroup(my-button-class);
}

Example HTML:

<div class="my-button-group-class">
    <button class="my-button-class">John</button><!--
 --><button class="my-button-class">Paul</button><!--
 --><button class="my-button-class">George</button><!--
 --><button class="my-button-class">Ringo</button>
</div>

Silent mode off: .o-ft-buttons-group

Pagination buttons

Include pagination buttons styles. It accepts one argument: - Base buttons class

Example Sass:

.my-button-pagination-class {
	@include oFtButtonsPagination(my-button-class);
}

Example HTML:

<div class="my-button-pagination-class">
    <button class="my-button-class">1</button><!--
 --><button class="my-button-class">2</button><!--
 --><button class="my-button-class">3</button><!--
 --><button class="my-button-class">4</button>
</div>

Silent mode off: .o-ft-buttons-pagination

Big button modifier

Include the big button styles.

Example Sass:

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

Example HTML:

<button class="my-button-class my-button-class--big">Big button</button>

Silent mode off: .o-ft-buttons--big

'Standout' button modifier

Include the standout button styles.

Example Sass:

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

Example HTML:

<button class="my-button-class my-button-class--standout">Standout button</button>

Silent mode off: .o-ft-buttons--standout

'Inverse' button modifier

Include the inverse button styles.

Example Sass:

.my-button-class--inverse {
	@include oFtButtonsTheme(inverse);
}

Example HTML:

<button class="my-button-class my-button-class--inverse">Inverse button</button>

Silent mode off: .o-ft-buttons--inverse

'Uncolored' button modifier

Include the uncolored button styles.

Example Sass:

.my-button-class--uncolored {
	@include oFtButtonsTheme(uncolored);
}

Example HTML:

<button class="my-button-class my-button-class--uncolored">Uncolored button</button>

Silent mode off: .o-ft-buttons--inverse

Deprecated

The --faux modifier is now deprecated and will be removed in next major release. The .o-ft-buttons__pagination wasn't following the BEM convention properly and will be removed in next major release. Use ..o-ft-buttons-pagination instead. The .o-ft-buttons__group wasn't following the BEM convention properly and will be removed in next major release. Use .o-ft-buttons-group instead.

Icons for use in buttons

This is now deprecated and will be removed in next major release