├── .gitignore ├── README.md ├── _burger.scss ├── bower.json ├── demo ├── index.html ├── style.css └── style.scss ├── lib └── sass-burger.rb ├── package.json ├── sache.json └── sass-burger.gemspec /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .sass-cache 3 | node_modules 4 | gulpfile.js -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Sass Burger 2 | =========== 3 | 4 | A Sass mixin for creating hamburger icons. 5 | 6 | [Demo »](http://joren.co/sass-burger/) 7 | 8 | ## Install 9 | 10 | Download the [_burger.scss](_burger.scss) file manually, or use a package manager. 11 | 12 | ``` 13 | npm install --save sass-burger 14 | ``` 15 | 16 | ``` 17 | gem install sass-burger 18 | ``` 19 | 20 | ``` 21 | bower install --save sass-burger 22 | ``` 23 | 24 | _Requires Sass 3.3.0 or higher._ 25 | 26 | ## Usage 27 | 28 | Take a look at the [example](demo/) and the [_burger.scss](_burger.scss) file, it should be pretty self-explanatory. 29 | 30 | ## Less 31 | 32 | Working with Less? Take a look at [Less Burger](https://github.com/MarkRabey/less-burger), a port of Sass Burger to Less by [Mark Rabey](http://markrabey.com/). 33 | 34 | ## License 35 | 36 | MIT [http://joren.mit-license.org/](http://joren.mit-license.org/) 37 | -------------------------------------------------------------------------------- /_burger.scss: -------------------------------------------------------------------------------- 1 | // Burger parts 2 | // 3 | // (---) top -> &::before 4 | // [---] middle -> & 5 | // (---) bottom -> &::after 6 | 7 | 8 | // Vendor prefixes 9 | $sass-burger-add-vendor-prefixes: true !default; 10 | 11 | // Burger 12 | @mixin burger($width: 30px, $height: 5px, $gutter: 3px, $color: #000, $border-radius: 0, $transition-duration: .3s) { 13 | $burger-height: $height !global; 14 | $burger-gutter: $gutter !global; 15 | 16 | position: relative; 17 | margin-top: $height + $gutter; 18 | margin-bottom: $height + $gutter; 19 | 20 | @if $sass-burger-add-vendor-prefixes { 21 | -webkit-user-select: none; 22 | -moz-user-select: none; 23 | -ms-user-select: none; 24 | } 25 | user-select: none; 26 | 27 | // 1. Fixes jagged edges in Firefox, see issue #10. 28 | &, &::before, &::after { 29 | display: block; 30 | width: $width; 31 | height: $height; 32 | background-color: $color; 33 | outline: 1px solid transparent; // 1 34 | @if $border-radius != 0 { 35 | border-radius: $border-radius; 36 | } 37 | 38 | @if $sass-burger-add-vendor-prefixes { 39 | -webkit-transition-property: background-color, -webkit-transform; 40 | -moz-transition-property: background-color, -moz-transform; 41 | -o-transition-property: background-color, -o-transform; 42 | } 43 | transition-property: background-color, transform; 44 | 45 | @if $sass-burger-add-vendor-prefixes { 46 | -webkit-transition-duration: $transition-duration; 47 | -moz-transition-duration: $transition-duration; 48 | -o-transition-duration: $transition-duration; 49 | } 50 | transition-duration: $transition-duration; 51 | } 52 | 53 | &::before, &::after { 54 | position: absolute; 55 | content: ""; 56 | } 57 | 58 | &::before { 59 | top: -($height + $gutter); 60 | } 61 | 62 | &::after { 63 | top: $height + $gutter; 64 | } 65 | } 66 | 67 | 68 | // Select parts of the burger 69 | @mixin burger-parts { 70 | &, &::before, &::after { 71 | @content; 72 | } 73 | } 74 | 75 | @mixin burger-top { 76 | &::before { 77 | @content; 78 | } 79 | } 80 | 81 | @mixin burger-middle { 82 | & { 83 | @content; 84 | } 85 | } 86 | 87 | @mixin burger-bottom { 88 | &::after { 89 | @content; 90 | } 91 | } 92 | 93 | 94 | // Burger animations 95 | @mixin burger-to-cross($color: auto) { 96 | & { 97 | background-color: transparent; 98 | } 99 | @if ($color != auto) { 100 | &::before, &::after { 101 | background-color: $color; 102 | } 103 | } 104 | &::before { 105 | @if $sass-burger-add-vendor-prefixes { 106 | -webkit-transform: translateY($burger-gutter + $burger-height) rotate(45deg); 107 | -moz-transform: translateY($burger-gutter + $burger-height) rotate(45deg); 108 | -ms-transform: translateY($burger-gutter + $burger-height) rotate(45deg); 109 | -o-transform: translateY($burger-gutter + $burger-height) rotate(45deg); 110 | } 111 | transform: translateY($burger-gutter + $burger-height) rotate(45deg); 112 | } 113 | &::after { 114 | @if $sass-burger-add-vendor-prefixes { 115 | -webkit-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg); 116 | -moz-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg); 117 | -ms-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg); 118 | -o-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg); 119 | } 120 | transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg); 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sass-burger", 3 | "version": "1.3.1", 4 | "homepage": "http://joren.co/sass-burger/", 5 | "authors": [ 6 | "Joren Van Hee" 7 | ], 8 | "description": "A Sass mixin for creating hamburger icons.", 9 | "main": "_burger.scss", 10 | "ignore": [ 11 | "**/*", 12 | "!_burger.scss" 13 | ], 14 | "keywords": [ 15 | "burger", 16 | "hamburger", 17 | "navicon", 18 | "icon", 19 | "mixin", 20 | "sass" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Burger 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /demo/style.css: -------------------------------------------------------------------------------- 1 | .menu-button { 2 | display: inline-block; 3 | padding: .5em; 4 | background-color: #fafafa; 5 | border: 1px solid #ccc; } 6 | 7 | .burger-icon { 8 | position: relative; 9 | margin-top: 8px; 10 | margin-bottom: 8px; 11 | -webkit-user-select: none; 12 | -moz-user-select: none; 13 | -ms-user-select: none; 14 | user-select: none; } 15 | .burger-icon, .burger-icon::before, .burger-icon::after { 16 | display: block; 17 | width: 25px; 18 | height: 3px; 19 | background-color: #444; 20 | outline: 1px solid transparent; 21 | -webkit-transition-property: background-color, -webkit-transform; 22 | -moz-transition-property: background-color, -moz-transform; 23 | -o-transition-property: background-color, -o-transform; 24 | transition-property: background-color, transform; 25 | -webkit-transition-duration: 0.3s; 26 | -moz-transition-duration: 0.3s; 27 | -o-transition-duration: 0.3s; 28 | transition-duration: 0.3s; } 29 | .burger-icon::before, .burger-icon::after { 30 | position: absolute; 31 | content: ""; } 32 | .burger-icon::before { 33 | top: -8px; } 34 | .burger-icon::after { 35 | top: 8px; } 36 | 37 | .menu-button.is-active .burger-icon { 38 | background-color: transparent; } 39 | 40 | .menu-button.is-active .burger-icon::before { 41 | -webkit-transform: translateY(8px) rotate(45deg); 42 | -moz-transform: translateY(8px) rotate(45deg); 43 | -ms-transform: translateY(8px) rotate(45deg); 44 | -o-transform: translateY(8px) rotate(45deg); 45 | transform: translateY(8px) rotate(45deg); } 46 | 47 | .menu-button.is-active .burger-icon::after { 48 | -webkit-transform: translateY(-8px) rotate(-45deg); 49 | -moz-transform: translateY(-8px) rotate(-45deg); 50 | -ms-transform: translateY(-8px) rotate(-45deg); 51 | -o-transform: translateY(-8px) rotate(-45deg); 52 | transform: translateY(-8px) rotate(-45deg); } 53 | -------------------------------------------------------------------------------- /demo/style.scss: -------------------------------------------------------------------------------- 1 | @import "../burger"; 2 | 3 | .menu-button { 4 | display: inline-block; 5 | padding: .5em; 6 | background-color: #fafafa; 7 | border: 1px solid #ccc; 8 | } 9 | 10 | .burger-icon { 11 | @include burger(25px, 3px, 5px, #444); 12 | } 13 | 14 | .menu-button.is-active .burger-icon { 15 | @include burger-to-cross; 16 | } -------------------------------------------------------------------------------- /lib/sass-burger.rb: -------------------------------------------------------------------------------- 1 | stylesheets_path = File.join(File.dirname(__FILE__), '..') 2 | 3 | if (defined? Compass) 4 | Compass::Frameworks.register( 5 | 'sass-burger', 6 | :stylesheets_directory => stylesheets_path 7 | ) 8 | else 9 | if ENV.has_key?('SASS_PATH') 10 | ENV['SASS_PATH'] = ENV['SASS_PATH'] + File::PATH_SEPARATOR + stylesheets_path 11 | else 12 | ENV['SASS_PATH'] = stylesheets_path 13 | end 14 | end -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sass-burger", 3 | "version": "1.3.1", 4 | "description": "A Sass mixin for creating hamburger icons.", 5 | "main": "_burger.scss", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/jorenvanhee/sass-burger.git" 9 | }, 10 | "keywords": [ 11 | "burger", 12 | "hamburger", 13 | "navicon", 14 | "icon", 15 | "mixin", 16 | "sass" 17 | ], 18 | "author": "Joren Van Hee (http://joren.co)", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/jorenvanhee/sass-burger/issues" 22 | }, 23 | "homepage": "http://joren.co/sass-burger/" 24 | } 25 | -------------------------------------------------------------------------------- /sache.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Sass Burger", 3 | "description": "A Sass mixin for creating hamburger icons.", 4 | "tags": ["ui", "burger", "hamburger", "navicon", "icon", "mixin"] 5 | } -------------------------------------------------------------------------------- /sass-burger.gemspec: -------------------------------------------------------------------------------- 1 | Gem::Specification.new do |spec| 2 | spec.name = 'sass-burger' 3 | spec.version = '1.3.1' 4 | spec.homepage = 'http://joren.co/sass-burger/' 5 | spec.authors = ['Joren Van Hee'] 6 | spec.email = ['jorenvanhee@gmail.com'] 7 | spec.summary = %q{A Sass mixin for creating hamburger icons.} 8 | spec.licenses = ['MIT'] 9 | 10 | spec.add_runtime_dependency('sass', '~> 3.3') 11 | 12 | spec.files = Dir.glob('lib/**/*.*') 13 | spec.files += ['_burger.scss'] 14 | spec.files += ['README.md'] 15 | end --------------------------------------------------------------------------------