@chee/o-visual-effects

Visual Effects

This Origami component provides CSS visual effects via a set of Sass variables and mixins.

• Usage
  • Markup
  • Sass
• Migration Guide
• Contact
• Licence

Usage

Markup

When using the build service or importing the module with silent mode set to false, o-visual-effects provides helper classes to access the different levels of box shadow settings. The main class available is: .o-visual-effects-shadow which outputs a low shadow. To access any other level of shadow, you should use the modifier for that level, for example: .o-visual-effects-shadow--high.

<div class="box o-visual-effects-shadow--high">Box content</div>

Sass

As with all Origami components, o-visual-effects has a silent mode. To use its compiled CSS (rather than using its mixins with your own Sass) set $o-visual-effects-is-silent : false; in your Sass before you import the o-visual-effects Sass.

$o-visual-effects-is-silent: false;
@import 'o-visual-effects/main';

Shadows mixin

The oVisualEffectsShadowsElevation mixin is used to add a consistent shadow to your element. There are 4 levels of shadow available: ultralow, low (default), mid, and high.

Example:

.my-element {
	@include oVisualEffectsShadowsElevation('mid');
}

Output:

.my-element{
	box-shadow: 0 1px 3px rgba(77, 72, 69, 0.2), 0 6px 10px rgba(77, 72, 69, 0.15);
}

Transition variables

When adding transitions to elements in CSS, you should use o-visual-effects variables for consistent timings for slide, expand, and fade effects.

Example:

.transition--slide {
	transition: all 0.5s $o-visual-effects-transition-slide;
}

.transition--expand {
	transition: all 0.5s $o-visual-effects-transition-expand;
}

.transition--fade {
	transition: all 0.5s $o-visual-effects-transition-fade;
}

Output:

.transition--slide {
	transition: all 0.5s cubic-bezier(1, 0, 0.5, 1.275);
}

.transition--expand {
	transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.transition--fade {
	transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

Migration Guide

Migrating from v1 to v2

The following changes have been made to the mixins in o-visual-effects:

• oEffectsBackgroundsPinStripe removed.
• oEffectsShadowsElevation renamed to oVisualEffectsShadowsElevation.

Contact

If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #ft-origami or email Origami Support.

Licence

This software is published by the Financial Times under the MIT licence.