v3.0.0

Pull Requests

• #88 Better Sass by @offirgolan

Release Notes

• Hard dependency on sass (now required in the host application)
  • Allows to override various variables
  • Allows to selective import only the sass files you need
• More fine grain selector matching to support multi-level nested burger menus
• [BREAKING] slide-shrink renamed to squeeze
• [BREAKING] Menu item class has now been moved to the top level ember-burger-menu element. It can now be accessed via .ember-burger-menu.bm-item--stack
• [BREAKING] Please see Custom Animations for the new sass structure for custom animations

Sass

Installing ember-burger-menu should also install ember-cli-sass and automatically create a scss file under app/styles/app.scss with

// app/styles/app.scss

@import 'ember-burger-menu';

Overriding Variables

Using sass, you can override default variables and easily change the default behavior of ember-burger-menu.
See variables.scss for a list of variables you can change.

// app/styles/app.scss

// Burger Menu Overrides
$bm-transition-duration: 0.3s;
$bm-overlay-background: rgba(0, 0, 0, 0.7);

// Import all the styles!
@import 'ember-burger-menu';

Import Only What You Need

Using sass, you can import only the styles you need for the animations you use.

// Core Styles
@import 'ember-burger-menu/variables';
@import 'ember-burger-menu/structure';

// Animations
@import 'ember-burger-menu/animations/push';
@import 'ember-burger-menu/animations/menu-item/stack';