Origami Frontend Components & Services

SassDoc: o-visual-effects

oVisualEffects(opts)

Outputs styles for visual effects.

parameter type default description
opts (optional) ('shadows': ('ultralow', 'low', 'mid', 'high'), 'timing-custom-properties': true) A map of which visual effects to include.

Examples

Example #1

all o-visual-effect styles.

@include oVisualEffects();

Example #2

only mid shadow styles from o-visual-effect.

@include oVisualEffects($opts: ('shadows': ('mid')))

Example #3

only timing css custom properties from o-visual-effect.

@include oVisualEffects($opts: ('timing-custom-properties': true))

Links

oVisualEffectsShadowContent(elevation, color)

Elevation

A repeating linear gradient background

parameter type default description
elevation 'ultra', 'low', 'mid' or 'high'
color

Links

oVisualEffectsShadow(elevation, color)

Elevation

parameter type default description
elevation 'ultra', 'low', 'mid' or 'high'
color

Returns

Links

o-visual-effects-timing-slide

Timing function for elements that slide in and out

Links

o-visual-effects-timing-expand

Timing function for elements that expand and contract

Links

o-visual-effects-timing-fade

Timing function for elements that fade in and out

Links

o-visual-effects-shadow-color

The base dropdown shadow colour. Used with opacity for shadows of different levels.

Links

Status
active
Switch component view

GitHub: o-visual-effects@4.2.0

Install o-visual-effects

If using the Build Service, add o-visual-effects@^4.2.0 to your link tag.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-visual-effects@^4.2.0".

Help & Support

o-visual-effects is maintained directly by the Origami team. If you have any questions about o-visual-effects or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

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