timequake 1.0.9 → 2.0.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Gemfile.lock +34 -33
- data/app/assets/stylesheets/hamburgers/_base.scss +86 -0
- data/app/assets/stylesheets/hamburgers/hamburgers.scss +118 -0
- data/app/assets/stylesheets/hamburgers/types/_3dx-r.scss +35 -0
- data/app/assets/stylesheets/hamburgers/types/_3dx.scss +35 -0
- data/app/assets/stylesheets/hamburgers/types/_3dxy-r.scss +35 -0
- data/app/assets/stylesheets/hamburgers/types/_3dxy.scss +35 -0
- data/app/assets/stylesheets/hamburgers/types/_3dy-r.scss +35 -0
- data/app/assets/stylesheets/hamburgers/types/_3dy.scss +35 -0
- data/app/assets/stylesheets/hamburgers/types/_arrow-r.scss +16 -0
- data/app/assets/stylesheets/hamburgers/types/_arrow.scss +16 -0
- data/app/assets/stylesheets/hamburgers/types/_arrowalt-r.scss +36 -0
- data/app/assets/stylesheets/hamburgers/types/_arrowalt.scss +36 -0
- data/app/assets/stylesheets/hamburgers/types/_arrowturn-r.scss +18 -0
- data/app/assets/stylesheets/hamburgers/types/_arrowturn.scss +18 -0
- data/app/assets/stylesheets/hamburgers/types/_boring.scss +30 -0
- data/app/assets/stylesheets/hamburgers/types/_collapse-r.scss +47 -0
- data/app/assets/stylesheets/hamburgers/types/_collapse.scss +47 -0
- data/app/assets/stylesheets/hamburgers/types/_elastic-r.scss +41 -0
- data/app/assets/stylesheets/hamburgers/types/_elastic.scss +41 -0
- data/app/assets/stylesheets/hamburgers/types/_emphatic-r.scss +53 -0
- data/app/assets/stylesheets/hamburgers/types/_emphatic.scss +53 -0
- data/app/assets/stylesheets/hamburgers/types/_minus.scss +34 -0
- data/app/assets/stylesheets/hamburgers/types/_slider-r.scss +38 -0
- data/app/assets/stylesheets/hamburgers/types/_slider.scss +38 -0
- data/app/assets/stylesheets/hamburgers/types/_spin-r.scss +43 -0
- data/app/assets/stylesheets/hamburgers/types/_spin.scss +43 -0
- data/app/assets/stylesheets/hamburgers/types/_spring-r.scss +47 -0
- data/app/assets/stylesheets/hamburgers/types/_spring.scss +44 -0
- data/app/assets/stylesheets/hamburgers/types/_squeeze.scss +43 -0
- data/app/assets/stylesheets/hamburgers/types/_stand-r.scss +45 -0
- data/app/assets/stylesheets/hamburgers/types/_stand.scss +45 -0
- data/app/assets/stylesheets/hamburgers/types/_vortex-r.scss +48 -0
- data/app/assets/stylesheets/hamburgers/types/_vortex.scss +48 -0
- data/app/assets/stylesheets/timequake/_index.scss +7 -1
- data/app/assets/stylesheets/timequake/buttons.scss +3 -1
- data/app/assets/stylesheets/timequake/colors.scss +1 -0
- data/app/assets/stylesheets/timequake/display.scss +163 -0
- data/app/assets/stylesheets/timequake/flex.scss +128 -0
- data/app/assets/stylesheets/timequake/forms.scss +17 -0
- data/app/assets/stylesheets/timequake/layout.scss +59 -0
- data/app/assets/stylesheets/timequake/margin.scss +246 -0
- data/app/assets/stylesheets/timequake/padding.scss +246 -0
- data/app/assets/stylesheets/timequake/typography.scss +58 -0
- data/app/assets/stylesheets/timequake/universal.scss +23 -1
- data/app/assets/stylesheets/timequake/visibility.scss +39 -0
- data/lib/generators/timequake/templates/timequake_overrides.scss +79 -0
- data/lib/timequake/version.rb +1 -1
- data/timequake-2.0.1.gem +0 -0
- data/timequake-2.0.2.gem +0 -0
- metadata +44 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: ac66455fc011a8ae762b92073692e5331f351da56dee906d15df3b7a7a97e21a
|
4
|
+
data.tar.gz: ca9a906ed205278a6b4c1a4f74f083325fb865ab39db9ba2a83285e21026d510
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: ce01b3be80a9673056c44d379817502e7e098228ce34bd28ace99e789463b3e6057a16147b5b88f0cd3b2b77ccfdebc6b9ff472f46746847a8e5cd6da708e905
|
7
|
+
data.tar.gz: 43bf76bed054f714f457be1911a7db0b434334866de3166f0040f878a53e5e96ca2d9f68bb06d1b97d43dbe79a6e333444b0c4c3eb62c3c40f196cdd8930ea3b
|
data/Gemfile.lock
CHANGED
@@ -1,66 +1,68 @@
|
|
1
1
|
PATH
|
2
2
|
remote: .
|
3
3
|
specs:
|
4
|
-
timequake (
|
4
|
+
timequake (2.0.3)
|
5
5
|
jquery-rails (~> 4.4)
|
6
6
|
sass-rails (~> 6.0)
|
7
7
|
|
8
8
|
GEM
|
9
9
|
remote: https://rubygems.org/
|
10
10
|
specs:
|
11
|
-
actionpack (6.
|
12
|
-
actionview (= 6.
|
13
|
-
activesupport (= 6.
|
14
|
-
rack (~> 2.0, >= 2.0.
|
11
|
+
actionpack (6.1.4.1)
|
12
|
+
actionview (= 6.1.4.1)
|
13
|
+
activesupport (= 6.1.4.1)
|
14
|
+
rack (~> 2.0, >= 2.0.9)
|
15
15
|
rack-test (>= 0.6.3)
|
16
16
|
rails-dom-testing (~> 2.0)
|
17
17
|
rails-html-sanitizer (~> 1.0, >= 1.2.0)
|
18
|
-
actionview (6.
|
19
|
-
activesupport (= 6.
|
18
|
+
actionview (6.1.4.1)
|
19
|
+
activesupport (= 6.1.4.1)
|
20
20
|
builder (~> 3.1)
|
21
21
|
erubi (~> 1.4)
|
22
22
|
rails-dom-testing (~> 2.0)
|
23
23
|
rails-html-sanitizer (~> 1.1, >= 1.2.0)
|
24
|
-
activesupport (6.
|
24
|
+
activesupport (6.1.4.1)
|
25
25
|
concurrent-ruby (~> 1.0, >= 1.0.2)
|
26
|
-
i18n (>=
|
27
|
-
minitest (
|
28
|
-
tzinfo (~>
|
29
|
-
zeitwerk (~> 2.
|
26
|
+
i18n (>= 1.6, < 2)
|
27
|
+
minitest (>= 5.1)
|
28
|
+
tzinfo (~> 2.0)
|
29
|
+
zeitwerk (~> 2.3)
|
30
30
|
builder (3.2.4)
|
31
|
-
concurrent-ruby (1.1.
|
31
|
+
concurrent-ruby (1.1.9)
|
32
32
|
crass (1.0.6)
|
33
33
|
diff-lcs (1.4.4)
|
34
|
-
erubi (1.
|
35
|
-
ffi (1.
|
36
|
-
i18n (1.8.
|
34
|
+
erubi (1.10.0)
|
35
|
+
ffi (1.15.4)
|
36
|
+
i18n (1.8.11)
|
37
37
|
concurrent-ruby (~> 1.0)
|
38
38
|
jquery-rails (4.4.0)
|
39
39
|
rails-dom-testing (>= 1, < 3)
|
40
40
|
railties (>= 4.2.0)
|
41
41
|
thor (>= 0.14, < 2.0)
|
42
|
-
loofah (2.
|
42
|
+
loofah (2.12.0)
|
43
43
|
crass (~> 1.0.2)
|
44
44
|
nokogiri (>= 1.5.9)
|
45
45
|
method_source (1.0.0)
|
46
|
-
mini_portile2 (2.
|
47
|
-
minitest (5.14.
|
48
|
-
nokogiri (1.
|
49
|
-
mini_portile2 (~> 2.
|
46
|
+
mini_portile2 (2.6.1)
|
47
|
+
minitest (5.14.4)
|
48
|
+
nokogiri (1.12.5)
|
49
|
+
mini_portile2 (~> 2.6.1)
|
50
|
+
racc (~> 1.4)
|
51
|
+
racc (1.6.0)
|
50
52
|
rack (2.2.3)
|
51
53
|
rack-test (1.1.0)
|
52
54
|
rack (>= 1.0, < 3)
|
53
55
|
rails-dom-testing (2.0.3)
|
54
56
|
activesupport (>= 4.2.0)
|
55
57
|
nokogiri (>= 1.6)
|
56
|
-
rails-html-sanitizer (1.
|
58
|
+
rails-html-sanitizer (1.4.2)
|
57
59
|
loofah (~> 2.3)
|
58
|
-
railties (6.
|
59
|
-
actionpack (= 6.
|
60
|
-
activesupport (= 6.
|
60
|
+
railties (6.1.4.1)
|
61
|
+
actionpack (= 6.1.4.1)
|
62
|
+
activesupport (= 6.1.4.1)
|
61
63
|
method_source
|
62
|
-
rake (>= 0.
|
63
|
-
thor (
|
64
|
+
rake (>= 0.13)
|
65
|
+
thor (~> 1.0)
|
64
66
|
rake (12.3.3)
|
65
67
|
rspec (3.9.0)
|
66
68
|
rspec-core (~> 3.9.0)
|
@@ -88,16 +90,15 @@ GEM
|
|
88
90
|
sprockets (4.0.2)
|
89
91
|
concurrent-ruby (~> 1.0)
|
90
92
|
rack (> 1, < 3)
|
91
|
-
sprockets-rails (3.2.
|
93
|
+
sprockets-rails (3.2.2)
|
92
94
|
actionpack (>= 4.0)
|
93
95
|
activesupport (>= 4.0)
|
94
96
|
sprockets (>= 3.0.0)
|
95
|
-
thor (1.0
|
96
|
-
thread_safe (0.3.6)
|
97
|
+
thor (1.1.0)
|
97
98
|
tilt (2.0.10)
|
98
|
-
tzinfo (
|
99
|
-
|
100
|
-
zeitwerk (2.
|
99
|
+
tzinfo (2.0.4)
|
100
|
+
concurrent-ruby (~> 1.0)
|
101
|
+
zeitwerk (2.5.1)
|
101
102
|
|
102
103
|
PLATFORMS
|
103
104
|
ruby
|
@@ -0,0 +1,86 @@
|
|
1
|
+
// Hamburger
|
2
|
+
// ==================================================
|
3
|
+
.hamburger {
|
4
|
+
padding: $hamburger-padding-y $hamburger-padding-x;
|
5
|
+
display: inline-block;
|
6
|
+
cursor: pointer;
|
7
|
+
|
8
|
+
transition-property: opacity, filter;
|
9
|
+
transition-duration: 0.15s;
|
10
|
+
transition-timing-function: linear;
|
11
|
+
|
12
|
+
// Normalize (<button>)
|
13
|
+
font: inherit;
|
14
|
+
color: inherit;
|
15
|
+
text-transform: none;
|
16
|
+
background-color: transparent;
|
17
|
+
border: 0;
|
18
|
+
margin: 0;
|
19
|
+
overflow: visible;
|
20
|
+
|
21
|
+
&:hover {
|
22
|
+
@if $hamburger-hover-use-filter == true {
|
23
|
+
filter: $hamburger-hover-filter;
|
24
|
+
}
|
25
|
+
@else {
|
26
|
+
opacity: $hamburger-hover-opacity;
|
27
|
+
}
|
28
|
+
}
|
29
|
+
|
30
|
+
&.is-active {
|
31
|
+
&:hover {
|
32
|
+
@if $hamburger-hover-use-filter == true {
|
33
|
+
filter: $hamburger-active-hover-filter;
|
34
|
+
}
|
35
|
+
@else {
|
36
|
+
opacity: $hamburger-active-hover-opacity;
|
37
|
+
}
|
38
|
+
}
|
39
|
+
|
40
|
+
.hamburger-inner,
|
41
|
+
.hamburger-inner::before,
|
42
|
+
.hamburger-inner::after {
|
43
|
+
background-color: $hamburger-active-layer-color;
|
44
|
+
}
|
45
|
+
}
|
46
|
+
}
|
47
|
+
|
48
|
+
.hamburger-box {
|
49
|
+
width: $hamburger-layer-width;
|
50
|
+
height: $hamburger-layer-height * 3 + $hamburger-layer-spacing * 2;
|
51
|
+
display: inline-block;
|
52
|
+
position: relative;
|
53
|
+
}
|
54
|
+
|
55
|
+
.hamburger-inner {
|
56
|
+
display: block;
|
57
|
+
top: 50%;
|
58
|
+
margin-top: $hamburger-layer-height / -2;
|
59
|
+
|
60
|
+
&,
|
61
|
+
&::before,
|
62
|
+
&::after {
|
63
|
+
width: $hamburger-layer-width;
|
64
|
+
height: $hamburger-layer-height;
|
65
|
+
background-color: $hamburger-layer-color;
|
66
|
+
border-radius: $hamburger-layer-border-radius;
|
67
|
+
position: absolute;
|
68
|
+
transition-property: transform;
|
69
|
+
transition-duration: 0.15s;
|
70
|
+
transition-timing-function: ease;
|
71
|
+
}
|
72
|
+
|
73
|
+
&::before,
|
74
|
+
&::after {
|
75
|
+
content: "";
|
76
|
+
display: block;
|
77
|
+
}
|
78
|
+
|
79
|
+
&::before {
|
80
|
+
top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
|
81
|
+
}
|
82
|
+
|
83
|
+
&::after {
|
84
|
+
bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
|
85
|
+
}
|
86
|
+
}
|
@@ -0,0 +1,118 @@
|
|
1
|
+
@charset "UTF-8";
|
2
|
+
/*!
|
3
|
+
* Hamburgers
|
4
|
+
* @description Tasty CSS-animated hamburgers
|
5
|
+
* @author Jonathan Suh @jonsuh
|
6
|
+
* @site https://jonsuh.com/hamburgers
|
7
|
+
* @link https://github.com/jonsuh/hamburgers
|
8
|
+
*/
|
9
|
+
|
10
|
+
// Settings
|
11
|
+
// ==================================================
|
12
|
+
$hamburger-padding-x : 15px !default;
|
13
|
+
$hamburger-padding-y : 15px !default;
|
14
|
+
$hamburger-layer-width : 40px !default;
|
15
|
+
$hamburger-layer-height : 4px !default;
|
16
|
+
$hamburger-layer-spacing : 6px !default;
|
17
|
+
$hamburger-layer-color : #000 !default;
|
18
|
+
$hamburger-layer-border-radius : 4px !default;
|
19
|
+
$hamburger-hover-opacity : 0.7 !default;
|
20
|
+
$hamburger-active-layer-color : $hamburger-layer-color !default;
|
21
|
+
$hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
|
22
|
+
|
23
|
+
// To use CSS filters as the hover effect instead of opacity,
|
24
|
+
// set $hamburger-hover-use-filter as true and
|
25
|
+
// change the value of $hamburger-hover-filter accordingly.
|
26
|
+
$hamburger-hover-use-filter : false !default;
|
27
|
+
$hamburger-hover-filter : opacity(50%) !default;
|
28
|
+
$hamburger-active-hover-filter: $hamburger-hover-filter !default;
|
29
|
+
|
30
|
+
// Types (Remove or comment out what you don’t need)
|
31
|
+
// ==================================================
|
32
|
+
$hamburger-types: (
|
33
|
+
3dx,
|
34
|
+
3dx-r,
|
35
|
+
3dy,
|
36
|
+
3dy-r,
|
37
|
+
3dxy,
|
38
|
+
3dxy-r,
|
39
|
+
arrow,
|
40
|
+
arrow-r,
|
41
|
+
arrowalt,
|
42
|
+
arrowalt-r,
|
43
|
+
arrowturn,
|
44
|
+
arrowturn-r,
|
45
|
+
boring,
|
46
|
+
collapse,
|
47
|
+
collapse-r,
|
48
|
+
elastic,
|
49
|
+
elastic-r,
|
50
|
+
emphatic,
|
51
|
+
emphatic-r,
|
52
|
+
minus,
|
53
|
+
slider,
|
54
|
+
slider-r,
|
55
|
+
spin,
|
56
|
+
spin-r,
|
57
|
+
spring,
|
58
|
+
spring-r,
|
59
|
+
stand,
|
60
|
+
stand-r,
|
61
|
+
squeeze,
|
62
|
+
vortex,
|
63
|
+
vortex-r
|
64
|
+
) !default;
|
65
|
+
|
66
|
+
// Base Hamburger (We need this)
|
67
|
+
// ==================================================
|
68
|
+
@import "base";
|
69
|
+
|
70
|
+
// Hamburger types
|
71
|
+
// ==================================================
|
72
|
+
@import "types/3dx";
|
73
|
+
@import "types/3dx-r";
|
74
|
+
@import "types/3dy";
|
75
|
+
@import "types/3dy-r";
|
76
|
+
@import "types/3dxy";
|
77
|
+
@import "types/3dxy-r";
|
78
|
+
@import "types/arrow";
|
79
|
+
@import "types/arrow-r";
|
80
|
+
@import "types/arrowalt";
|
81
|
+
@import "types/arrowalt-r";
|
82
|
+
@import "types/arrowturn";
|
83
|
+
@import "types/arrowturn-r";
|
84
|
+
@import "types/boring";
|
85
|
+
@import "types/collapse";
|
86
|
+
@import "types/collapse-r";
|
87
|
+
@import "types/elastic";
|
88
|
+
@import "types/elastic-r";
|
89
|
+
@import "types/emphatic";
|
90
|
+
@import "types/emphatic-r";
|
91
|
+
@import "types/minus";
|
92
|
+
@import "types/slider";
|
93
|
+
@import "types/slider-r";
|
94
|
+
@import "types/spin";
|
95
|
+
@import "types/spin-r";
|
96
|
+
@import "types/spring";
|
97
|
+
@import "types/spring-r";
|
98
|
+
@import "types/stand";
|
99
|
+
@import "types/stand-r";
|
100
|
+
@import "types/squeeze";
|
101
|
+
@import "types/vortex";
|
102
|
+
@import "types/vortex-r";
|
103
|
+
|
104
|
+
// ==================================================
|
105
|
+
// Cooking up additional types:
|
106
|
+
//
|
107
|
+
// The Sass for each hamburger type should be nested
|
108
|
+
// inside an @if directive to check whether or not
|
109
|
+
// it exists in $hamburger-types so only the CSS for
|
110
|
+
// included types are generated.
|
111
|
+
//
|
112
|
+
// e.g. hamburgers/types/_new-type.scss
|
113
|
+
//
|
114
|
+
// @if index($hamburger-types, new-type) {
|
115
|
+
// .hamburger--new-type {
|
116
|
+
// ...
|
117
|
+
// }
|
118
|
+
// }
|
@@ -0,0 +1,35 @@
|
|
1
|
+
@if index($hamburger-types, 3dx-r) {
|
2
|
+
/*
|
3
|
+
* 3DX Reverse
|
4
|
+
*/
|
5
|
+
.hamburger--3dx-r {
|
6
|
+
.hamburger-box {
|
7
|
+
perspective: $hamburger-layer-width * 2;
|
8
|
+
}
|
9
|
+
|
10
|
+
.hamburger-inner {
|
11
|
+
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
12
|
+
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
13
|
+
|
14
|
+
&::before,
|
15
|
+
&::after {
|
16
|
+
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
17
|
+
}
|
18
|
+
}
|
19
|
+
|
20
|
+
&.is-active {
|
21
|
+
.hamburger-inner {
|
22
|
+
background-color: transparent !important;
|
23
|
+
transform: rotateY(-180deg);
|
24
|
+
|
25
|
+
&::before {
|
26
|
+
transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
|
27
|
+
}
|
28
|
+
|
29
|
+
&::after {
|
30
|
+
transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
|
31
|
+
}
|
32
|
+
}
|
33
|
+
}
|
34
|
+
}
|
35
|
+
}
|
@@ -0,0 +1,35 @@
|
|
1
|
+
@if index($hamburger-types, 3dx) {
|
2
|
+
/*
|
3
|
+
* 3DX
|
4
|
+
*/
|
5
|
+
.hamburger--3dx {
|
6
|
+
.hamburger-box {
|
7
|
+
perspective: $hamburger-layer-width * 2;
|
8
|
+
}
|
9
|
+
|
10
|
+
.hamburger-inner {
|
11
|
+
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
12
|
+
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
13
|
+
|
14
|
+
&::before,
|
15
|
+
&::after {
|
16
|
+
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
17
|
+
}
|
18
|
+
}
|
19
|
+
|
20
|
+
&.is-active {
|
21
|
+
.hamburger-inner {
|
22
|
+
background-color: transparent !important;
|
23
|
+
transform: rotateY(180deg);
|
24
|
+
|
25
|
+
&::before {
|
26
|
+
transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
|
27
|
+
}
|
28
|
+
|
29
|
+
&::after {
|
30
|
+
transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
|
31
|
+
}
|
32
|
+
}
|
33
|
+
}
|
34
|
+
}
|
35
|
+
}
|
@@ -0,0 +1,35 @@
|
|
1
|
+
@if index($hamburger-types, 3dxy-r) {
|
2
|
+
/*
|
3
|
+
* 3DXY Reverse
|
4
|
+
*/
|
5
|
+
.hamburger--3dxy-r {
|
6
|
+
.hamburger-box {
|
7
|
+
perspective: $hamburger-layer-width * 2;
|
8
|
+
}
|
9
|
+
|
10
|
+
.hamburger-inner {
|
11
|
+
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
12
|
+
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
13
|
+
|
14
|
+
&::before,
|
15
|
+
&::after {
|
16
|
+
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
17
|
+
}
|
18
|
+
}
|
19
|
+
|
20
|
+
&.is-active {
|
21
|
+
.hamburger-inner {
|
22
|
+
background-color: transparent !important;
|
23
|
+
transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg);
|
24
|
+
|
25
|
+
&::before {
|
26
|
+
transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
|
27
|
+
}
|
28
|
+
|
29
|
+
&::after {
|
30
|
+
transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
|
31
|
+
}
|
32
|
+
}
|
33
|
+
}
|
34
|
+
}
|
35
|
+
}
|
@@ -0,0 +1,35 @@
|
|
1
|
+
@if index($hamburger-types, 3dxy) {
|
2
|
+
/*
|
3
|
+
* 3DXY
|
4
|
+
*/
|
5
|
+
.hamburger--3dxy {
|
6
|
+
.hamburger-box {
|
7
|
+
perspective: $hamburger-layer-width * 2;
|
8
|
+
}
|
9
|
+
|
10
|
+
.hamburger-inner {
|
11
|
+
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
12
|
+
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
13
|
+
|
14
|
+
&::before,
|
15
|
+
&::after {
|
16
|
+
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
17
|
+
}
|
18
|
+
}
|
19
|
+
|
20
|
+
&.is-active {
|
21
|
+
.hamburger-inner {
|
22
|
+
background-color: transparent !important;
|
23
|
+
transform: rotateX(180deg) rotateY(180deg);
|
24
|
+
|
25
|
+
&::before {
|
26
|
+
transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
|
27
|
+
}
|
28
|
+
|
29
|
+
&::after {
|
30
|
+
transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
|
31
|
+
}
|
32
|
+
}
|
33
|
+
}
|
34
|
+
}
|
35
|
+
}
|
@@ -0,0 +1,35 @@
|
|
1
|
+
@if index($hamburger-types, 3dy-r) {
|
2
|
+
/*
|
3
|
+
* 3DY Reverse
|
4
|
+
*/
|
5
|
+
.hamburger--3dy-r {
|
6
|
+
.hamburger-box {
|
7
|
+
perspective: $hamburger-layer-width * 2;
|
8
|
+
}
|
9
|
+
|
10
|
+
.hamburger-inner {
|
11
|
+
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
12
|
+
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
13
|
+
|
14
|
+
&::before,
|
15
|
+
&::after {
|
16
|
+
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
17
|
+
}
|
18
|
+
}
|
19
|
+
|
20
|
+
&.is-active {
|
21
|
+
.hamburger-inner {
|
22
|
+
background-color: transparent !important;
|
23
|
+
transform: rotateX(180deg);
|
24
|
+
|
25
|
+
&::before {
|
26
|
+
transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
|
27
|
+
}
|
28
|
+
|
29
|
+
&::after {
|
30
|
+
transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
|
31
|
+
}
|
32
|
+
}
|
33
|
+
}
|
34
|
+
}
|
35
|
+
}
|
@@ -0,0 +1,35 @@
|
|
1
|
+
@if index($hamburger-types, 3dy) {
|
2
|
+
/*
|
3
|
+
* 3DY
|
4
|
+
*/
|
5
|
+
.hamburger--3dy {
|
6
|
+
.hamburger-box {
|
7
|
+
perspective: $hamburger-layer-width * 2;
|
8
|
+
}
|
9
|
+
|
10
|
+
.hamburger-inner {
|
11
|
+
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
12
|
+
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
13
|
+
|
14
|
+
&::before,
|
15
|
+
&::after {
|
16
|
+
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
17
|
+
}
|
18
|
+
}
|
19
|
+
|
20
|
+
&.is-active {
|
21
|
+
.hamburger-inner {
|
22
|
+
background-color: transparent !important;
|
23
|
+
transform: rotateX(-180deg);
|
24
|
+
|
25
|
+
&::before {
|
26
|
+
transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
|
27
|
+
}
|
28
|
+
|
29
|
+
&::after {
|
30
|
+
transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
|
31
|
+
}
|
32
|
+
}
|
33
|
+
}
|
34
|
+
}
|
35
|
+
}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
@if index($hamburger-types, arrow-r) {
|
2
|
+
/*
|
3
|
+
* Arrow Right
|
4
|
+
*/
|
5
|
+
.hamburger--arrow-r.is-active {
|
6
|
+
.hamburger-inner {
|
7
|
+
&::before {
|
8
|
+
transform: translate3d($hamburger-layer-width * 0.2, 0, 0) rotate(45deg) scale(0.7, 1);
|
9
|
+
}
|
10
|
+
|
11
|
+
&::after {
|
12
|
+
transform: translate3d($hamburger-layer-width * 0.2, 0, 0) rotate(-45deg) scale(0.7, 1);
|
13
|
+
}
|
14
|
+
}
|
15
|
+
}
|
16
|
+
}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
@if index($hamburger-types, arrow) {
|
2
|
+
/*
|
3
|
+
* Arrow
|
4
|
+
*/
|
5
|
+
.hamburger--arrow.is-active {
|
6
|
+
.hamburger-inner {
|
7
|
+
&::before {
|
8
|
+
transform: translate3d($hamburger-layer-width * -0.2, 0, 0) rotate(-45deg) scale(0.7, 1);
|
9
|
+
}
|
10
|
+
|
11
|
+
&::after {
|
12
|
+
transform: translate3d($hamburger-layer-width * -0.2, 0, 0) rotate(45deg) scale(0.7, 1);
|
13
|
+
}
|
14
|
+
}
|
15
|
+
}
|
16
|
+
}
|
@@ -0,0 +1,36 @@
|
|
1
|
+
@if index($hamburger-types, arrowalt-r) {
|
2
|
+
/*
|
3
|
+
* Arrow Alt Right
|
4
|
+
*/
|
5
|
+
.hamburger--arrowalt-r {
|
6
|
+
.hamburger-inner {
|
7
|
+
&::before {
|
8
|
+
transition: top 0.1s 0.1s ease,
|
9
|
+
transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
10
|
+
}
|
11
|
+
|
12
|
+
&::after {
|
13
|
+
transition: bottom 0.1s 0.1s ease,
|
14
|
+
transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
15
|
+
}
|
16
|
+
}
|
17
|
+
|
18
|
+
&.is-active {
|
19
|
+
.hamburger-inner {
|
20
|
+
&::before {
|
21
|
+
top: 0;
|
22
|
+
transform: translate3d($hamburger-layer-width * 0.2, $hamburger-layer-width * -0.25, 0) rotate(45deg) scale(0.7, 1);
|
23
|
+
transition: top 0.1s ease,
|
24
|
+
transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
25
|
+
}
|
26
|
+
|
27
|
+
&::after {
|
28
|
+
bottom: 0;
|
29
|
+
transform: translate3d($hamburger-layer-width * 0.2, $hamburger-layer-width * 0.25, 0) rotate(-45deg) scale(0.7, 1);
|
30
|
+
transition: bottom 0.1s ease,
|
31
|
+
transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
32
|
+
}
|
33
|
+
}
|
34
|
+
}
|
35
|
+
}
|
36
|
+
}
|
@@ -0,0 +1,36 @@
|
|
1
|
+
@if index($hamburger-types, arrowalt) {
|
2
|
+
/*
|
3
|
+
* Arrow Alt
|
4
|
+
*/
|
5
|
+
.hamburger--arrowalt {
|
6
|
+
.hamburger-inner {
|
7
|
+
&::before {
|
8
|
+
transition: top 0.1s 0.1s ease,
|
9
|
+
transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
10
|
+
}
|
11
|
+
|
12
|
+
&::after {
|
13
|
+
transition: bottom 0.1s 0.1s ease,
|
14
|
+
transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
15
|
+
}
|
16
|
+
}
|
17
|
+
|
18
|
+
&.is-active {
|
19
|
+
.hamburger-inner {
|
20
|
+
&::before {
|
21
|
+
top: 0;
|
22
|
+
transform: translate3d($hamburger-layer-width * -0.2, $hamburger-layer-width * -0.25, 0) rotate(-45deg) scale(0.7, 1);
|
23
|
+
transition: top 0.1s ease,
|
24
|
+
transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
25
|
+
}
|
26
|
+
|
27
|
+
&::after {
|
28
|
+
bottom: 0;
|
29
|
+
transform: translate3d($hamburger-layer-width * -0.2, $hamburger-layer-width * 0.25, 0) rotate(45deg) scale(0.7, 1);
|
30
|
+
transition: bottom 0.1s ease,
|
31
|
+
transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
32
|
+
}
|
33
|
+
}
|
34
|
+
}
|
35
|
+
}
|
36
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
@if index($hamburger-types, arrowturn-r) {
|
2
|
+
/*
|
3
|
+
* Arrow Turn Right
|
4
|
+
*/
|
5
|
+
.hamburger--arrowturn-r.is-active {
|
6
|
+
.hamburger-inner {
|
7
|
+
transform: rotate(-180deg);
|
8
|
+
|
9
|
+
&::before {
|
10
|
+
transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1);
|
11
|
+
}
|
12
|
+
|
13
|
+
&::after {
|
14
|
+
transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1);
|
15
|
+
}
|
16
|
+
}
|
17
|
+
}
|
18
|
+
}
|