jorenvanhee/sass-burger

A Sass mixin for creating hamburger icons.

Sass Burger

A Sass mixin for creating hamburger icons.

Demo »

Install

Download the _burger.scss file manually, or use a package manager.

npm install --save sass-burger

gem install sass-burger

bower install --save sass-burger

Requires Sass 3.3.0 or higher.

Usage

Take a look at the example and the _burger.scss file, it should be pretty self-explanatory.

Less

Working with Less? Take a look at Less Burger, a port of Sass Burger to Less by Mark Rabey.

License

MIT http://joren.mit-license.org/

sass-burger's Issues

Disable animation

Please disable the animation for systems where prefers-reduced-motion is set.

(please refrain from replying "it's only a small animation", because I happen to suffer from motion sensitivity, so I know what I'm talking about)

It should be as simple as adding @media (prefers-reduced-motion) { transition: none; }

Documentation

I'm not an expert user of compass and I became mad looking the way to import correctly this exension and I finally discovered that I have to do a @import "burger"; in my scss. Please complete the documentation by adding this data to avoid other users to waste time.

...and congratulations for this extension!

Thanks!

Libsass compatibility

I tried your code on a grunt/libass/Foundation environment and I got an error.

If I understood the notifications and what I Googled allright, the use of the deprecated "!global" seems to be problem, is there a way around this that you are aware of?

Other than this, Sass-burger is a beautiful piece of work!

background-color for burger-to-cross

I have added a color definition for the crossed burger:

// Burger animations
@mixin burger-to-cross($color: #000) {
  &, &:before, &:after {
    background-color: $color;
  }
  & {
    background-color: transparent;
  }
  &:before {
    -webkit-transform: translateY($burger-gutter + $burger-height) rotate(45deg);
    -moz-transform: translateY($burger-gutter + $burger-height) rotate(45deg);
    -ms-transform: translateY($burger-gutter + $burger-height) rotate(45deg);
    -o-transform: translateY($burger-gutter + $burger-height) rotate(45deg);
    transform: translateY($burger-gutter + $burger-height) rotate(45deg);
  }
  &:after {
    -webkit-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
    -moz-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
    -ms-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
    -o-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
    transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
  }
}

Stylus support

Do you have support it for stylus?

Sorry for my doubt, I know that project's name is SASS-burger, but it's a good idea has support for it too.

This project converts sass 2 stylus, but would be interesting includes a _burger.stylus for example!

http://sass2stylus.com/

Comments using `//`

Hy,

very nice mixin, only one thing I would change :)

Could you make your comments using // that they don't end up in the generated CSS?

If you mind I could also make a PR for that?

Error reading values after $height

Hi,

When i compile with Gulp i have this error
/sass-burger/burger:15: error: error reading values after $height

After i removed !global, everything it's ok.

:)

Can you toggle the animation form 2 seperate buttons?

I am using the latest Foundation 6 release with the built in ".close-button" as well as the ".burger-icon" to toggle my menu. Is there a way to trigger the X off and on with a separate buttons? I tried to adjust the javascript to include a listen event for the ".close-button" but it didn't seam to work.

Jagged edges

If you notice, the in-between states seem to feature some antialiasing problems: (Firefox/OSX)

Using translate3d may leave you with less aliased artifacts. This means using translate3d(0,8px,0) instead of translateY(8px), and adding translate3d(0,0,0) to the burger state.

Also, perhaps it'd be nice to make it double the size then do scale(0.5) — this may help lessen the aliasing artifacts as well.

Add license

The MIT License perhaps?

http://choosealicense.com/licenses/mit/

Button tag not working in IE

Adding sass-burger to <button> tag doesn't work in Internet Explorer. The problem is related to ::before and ::after pseudo-element. Therefor you should add sass-burger to <span> or <div> elements.

Also, if you want to be able to click the burger-icon you must wrap it inside a container to prevent mouse pointer to click in between the "burger-lines" (where there is margin).

Test: https://jsbin.com/xisoqiguka/edit?html,css,output

I saw the example in this repository and is well made, but add this two new hints in documentation may help someone.

Less Burger

Hey, work on this. I ported your code to Less for those who are interested: https://github.com/MarkRabey/less-burger

Maybe add a link on your readme?

Unbound variable $burger-gutter

When I import the scss and include the mixin, I get an Unbound variable $burger-gutter error.