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

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

Support Status
active
Switch component view

GitHub Repository

Install o-visual-effects

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

If running a Manual Build, run bower install --save "o-visual-effects@^3.0.5".

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