| 13542 |
anikendra |
1 |
|
|
|
2 |
// iOS View Transitions
|
|
|
3 |
// -------------------------------
|
|
|
4 |
|
|
|
5 |
$ios-transition-duration: 450ms !default;
|
|
|
6 |
$ios-transition-timing-function: cubic-bezier(.3, .9, .4, 1) !default;
|
|
|
7 |
$ios-transition-container-bg-color: #000 !default;
|
|
|
8 |
|
|
|
9 |
|
|
|
10 |
[nav-view-transition="ios"] {
|
|
|
11 |
|
|
|
12 |
[nav-view="entering"],
|
|
|
13 |
[nav-view="leaving"] {
|
|
|
14 |
@include transition-duration( $ios-transition-duration );
|
|
|
15 |
@include transition-timing-function( $ios-transition-timing-function );
|
|
|
16 |
-webkit-transition-property: opacity, -webkit-transform;
|
|
|
17 |
transition-property: opacity, transform;
|
|
|
18 |
}
|
|
|
19 |
|
|
|
20 |
&[nav-view-direction="forward"],
|
|
|
21 |
&[nav-view-direction="back"] {
|
|
|
22 |
background-color: $ios-transition-container-bg-color;
|
|
|
23 |
}
|
|
|
24 |
|
|
|
25 |
[nav-view="active"],
|
|
|
26 |
&[nav-view-direction="forward"] [nav-view="entering"],
|
|
|
27 |
&[nav-view-direction="back"] [nav-view="leaving"] {
|
|
|
28 |
z-index: $z-index-view-above;
|
|
|
29 |
}
|
|
|
30 |
|
|
|
31 |
&[nav-view-direction="back"] [nav-view="entering"],
|
|
|
32 |
&[nav-view-direction="forward"] [nav-view="leaving"] {
|
|
|
33 |
z-index: $z-index-view-below;
|
|
|
34 |
}
|
|
|
35 |
|
|
|
36 |
}
|
|
|
37 |
|
|
|
38 |
|
|
|
39 |
|
|
|
40 |
// iOS Nav Bar Transitions
|
|
|
41 |
// -------------------------------
|
|
|
42 |
|
|
|
43 |
[nav-bar-transition="ios"] {
|
|
|
44 |
|
|
|
45 |
.title,
|
|
|
46 |
.buttons,
|
|
|
47 |
.back-text {
|
|
|
48 |
@include transition-duration( $ios-transition-duration );
|
|
|
49 |
@include transition-timing-function( $ios-transition-timing-function );
|
|
|
50 |
-webkit-transition-property: opacity, -webkit-transform;
|
|
|
51 |
transition-property: opacity, transform;
|
|
|
52 |
}
|
|
|
53 |
|
|
|
54 |
[nav-bar="active"],
|
|
|
55 |
[nav-bar="entering"] {
|
|
|
56 |
z-index: $z-index-bar-above;
|
|
|
57 |
|
|
|
58 |
.bar {
|
|
|
59 |
background: transparent;
|
|
|
60 |
}
|
|
|
61 |
}
|
|
|
62 |
|
|
|
63 |
[nav-bar="cached"] {
|
|
|
64 |
display: block;
|
|
|
65 |
|
|
|
66 |
.header-item {
|
|
|
67 |
display: none;
|
|
|
68 |
}
|
|
|
69 |
}
|
|
|
70 |
|
|
|
71 |
}
|
|
|
72 |
|
|
|
73 |
|
|
|
74 |
|
|
|
75 |
// Android View Transitions
|
|
|
76 |
// -------------------------------
|
|
|
77 |
|
|
|
78 |
$android-transition-duration: 200ms !default;
|
|
|
79 |
$android-transition-timing-function: cubic-bezier(0.4, 0.6, 0.2, 1) !default;
|
|
|
80 |
|
|
|
81 |
|
|
|
82 |
[nav-view-transition="android"] {
|
|
|
83 |
|
|
|
84 |
[nav-view="entering"],
|
|
|
85 |
[nav-view="leaving"] {
|
|
|
86 |
@include transition-duration( $android-transition-duration );
|
|
|
87 |
@include transition-timing-function( $android-transition-timing-function );
|
|
|
88 |
-webkit-transition-property: -webkit-transform;
|
|
|
89 |
transition-property: transform;
|
|
|
90 |
}
|
|
|
91 |
|
|
|
92 |
[nav-view="active"],
|
|
|
93 |
&[nav-view-direction="forward"] [nav-view="entering"],
|
|
|
94 |
&[nav-view-direction="back"] [nav-view="leaving"] {
|
|
|
95 |
z-index: $z-index-view-above;
|
|
|
96 |
}
|
|
|
97 |
|
|
|
98 |
&[nav-view-direction="back"] [nav-view="entering"],
|
|
|
99 |
&[nav-view-direction="forward"] [nav-view="leaving"] {
|
|
|
100 |
z-index: $z-index-view-below;
|
|
|
101 |
}
|
|
|
102 |
|
|
|
103 |
}
|
|
|
104 |
|
|
|
105 |
|
|
|
106 |
|
|
|
107 |
// Android Nav Bar Transitions
|
|
|
108 |
// -------------------------------
|
|
|
109 |
|
|
|
110 |
[nav-bar-transition="android"] {
|
|
|
111 |
|
|
|
112 |
.title,
|
|
|
113 |
.buttons {
|
|
|
114 |
@include transition-duration( $android-transition-duration );
|
|
|
115 |
@include transition-timing-function( $android-transition-timing-function );
|
|
|
116 |
-webkit-transition-property: opacity;
|
|
|
117 |
transition-property: opacity;
|
|
|
118 |
}
|
|
|
119 |
|
|
|
120 |
[nav-bar="active"],
|
|
|
121 |
[nav-bar="entering"] {
|
|
|
122 |
z-index: $z-index-bar-above;
|
|
|
123 |
|
|
|
124 |
.bar {
|
|
|
125 |
background: transparent;
|
|
|
126 |
}
|
|
|
127 |
}
|
|
|
128 |
|
|
|
129 |
[nav-bar="cached"] {
|
|
|
130 |
display: block;
|
|
|
131 |
|
|
|
132 |
.header-item {
|
|
|
133 |
display: none;
|
|
|
134 |
}
|
|
|
135 |
}
|
|
|
136 |
|
|
|
137 |
}
|
|
|
138 |
|
|
|
139 |
|
|
|
140 |
|
|
|
141 |
// Transition Settings
|
|
|
142 |
// -------------------------------
|
|
|
143 |
|
|
|
144 |
[nav-view="cached"],
|
|
|
145 |
[nav-bar="cached"] {
|
|
|
146 |
display: none;
|
|
|
147 |
}
|
|
|
148 |
|
|
|
149 |
[nav-view="stage"] {
|
|
|
150 |
opacity: 0;
|
|
|
151 |
@include transition-duration( 0 );
|
|
|
152 |
}
|
|
|
153 |
|
|
|
154 |
[nav-bar="stage"] {
|
|
|
155 |
.title,
|
|
|
156 |
.buttons,
|
|
|
157 |
.back-text {
|
|
|
158 |
position: absolute;
|
|
|
159 |
opacity: 0;
|
|
|
160 |
@include transition-duration(0s);
|
|
|
161 |
}
|
|
|
162 |
}
|
|
|
163 |
|