timequake 1.0.8 → 2.0.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- 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 +143 -0
- data/app/assets/stylesheets/timequake/flex.scss +128 -0
- data/app/assets/stylesheets/timequake/forms.scss +18 -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 +17 -1
- data/app/assets/stylesheets/timequake/visibility.scss +39 -0
- data/lib/generators/timequake/templates/timequake_overrides.scss +77 -0
- data/lib/timequake/version.rb +1 -1
- data/timequake-2.0.1.gem +0 -0
- metadata +43 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 0b92cb66523dd4ab7bfadcb33fb97e67e372d286f481823987c8c281c8f05c54
|
4
|
+
data.tar.gz: 1ee63a1c634f52a0bf641e44ba0736dfb49e47763e96735cf1234ab3840405e2
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 10ee1d30db753803783fbfc9550d294ec786edb2c2fef45439d032e50b5c288cd0fe150d58c288ee1109d330e270b1142024d73567d1aa85d9744d85b398cea4
|
7
|
+
data.tar.gz: b3b0821410c61121428086f08da0551abbbc7f6c94cad0410fdf6d3c7930c2b8e2f073e6a8d2bc61f5a244e997e8cda8f8acbce9a02e7c1bf8c527ab9c5dd9d8
|
@@ -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
|
+
}
|
@@ -0,0 +1,18 @@
|
|
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
|
+
}
|
@@ -0,0 +1,30 @@
|
|
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
|
+
}
|
@@ -0,0 +1,47 @@
|
|
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
|
+
}
|