hamburger-icon

1.1.0 • Public • Published

Hamburger Icon

A collection of mixins for creating hamburger icons.

Basic idea — Sass Burger.

Support

Support for all popular css preprocessors: Less, Sass and Stylus.

Installation

  • Download the files you need from the this repository;
  • Bower: $ bower install hamburger-icon --save;
  • Git: $ git clone git://github.com/mrmlnc/hamburger-icon.git;

Then just import the file, whitch includes variables colors in your project.

Less:

  @import "lib/hamburger-icon";

Sass:

  @import "lib/hamburger-icon"

Stylus:

  @import "lib/hamburger-icon"

If you use Bower, the path would be:

  bower_components/hamburger-icon/..

Settings

You can change the settings:

  • width — default: 32px;
  • height — default: 3px;
  • gutter — default: 5px;
  • color — default: #000;
  • border-radius — default: 0;
  • duration — default: .3s;
  • timing-function — default: ease;

How to use

HTML:

<button class="navigation-toggle" data-tools="collapse" data-target="#globalNavbar">
  <span class="menu-icon"></span>
</button>
```
 
**Less:**
 
Required mixin of settings `.hamburger-settings()`.
 
````Less
.hamburger-settings(24px, 3px, 5px, #777, @timing-function: linear);
 
.menu-icon {
  .hamburger-generator();
}
 
.navigation-toggle {
  &.active .menu-icon {
    .hamburger-animation();
  }
}

SASS:

.menu-icon {
  @include hamburger-generator(24px, 3px, 5px, #777, $timing-function: linear);
}
 
.navigation-toggle {
  &.active .menu-icon {
    @include hamburger-animation();
  }
}

Stylus:

.menu-icon
  hamburger-generator(24px, 3px, 5px, #777, $timing-function: linear)
 
.navigation-toggle
  &.active .menu-icon
    hamburger-animation()

Changelog

See the Releases section of our GitHub project for changelogs for each release version.

License

This software is released under the terms of the MIT license.

Package Sidebar

Install

npm i hamburger-icon

Weekly Downloads

12

Version

1.1.0

License

MIT

Last publish

Collaborators

  • mrmlnc