source: main/trunk/model-interfaces-dev/heritage-nz/iframe/heritage-nz-dl_files/ng-trans.css@ 32796

Last change on this file since 32796 was 32796, checked in by davidb, 5 years ago

Initial set of files to provide look and feel of Heritage NZ site, plus SVN clickable map in an iframe

  • Property svn:executable set to *
File size: 12.2 KB
Line 
1/* transition property & duration */
2.ng-trans {
3 -webkit-transition: 240ms all;
4 transition: 240ms all;
5}
6.ng-trans.ng-hide-add,
7.ng-trans.ng-hide-remove {
8 display: inherit !important;
9}
10/* transition types */
11.ng-trans-fade.ng-enter, .ng-trans-fade.ng-leave.ng-leave-active, .ng-trans-fade.ng-hide-remove, .ng-trans-fade.ng-hide-add.ng-hide-add-active {
12 opacity: 0;
13}
14.ng-trans-fade.ng-leave, .ng-trans-fade.ng-enter.ng-enter-active, .ng-trans-fade.ng-hide-remove.ng-hide-remove-active, .ng-trans-fade.ng-hide-add {
15 opacity: 1;
16}
17.ng-trans-fade-left.ng-enter, .ng-trans-fade-left.ng-leave.ng-leave-active, .ng-trans-fade-left.ng-hide-remove, .ng-trans-fade-left.ng-hide-add.ng-hide-add-active {
18 opacity: 0;
19 -webkit-transform: translate(-40px, 0);
20 -ms-transform: translate(-40px, 0);
21 transform: translate(-40px, 0);
22}
23.ng-trans-fade-left.ng-leave, .ng-trans-fade-left.ng-enter.ng-enter-active, .ng-trans-fade-left.ng-hide-remove.ng-hide-remove-active, .ng-trans-fade-left.ng-hide-add {
24 opacity: 1;
25 -webkit-transform: translate(0, 0);
26 -ms-transform: translate(0, 0);
27 transform: translate(0, 0);
28}
29.ng-trans-fade-up.ng-enter, .ng-trans-fade-up.ng-leave.ng-leave-active, .ng-trans-fade-up.ng-hide-remove, .ng-trans-fade-up.ng-hide-add.ng-hide-add-active {
30 opacity: 0;
31 -webkit-transform: translate(0, -40px);
32 -ms-transform: translate(0, -40px);
33 transform: translate(0, -40px);
34}
35.ng-trans-fade-up.ng-leave, .ng-trans-fade-up.ng-enter.ng-enter-active, .ng-trans-fade-up.ng-hide-remove.ng-hide-remove-active, .ng-trans-fade-up.ng-hide-add {
36 opacity: 1;
37 -webkit-transform: translate(0, 0);
38 -ms-transform: translate(0, 0);
39 transform: translate(0, 0);
40}
41.ng-trans-fade-right.ng-enter, .ng-trans-fade-right.ng-leave.ng-leave-active, .ng-trans-fade-right.ng-hide-remove, .ng-trans-fade-right.ng-hide-add.ng-hide-add-active {
42 opacity: 0;
43 -webkit-transform: translate(40px, 0);
44 -ms-transform: translate(40px, 0);
45 transform: translate(40px, 0);
46}
47.ng-trans-fade-right.ng-leave, .ng-trans-fade-right.ng-enter.ng-enter-active, .ng-trans-fade-right.ng-hide-remove.ng-hide-remove-active, .ng-trans-fade-right.ng-hide-add {
48 opacity: 1;
49 -webkit-transform: translate(0, 0);
50 -ms-transform: translate(0, 0);
51 transform: translate(0, 0);
52}
53.ng-trans-fade-down.ng-enter, .ng-trans-fade-down.ng-leave.ng-leave-active, .ng-trans-fade-down.ng-hide-remove, .ng-trans-fade-down.ng-hide-add.ng-hide-add-active {
54 opacity: 0;
55 -webkit-transform: translate(0, 40px);
56 -ms-transform: translate(0, 40px);
57 transform: translate(0, 40px);
58}
59.ng-trans-fade-down.ng-leave, .ng-trans-fade-down.ng-enter.ng-enter-active, .ng-trans-fade-down.ng-hide-remove.ng-hide-remove-active, .ng-trans-fade-down.ng-hide-add {
60 opacity: 1;
61 -webkit-transform: translate(0, 0);
62 -ms-transform: translate(0, 0);
63 transform: translate(0, 0);
64}
65.ng-trans-slide-left.ng-enter, .ng-trans-slide-left.ng-leave.ng-leave-active, .ng-trans-slide-left.ng-hide-remove, .ng-trans-slide-left.ng-hide-add.ng-hide-add-active {
66 opacity: 0;
67 -webkit-transform: translate(-100%, 0);
68 -ms-transform: translate(-100%, 0);
69 transform: translate(-100%, 0);
70}
71.ng-trans-slide-left.ng-leave, .ng-trans-slide-left.ng-enter.ng-enter-active, .ng-trans-slide-left.ng-hide-remove.ng-hide-remove-active, .ng-trans-slide-left.ng-hide-add {
72 opacity: 1;
73 -webkit-transform: translate(0, 0);
74 -ms-transform: translate(0, 0);
75 transform: translate(0, 0);
76}
77.ng-trans-slide-up.ng-enter, .ng-trans-slide-up.ng-leave.ng-leave-active, .ng-trans-slide-up.ng-hide-remove, .ng-trans-slide-up.ng-hide-add.ng-hide-add-active {
78 opacity: 0;
79 -webkit-transform: translate(0, -800px);
80 -ms-transform: translate(0, -800px);
81 transform: translate(0, -800px);
82}
83.ng-trans-slide-up.ng-leave, .ng-trans-slide-up.ng-enter.ng-enter-active, .ng-trans-slide-up.ng-hide-remove.ng-hide-remove-active, .ng-trans-slide-up.ng-hide-add {
84 opacity: 1;
85 -webkit-transform: translate(0, 0);
86 -ms-transform: translate(0, 0);
87 transform: translate(0, 0);
88}
89.ng-trans-slide-right.ng-enter, .ng-trans-slide-right.ng-leave.ng-leave-active, .ng-trans-slide-right.ng-hide-remove, .ng-trans-slide-right.ng-hide-add.ng-hide-add-active {
90 opacity: 0;
91 -webkit-transform: translate(100%, 0);
92 -ms-transform: translate(100%, 0);
93 transform: translate(100%, 0);
94}
95.ng-trans-slide-right.ng-leave, .ng-trans-slide-right.ng-enter.ng-enter-active, .ng-trans-slide-right.ng-hide-remove.ng-hide-remove-active, .ng-trans-slide-right.ng-hide-add {
96 opacity: 1;
97 -webkit-transform: translate(0, 0);
98 -ms-transform: translate(0, 0);
99 transform: translate(0, 0);
100}
101.ng-trans-slide-down.ng-enter, .ng-trans-slide-down.ng-leave.ng-leave-active, .ng-trans-slide-down.ng-hide-remove, .ng-trans-slide-down.ng-hide-add.ng-hide-add-active {
102 opacity: 0;
103 -webkit-transform: translate(0, 800px);
104 -ms-transform: translate(0, 800px);
105 transform: translate(0, 800px);
106}
107.ng-trans-slide-down.ng-leave, .ng-trans-slide-down.ng-enter.ng-enter-active, .ng-trans-slide-down.ng-hide-remove.ng-hide-remove-active, .ng-trans-slide-down.ng-hide-add {
108 opacity: 1;
109 -webkit-transform: translate(0, 0);
110 -ms-transform: translate(0, 0);
111 transform: translate(0, 0);
112}
113.ng-trans-scale-up.ng-enter, .ng-trans-scale-up.ng-leave.ng-leave-active, .ng-trans-scale-up.ng-hide-remove, .ng-trans-scale-up.ng-hide-add.ng-hide-add-active {
114 opacity: 0;
115 -webkit-transform: scale(0.64);
116 -ms-transform: scale(0.64);
117 transform: scale(0.64);
118}
119.ng-trans-scale-up.ng-leave, .ng-trans-scale-up.ng-enter.ng-enter-active, .ng-trans-scale-up.ng-hide-remove.ng-hide-remove-active, .ng-trans-scale-up.ng-hide-add {
120 opacity: 1;
121 -webkit-transform: scale(1);
122 -ms-transform: scale(1);
123 transform: scale(1);
124}
125.ng-trans-scale-down.ng-enter, .ng-trans-scale-down.ng-leave.ng-leave-active, .ng-trans-scale-down.ng-hide-remove, .ng-trans-scale-down.ng-hide-add.ng-hide-add-active {
126 opacity: 0;
127 -webkit-transform: scale(1.68);
128 -ms-transform: scale(1.68);
129 transform: scale(1.68);
130}
131.ng-trans-scale-down.ng-leave, .ng-trans-scale-down.ng-enter.ng-enter-active, .ng-trans-scale-down.ng-hide-remove.ng-hide-remove-active, .ng-trans-scale-down.ng-hide-add {
132 opacity: 1;
133 -webkit-transform: scale(1);
134 -ms-transform: scale(1);
135 transform: scale(1);
136}
137.ng-trans-flip-x.ng-enter, .ng-trans-flip-x.ng-leave.ng-leave-active, .ng-trans-flip-x.ng-hide-remove, .ng-trans-flip-x.ng-hide-add.ng-hide-add-active {
138 opacity: 0;
139 -webkit-transform: perspective(400px) rotateX(90deg);
140 -ms-transform: perspective(400px) rotateX(90deg);
141 transform: perspective(400px) rotateX(90deg);
142}
143.ng-trans-flip-x.ng-leave, .ng-trans-flip-x.ng-enter.ng-enter-active, .ng-trans-flip-x.ng-hide-remove.ng-hide-remove-active, .ng-trans-flip-x.ng-hide-add {
144 opacity: 1;
145 -webkit-transform: perspective(400px) rotateX(0deg);
146 -ms-transform: perspective(400px) rotateX(0deg);
147 transform: perspective(400px) rotateX(0deg);
148}
149.ng-trans-flip-y.ng-enter, .ng-trans-flip-y.ng-leave.ng-leave-active, .ng-trans-flip-y.ng-hide-remove, .ng-trans-flip-y.ng-hide-add.ng-hide-add-active {
150 opacity: 0;
151 -webkit-transform: perspective(200px) rotateY(90deg);
152 -ms-transform: perspective(200px) rotateY(90deg);
153 transform: perspective(200px) rotateY(90deg);
154}
155.ng-trans-flip-y.ng-leave, .ng-trans-flip-y.ng-enter.ng-enter-active, .ng-trans-flip-y.ng-hide-remove.ng-hide-remove-active, .ng-trans-flip-y.ng-hide-add {
156 opacity: 1;
157 -webkit-transform: perspective(200px) rotateY(0deg);
158 -ms-transform: perspective(200px) rotateY(0deg);
159 transform: perspective(200px) rotateY(0deg);
160}
161.ng-trans-rotate.ng-enter, .ng-trans-rotate.ng-leave.ng-leave-active, .ng-trans-rotate.ng-hide-remove, .ng-trans-rotate.ng-hide-add.ng-hide-add-active {
162 opacity: 0;
163 -webkit-transform: rotate(-180deg);
164 -ms-transform: rotate(-180deg);
165 transform: rotate(-180deg);
166}
167.ng-trans-rotate.ng-leave, .ng-trans-rotate.ng-enter.ng-enter-active, .ng-trans-rotate.ng-hide-remove.ng-hide-remove-active, .ng-trans-rotate.ng-hide-add {
168 opacity: 1;
169 -webkit-transform: rotate(0);
170 -ms-transform: rotate(0);
171 transform: rotate(0);
172}
173/* transition timing functions */
174.easeInCubic.ng-trans {
175 -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
176 transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
177}
178.easeOutCubic.ng-trans {
179 -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
180 transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
181}
182.easeInOutCubic.ng-trans {
183 -webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
184 transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
185}
186.easeInQuad.ng-trans {
187 -webkit-transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
188 transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
189}
190.easeOutQuad.ng-trans {
191 -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
192 transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
193}
194.easeInOutQuad.ng-trans {
195 -webkit-transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
196 transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
197}
198.easeInQuart.ng-trans {
199 -webkit-transition-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
200 transition-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
201}
202.easeOutQuart.ng-trans {
203 -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
204 transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
205}
206.easeInOutQuart.ng-trans {
207 -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
208 transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
209}
210.easeInQuint.ng-trans {
211 -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
212 transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
213}
214.easeOutQuint.ng-trans {
215 -webkit-transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
216 transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
217}
218.easeInOutQuint.ng-trans {
219 -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
220 transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
221}
222.easeInSine.ng-trans {
223 -webkit-transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
224 transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
225}
226.easeOutSine.ng-trans {
227 -webkit-transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
228 transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
229}
230.easeInOutSine.ng-trans {
231 -webkit-transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
232 transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
233}
234.easeInExpo.ng-trans {
235 -webkit-transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
236 transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
237}
238.easeOutExpo.ng-trans {
239 -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
240 transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
241}
242.easeInOutExpo.ng-trans {
243 -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
244 transition-timing-function: cubic-bezier(1, 0, 0, 1);
245}
246.easeInCirc.ng-trans {
247 -webkit-transition-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
248 transition-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
249}
250.easeOutCirc.ng-trans {
251 -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
252 transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
253}
254.easeInOutCirc.ng-trans {
255 -webkit-transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
256 transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
257}
258.easeInBack.ng-trans {
259 -webkit-transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
260 transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
261}
262.easeOutBack.ng-trans {
263 -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
264 transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
265}
266.easeInOutBack.ng-trans {
267 -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
268 transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
269}
Note: See TracBrowser for help on using the repository browser.