timequake 2.0.11 → 3.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Gemfile +0 -3
- data/Gemfile.lock +1 -96
- data/README.md +5 -22
- data/app/assets/stylesheets/timequake/layout.scss +10 -10
- data/lib/generators/timequake/install_generator.rb +0 -3
- data/lib/generators/timequake/templates/timequake_overrides.scss +1 -58
- data/lib/timequake/version.rb +1 -1
- data/lib/timequake.rb +0 -2
- data/timequake.gemspec +0 -3
- metadata +4 -68
- data/app/assets/config/timequake_manifest.js +0 -1
- data/app/assets/javascripts/timequake/modals.js +0 -19
- data/app/assets/javascripts/timequake.js +0 -4
- data/app/assets/stylesheets/hamburgers/_base.scss +0 -86
- data/app/assets/stylesheets/hamburgers/hamburgers.scss +0 -118
- data/app/assets/stylesheets/hamburgers/types/_3dx-r.scss +0 -35
- data/app/assets/stylesheets/hamburgers/types/_3dx.scss +0 -35
- data/app/assets/stylesheets/hamburgers/types/_3dxy-r.scss +0 -35
- data/app/assets/stylesheets/hamburgers/types/_3dxy.scss +0 -35
- data/app/assets/stylesheets/hamburgers/types/_3dy-r.scss +0 -35
- data/app/assets/stylesheets/hamburgers/types/_3dy.scss +0 -35
- data/app/assets/stylesheets/hamburgers/types/_arrow-r.scss +0 -16
- data/app/assets/stylesheets/hamburgers/types/_arrow.scss +0 -16
- data/app/assets/stylesheets/hamburgers/types/_arrowalt-r.scss +0 -36
- data/app/assets/stylesheets/hamburgers/types/_arrowalt.scss +0 -36
- data/app/assets/stylesheets/hamburgers/types/_arrowturn-r.scss +0 -18
- data/app/assets/stylesheets/hamburgers/types/_arrowturn.scss +0 -18
- data/app/assets/stylesheets/hamburgers/types/_boring.scss +0 -30
- data/app/assets/stylesheets/hamburgers/types/_collapse-r.scss +0 -47
- data/app/assets/stylesheets/hamburgers/types/_collapse.scss +0 -47
- data/app/assets/stylesheets/hamburgers/types/_elastic-r.scss +0 -41
- data/app/assets/stylesheets/hamburgers/types/_elastic.scss +0 -41
- data/app/assets/stylesheets/hamburgers/types/_emphatic-r.scss +0 -53
- data/app/assets/stylesheets/hamburgers/types/_emphatic.scss +0 -53
- data/app/assets/stylesheets/hamburgers/types/_minus.scss +0 -34
- data/app/assets/stylesheets/hamburgers/types/_slider-r.scss +0 -38
- data/app/assets/stylesheets/hamburgers/types/_slider.scss +0 -38
- data/app/assets/stylesheets/hamburgers/types/_spin-r.scss +0 -43
- data/app/assets/stylesheets/hamburgers/types/_spin.scss +0 -43
- data/app/assets/stylesheets/hamburgers/types/_spring-r.scss +0 -47
- data/app/assets/stylesheets/hamburgers/types/_spring.scss +0 -44
- data/app/assets/stylesheets/hamburgers/types/_squeeze.scss +0 -43
- data/app/assets/stylesheets/hamburgers/types/_stand-r.scss +0 -45
- data/app/assets/stylesheets/hamburgers/types/_stand.scss +0 -45
- data/app/assets/stylesheets/hamburgers/types/_vortex-r.scss +0 -48
- data/app/assets/stylesheets/hamburgers/types/_vortex.scss +0 -48
@@ -1,35 +0,0 @@
|
|
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
|
-
}
|
@@ -1,35 +0,0 @@
|
|
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
|
-
}
|
@@ -1,35 +0,0 @@
|
|
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
|
-
}
|
@@ -1,35 +0,0 @@
|
|
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
|
-
}
|
@@ -1,35 +0,0 @@
|
|
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
|
-
}
|
@@ -1,35 +0,0 @@
|
|
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
|
-
}
|
@@ -1,16 +0,0 @@
|
|
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
|
-
}
|
@@ -1,16 +0,0 @@
|
|
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
|
-
}
|
@@ -1,36 +0,0 @@
|
|
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
|
-
}
|
@@ -1,36 +0,0 @@
|
|
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
|
-
}
|
@@ -1,18 +0,0 @@
|
|
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
|
-
}
|
@@ -1,18 +0,0 @@
|
|
1
|
-
@if index($hamburger-types, arrowturn) {
|
2
|
-
/*
|
3
|
-
* Arrow Turn
|
4
|
-
*/
|
5
|
-
.hamburger--arrowturn.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
|
-
}
|
@@ -1,30 +0,0 @@
|
|
1
|
-
@if index($hamburger-types, boring) {
|
2
|
-
/*
|
3
|
-
* Boring
|
4
|
-
*/
|
5
|
-
.hamburger--boring {
|
6
|
-
.hamburger-inner {
|
7
|
-
&,
|
8
|
-
&::before,
|
9
|
-
&::after {
|
10
|
-
transition-property: none;
|
11
|
-
}
|
12
|
-
}
|
13
|
-
|
14
|
-
&.is-active {
|
15
|
-
.hamburger-inner {
|
16
|
-
transform: rotate(45deg);
|
17
|
-
|
18
|
-
&::before {
|
19
|
-
top: 0;
|
20
|
-
opacity: 0;
|
21
|
-
}
|
22
|
-
|
23
|
-
&::after {
|
24
|
-
bottom: 0;
|
25
|
-
transform: rotate(-90deg);
|
26
|
-
}
|
27
|
-
}
|
28
|
-
}
|
29
|
-
}
|
30
|
-
}
|
@@ -1,47 +0,0 @@
|
|
1
|
-
@if index($hamburger-types, collapse-r) {
|
2
|
-
/*
|
3
|
-
* Collapse Reverse
|
4
|
-
*/
|
5
|
-
.hamburger--collapse-r {
|
6
|
-
.hamburger-inner {
|
7
|
-
top: auto;
|
8
|
-
bottom: 0;
|
9
|
-
transition-duration: 0.13s;
|
10
|
-
transition-delay: 0.13s;
|
11
|
-
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
12
|
-
|
13
|
-
&::after {
|
14
|
-
top: ($hamburger-layer-spacing * 2 + $hamburger-layer-height * 2) * -1;
|
15
|
-
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
16
|
-
opacity 0.1s linear;
|
17
|
-
}
|
18
|
-
|
19
|
-
&::before {
|
20
|
-
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
21
|
-
transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
22
|
-
}
|
23
|
-
}
|
24
|
-
|
25
|
-
&.is-active {
|
26
|
-
.hamburger-inner {
|
27
|
-
transform: translate3d(0, ($hamburger-layer-spacing + $hamburger-layer-height) * -1, 0) rotate(45deg);
|
28
|
-
transition-delay: 0.22s;
|
29
|
-
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
30
|
-
|
31
|
-
&::after {
|
32
|
-
top: 0;
|
33
|
-
opacity: 0;
|
34
|
-
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
35
|
-
opacity 0.1s 0.22s linear;
|
36
|
-
}
|
37
|
-
|
38
|
-
&::before {
|
39
|
-
top: 0;
|
40
|
-
transform: rotate(90deg);
|
41
|
-
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
42
|
-
transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
|
43
|
-
}
|
44
|
-
}
|
45
|
-
}
|
46
|
-
}
|
47
|
-
}
|
@@ -1,47 +0,0 @@
|
|
1
|
-
@if index($hamburger-types, collapse) {
|
2
|
-
/*
|
3
|
-
* Collapse
|
4
|
-
*/
|
5
|
-
.hamburger--collapse {
|
6
|
-
.hamburger-inner {
|
7
|
-
top: auto;
|
8
|
-
bottom: 0;
|
9
|
-
transition-duration: 0.13s;
|
10
|
-
transition-delay: 0.13s;
|
11
|
-
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
12
|
-
|
13
|
-
&::after {
|
14
|
-
top: ($hamburger-layer-spacing * 2 + $hamburger-layer-height * 2) * -1;
|
15
|
-
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
16
|
-
opacity 0.1s linear;
|
17
|
-
}
|
18
|
-
|
19
|
-
&::before {
|
20
|
-
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
21
|
-
transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
22
|
-
}
|
23
|
-
}
|
24
|
-
|
25
|
-
&.is-active {
|
26
|
-
.hamburger-inner {
|
27
|
-
transform: translate3d(0, ($hamburger-layer-spacing + $hamburger-layer-height) * -1, 0) rotate(-45deg);
|
28
|
-
transition-delay: 0.22s;
|
29
|
-
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
30
|
-
|
31
|
-
&::after {
|
32
|
-
top: 0;
|
33
|
-
opacity: 0;
|
34
|
-
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
35
|
-
opacity 0.1s 0.22s linear;
|
36
|
-
}
|
37
|
-
|
38
|
-
&::before {
|
39
|
-
top: 0;
|
40
|
-
transform: rotate(-90deg);
|
41
|
-
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
42
|
-
transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
|
43
|
-
}
|
44
|
-
}
|
45
|
-
}
|
46
|
-
}
|
47
|
-
}
|
@@ -1,41 +0,0 @@
|
|
1
|
-
@if index($hamburger-types, elastic-r) {
|
2
|
-
/*
|
3
|
-
* Elastic Reverse
|
4
|
-
*/
|
5
|
-
.hamburger--elastic-r {
|
6
|
-
.hamburger-inner {
|
7
|
-
top: $hamburger-layer-height / 2;
|
8
|
-
transition-duration: 0.275s;
|
9
|
-
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
10
|
-
|
11
|
-
&::before {
|
12
|
-
top: $hamburger-layer-height + $hamburger-layer-spacing;
|
13
|
-
transition: opacity 0.125s 0.275s ease;
|
14
|
-
}
|
15
|
-
|
16
|
-
&::after {
|
17
|
-
top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
|
18
|
-
transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
19
|
-
}
|
20
|
-
}
|
21
|
-
|
22
|
-
&.is-active {
|
23
|
-
.hamburger-inner {
|
24
|
-
$y-offset: $hamburger-layer-spacing + $hamburger-layer-height;
|
25
|
-
|
26
|
-
transform: translate3d(0, $y-offset, 0) rotate(-135deg);
|
27
|
-
transition-delay: 0.075s;
|
28
|
-
|
29
|
-
&::before {
|
30
|
-
transition-delay: 0s;
|
31
|
-
opacity: 0;
|
32
|
-
}
|
33
|
-
|
34
|
-
&::after {
|
35
|
-
transform: translate3d(0, $y-offset * -2, 0) rotate(270deg);
|
36
|
-
transition-delay: 0.075s;
|
37
|
-
}
|
38
|
-
}
|
39
|
-
}
|
40
|
-
}
|
41
|
-
}
|
@@ -1,41 +0,0 @@
|
|
1
|
-
@if index($hamburger-types, elastic) {
|
2
|
-
/*
|
3
|
-
* Elastic
|
4
|
-
*/
|
5
|
-
.hamburger--elastic {
|
6
|
-
.hamburger-inner {
|
7
|
-
top: $hamburger-layer-height / 2;
|
8
|
-
transition-duration: 0.275s;
|
9
|
-
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
10
|
-
|
11
|
-
&::before {
|
12
|
-
top: $hamburger-layer-height + $hamburger-layer-spacing;
|
13
|
-
transition: opacity 0.125s 0.275s ease;
|
14
|
-
}
|
15
|
-
|
16
|
-
&::after {
|
17
|
-
top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
|
18
|
-
transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
19
|
-
}
|
20
|
-
}
|
21
|
-
|
22
|
-
&.is-active {
|
23
|
-
.hamburger-inner {
|
24
|
-
$y-offset: $hamburger-layer-spacing + $hamburger-layer-height;
|
25
|
-
|
26
|
-
transform: translate3d(0, $y-offset, 0) rotate(135deg);
|
27
|
-
transition-delay: 0.075s;
|
28
|
-
|
29
|
-
&::before {
|
30
|
-
transition-delay: 0s;
|
31
|
-
opacity: 0;
|
32
|
-
}
|
33
|
-
|
34
|
-
&::after {
|
35
|
-
transform: translate3d(0, $y-offset * -2, 0) rotate(-270deg);
|
36
|
-
transition-delay: 0.075s;
|
37
|
-
}
|
38
|
-
}
|
39
|
-
}
|
40
|
-
}
|
41
|
-
}
|
@@ -1,53 +0,0 @@
|
|
1
|
-
@if index($hamburger-types, emphatic-r) {
|
2
|
-
/*
|
3
|
-
* Emphatic Reverse
|
4
|
-
*/
|
5
|
-
.hamburger--emphatic-r {
|
6
|
-
overflow: hidden;
|
7
|
-
|
8
|
-
.hamburger-inner {
|
9
|
-
transition: background-color 0.125s 0.175s ease-in;
|
10
|
-
|
11
|
-
&::before {
|
12
|
-
left: 0;
|
13
|
-
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335),
|
14
|
-
top 0.05s 0.125s linear,
|
15
|
-
left 0.125s 0.175s ease-in;
|
16
|
-
}
|
17
|
-
|
18
|
-
&::after {
|
19
|
-
top: ($hamburger-layer-height) + ($hamburger-layer-spacing);
|
20
|
-
right: 0;
|
21
|
-
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335),
|
22
|
-
top 0.05s 0.125s linear,
|
23
|
-
right 0.125s 0.175s ease-in;
|
24
|
-
}
|
25
|
-
}
|
26
|
-
|
27
|
-
&.is-active {
|
28
|
-
.hamburger-inner {
|
29
|
-
transition-delay: 0s;
|
30
|
-
transition-timing-function: ease-out;
|
31
|
-
background-color: transparent !important;
|
32
|
-
|
33
|
-
&::before {
|
34
|
-
left: $hamburger-layer-width * -2;
|
35
|
-
top: $hamburger-layer-width * 2;
|
36
|
-
transform: translate3d($hamburger-layer-width * 2, $hamburger-layer-width * -2, 0) rotate(-45deg);
|
37
|
-
transition: left 0.125s ease-out,
|
38
|
-
top 0.05s 0.125s linear,
|
39
|
-
transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
|
40
|
-
}
|
41
|
-
|
42
|
-
&::after {
|
43
|
-
right: $hamburger-layer-width * -2;
|
44
|
-
top: $hamburger-layer-width * 2;
|
45
|
-
transform: translate3d($hamburger-layer-width * -2, $hamburger-layer-width * -2, 0) rotate(45deg);
|
46
|
-
transition: right 0.125s ease-out,
|
47
|
-
top 0.05s 0.125s linear,
|
48
|
-
transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
|
49
|
-
}
|
50
|
-
}
|
51
|
-
}
|
52
|
-
}
|
53
|
-
}
|
@@ -1,53 +0,0 @@
|
|
1
|
-
@if index($hamburger-types, emphatic) {
|
2
|
-
/*
|
3
|
-
* Emphatic
|
4
|
-
*/
|
5
|
-
.hamburger--emphatic {
|
6
|
-
overflow: hidden;
|
7
|
-
|
8
|
-
.hamburger-inner {
|
9
|
-
transition: background-color 0.125s 0.175s ease-in;
|
10
|
-
|
11
|
-
&::before {
|
12
|
-
left: 0;
|
13
|
-
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335),
|
14
|
-
top 0.05s 0.125s linear,
|
15
|
-
left 0.125s 0.175s ease-in;
|
16
|
-
}
|
17
|
-
|
18
|
-
&::after {
|
19
|
-
top: ($hamburger-layer-height) + ($hamburger-layer-spacing);
|
20
|
-
right: 0;
|
21
|
-
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335),
|
22
|
-
top 0.05s 0.125s linear,
|
23
|
-
right 0.125s 0.175s ease-in;
|
24
|
-
}
|
25
|
-
}
|
26
|
-
|
27
|
-
&.is-active {
|
28
|
-
.hamburger-inner {
|
29
|
-
transition-delay: 0s;
|
30
|
-
transition-timing-function: ease-out;
|
31
|
-
background-color: transparent !important;
|
32
|
-
|
33
|
-
&::before {
|
34
|
-
left: $hamburger-layer-width * -2;
|
35
|
-
top: $hamburger-layer-width * -2;
|
36
|
-
transform: translate3d($hamburger-layer-width * 2, $hamburger-layer-width * 2, 0) rotate(45deg);
|
37
|
-
transition: left 0.125s ease-out,
|
38
|
-
top 0.05s 0.125s linear,
|
39
|
-
transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
|
40
|
-
}
|
41
|
-
|
42
|
-
&::after {
|
43
|
-
right: $hamburger-layer-width * -2;
|
44
|
-
top: $hamburger-layer-width * -2;
|
45
|
-
transform: translate3d($hamburger-layer-width * -2, $hamburger-layer-width * 2, 0) rotate(-45deg);
|
46
|
-
transition: right 0.125s ease-out,
|
47
|
-
top 0.05s 0.125s linear,
|
48
|
-
transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
|
49
|
-
}
|
50
|
-
}
|
51
|
-
}
|
52
|
-
}
|
53
|
-
}
|