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.
- checksums.yaml +7 -0
- data/README.md +28 -0
- data/_burger.scss +120 -0
- data/lib/sass-burger.rb +14 -0
- metadata +61 -0
checksums.yaml
ADDED
@@ -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
|
data/README.md
ADDED
@@ -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/)
|
data/_burger.scss
ADDED
@@ -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
|
+
}
|
data/lib/sass-burger.rb
ADDED
@@ -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: []
|