sass-burger 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. checksums.yaml +7 -0
  2. data/README.md +28 -0
  3. data/_burger.scss +120 -0
  4. data/lib/sass-burger.rb +14 -0
  5. metadata +61 -0
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: d980141fbaef80607c9cba1785ce9cb21e6415de
4
+ data.tar.gz: 11f0e13bed7269798e9ad55c93dd2d48f58f136e
5
+ SHA512:
6
+ metadata.gz: 1e437077cf616fcdc3338851d8ee8457525fb05ef7110f5698e7d2f8d930e3191e134eeb5ae67c033e6d3dd33f82f1b8ef3040eb8deb5e8bb087bf6701e15603
7
+ data.tar.gz: 34bebee067422ef49719d71d3af7cc8556e92a29cf7e6e6232517c5d552ade7c9edd0467bfd828cb00e0708ceb653839965d58e606e1690ba621d999eb3dca97
@@ -0,0 +1,28 @@
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 file](_burger.scss) or install through [Bower](http://bower.io).
11
+
12
+ ```
13
+ bower install sass-burger
14
+ ```
15
+
16
+ _Requires Sass 3.3.0 or higher._
17
+
18
+ ## Usage
19
+
20
+ Take a look at the demo and the burger.scss file, it should be pretty self-explanatory.
21
+
22
+ ## Less
23
+
24
+ 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/).
25
+
26
+ ## License
27
+
28
+ MIT [http://joren.mit-license.org/](http://joren.mit-license.org/)
@@ -0,0 +1,120 @@
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
+ &, &::before, &::after {
28
+ display: block;
29
+ width: $width;
30
+ height: $height;
31
+ background-color: $color;
32
+ @if $border-radius != 0 {
33
+ border-radius: $border-radius;
34
+ }
35
+
36
+ @if $sass-burger-add-vendor-prefixes {
37
+ -webkit-transition-property: background-color, -webkit-transform;
38
+ -moz-transition-property: background-color, -moz-transform;
39
+ -o-transition-property: background-color, -o-transform;
40
+ }
41
+ transition-property: background-color, transform;
42
+
43
+ @if $sass-burger-add-vendor-prefixes {
44
+ -webkit-transition-duration: $transition-duration;
45
+ -moz-transition-duration: $transition-duration;
46
+ -o-transition-duration: $transition-duration;
47
+ }
48
+ transition-duration: $transition-duration;
49
+ }
50
+
51
+ &::before, &::after {
52
+ position: absolute;
53
+ content: "";
54
+ }
55
+
56
+ &::before {
57
+ top: -($height + $gutter);
58
+ }
59
+
60
+ &::after {
61
+ top: $height + $gutter;
62
+ }
63
+ }
64
+
65
+
66
+ // Select parts of the burger
67
+ @mixin burger-parts {
68
+ &, &::before, &::after {
69
+ @content;
70
+ }
71
+ }
72
+
73
+ @mixin burger-top {
74
+ &::before {
75
+ @content;
76
+ }
77
+ }
78
+
79
+ @mixin burger-middle {
80
+ & {
81
+ @content;
82
+ }
83
+ }
84
+
85
+ @mixin burger-bottom {
86
+ &::after {
87
+ @content;
88
+ }
89
+ }
90
+
91
+
92
+ // Burger animations
93
+ @mixin burger-to-cross($color: auto) {
94
+ & {
95
+ background-color: transparent;
96
+ }
97
+ @if ($color != auto) {
98
+ &::before, &::after {
99
+ background-color: $color;
100
+ }
101
+ }
102
+ &::before {
103
+ @if $sass-burger-add-vendor-prefixes {
104
+ -webkit-transform: translateY($burger-gutter + $burger-height) rotate(45deg);
105
+ -moz-transform: translateY($burger-gutter + $burger-height) rotate(45deg);
106
+ -ms-transform: translateY($burger-gutter + $burger-height) rotate(45deg);
107
+ -o-transform: translateY($burger-gutter + $burger-height) rotate(45deg);
108
+ }
109
+ transform: translateY($burger-gutter + $burger-height) rotate(45deg);
110
+ }
111
+ &::after {
112
+ @if $sass-burger-add-vendor-prefixes {
113
+ -webkit-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
114
+ -moz-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
115
+ -ms-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
116
+ -o-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
117
+ }
118
+ transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
119
+ }
120
+ }
@@ -0,0 +1,14 @@
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
metadata ADDED
@@ -0,0 +1,61 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: sass-burger
3
+ version: !ruby/object:Gem::Version
4
+ version: 1.3.0
5
+ platform: ruby
6
+ authors:
7
+ - Joren Van Hee
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2016-06-05 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: sass
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - "~>"
18
+ - !ruby/object:Gem::Version
19
+ version: '3.3'
20
+ type: :runtime
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - "~>"
25
+ - !ruby/object:Gem::Version
26
+ version: '3.3'
27
+ description:
28
+ email:
29
+ - jorenvanhee@gmail.com
30
+ executables: []
31
+ extensions: []
32
+ extra_rdoc_files: []
33
+ files:
34
+ - README.md
35
+ - _burger.scss
36
+ - lib/sass-burger.rb
37
+ homepage: http://joren.co/sass-burger/
38
+ licenses:
39
+ - MIT
40
+ metadata: {}
41
+ post_install_message:
42
+ rdoc_options: []
43
+ require_paths:
44
+ - lib
45
+ required_ruby_version: !ruby/object:Gem::Requirement
46
+ requirements:
47
+ - - ">="
48
+ - !ruby/object:Gem::Version
49
+ version: '0'
50
+ required_rubygems_version: !ruby/object:Gem::Requirement
51
+ requirements:
52
+ - - ">="
53
+ - !ruby/object:Gem::Version
54
+ version: '0'
55
+ requirements: []
56
+ rubyforge_project:
57
+ rubygems_version: 2.6.4
58
+ signing_key:
59
+ specification_version: 4
60
+ summary: A Sass mixin for creating hamburger icons.
61
+ test_files: []