All o-expander CSS, including the expander content area and toggle.
Gets the color of a button property for a given theme and state.
| parameter | type | default | description |
|---|---|---|---|
| state | |||
| property | |||
| type | |||
| theme | A theme string or a custom theme map. |
background: oButtonsGetColor($state: 'default', $property: 'color', $type: 'primary');background: oButtonsGetColor($state: 'hover', $property: 'border', $type: 'secondary');Styles for a custom button theme .o-buttons--[$name].
| parameter | type | default | description |
|---|---|---|---|
| name | A theme name e.g. `my-special-button`. | ||
| opts | A custom theme map with a `color` and optional `context` key. The context key indicates the background colour your button is placed on, it defaults to the page colour (paper for the core brand, white otherwise). See [the README](https://registry.origami.ft.com/components/o-buttons/readme) for more details. | ||
| types | The types of button to output the theme for e.g. ('primary', 'secondary'). | ||
| icons (optional) | null | The button icons to output for this theme. |
a new claret theme for both primary and secondary buttons.
// Outputs class .o-buttons--my-special-button
@include oButtonsAddTheme(
$name: 'my-special-button',
$opts: ('color': 'claret-80'),
$types: ('primary', 'secondary')
);a new claret theme to go on a slate background.
// Outputs class .o-buttons--my-special-button
@include oButtonsAddTheme(
$name: 'my-special-button',
$opts: ('color': 'claret-80', 'context': 'slate'),
$types: ('primary', 'secondary')
);a new claret theme for buttons with icons.
// Outputs class .o-buttons--my-special-button
@include oButtonsAddTheme(
$name: 'my-special-button',
$opts: ('color': 'claret-80'),
$types: ('primary', 'secondary'),
$icons: ('arrow-up', 'arrow-down')
);Create a single button with a custom class. To avoid duplicate CSS this is
not recommended unless o-buttons default classes cannot be used. See the
README for
more details.
Button CSS declarations without any selectors.
| parameter | type | default | description |
|---|---|---|---|
| opts (optional) | ('type': 'null', 'theme': null, 'size': null, 'icon': null, 'icon-only': false) | The kind of button styles to output. | |
| include-base-styles (optional) | true | Whether to include base button styles, shared by all buttons. | |
| include-base-icon-styles (optional) | true | Whether to include base icon button styles, shared by all icon buttons (defaults to true only when outputting an icon button). |
a primary button with right arrow.
.my-button {
@include oButtonsContent($opts: (
'type': 'primary',
'icon': 'arrow-right'
));
}a primary button with a custom lemon theme.
.my-lemon-button {
@include oButtonsContent($opts: (
'type': 'primary',
'theme': ('color': 'lemon')
));
}base button styles.
// output base button styles only
.my-button {
@include oButtonsContent($opts: ());
}
// output modifier classes for button types, without duplicating base styles
.my-button--secondary {
@include oButtonsContent($opts: (
'type': 'secondary'
), $include-base-styles: false);
}
.my-button--primary {
@include oButtonsContent($opts: (
'type': 'primary'
), $include-base-styles: false);
}All o-expander CSS, including the expander content area and toggle.
If using the Build Service, add o-expander@^6.2.6 to your
script and link tags.
If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-expander@^6.2.6".
o-expander is maintained directly by the Origami team. If you have any questions about o-expander or Origami in general, we are happy to help. 😊
Slack: #origami-support
Email: origami.support@ft.com
To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊
Slack: #origami-support
Email: origami.support@ft.com