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: []
|