Diffstat (limited to 'frontend/delta/less/web/behavior.less') (more/less context) (ignore whitespace changes)
-rw-r--r-- | frontend/delta/less/web/behavior.less | 111 |
1 files changed, 111 insertions, 0 deletions
diff --git a/frontend/delta/less/web/behavior.less b/frontend/delta/less/web/behavior.less new file mode 100644 index 0000000..f9d0a3c --- a/dev/null +++ b/frontend/delta/less/web/behavior.less | |||
@@ -0,0 +1,111 @@ | |||
1 | //https://github.com/h5bp/Effeckt.css | ||
2 | |||
3 | |||
4 | .slide () { | ||
5 | -webkit-transform: translate3d(0, 0, 0); | ||
6 | transform: translate3d(0, 0, 0); | ||
7 | |||
8 | &.left { | ||
9 | -webkit-transform: translate3d(-100%, 0, 0); | ||
10 | transform: translate3d(-100%, 0, 0); | ||
11 | } | ||
12 | |||
13 | &.center { | ||
14 | -webkit-transform: translate3d(0, 0, 0); | ||
15 | transform: translate3d(0, 0, 0); | ||
16 | } | ||
17 | |||
18 | &.right { | ||
19 | -webkit-transform: translate3d(100%, 0, 0); | ||
20 | transform: translate3d(100%, 0, 0); | ||
21 | visibility: hidden; | ||
22 | display: none; | ||
23 | |||
24 | &.transition { | ||
25 | visibility: visible; | ||
26 | display: block; | ||
27 | } | ||
28 | } | ||
29 | |||
30 | &.transition { | ||
31 | -webkit-transition-duration: .25s; | ||
32 | transition-duration: .25s; | ||
33 | } | ||
34 | } | ||
35 | |||
36 | //http://coenraets.org/blog/2013/03/hardware-accelerated-page-transitions-for-mobile-web-apps-phonegap-apps/ | ||
37 | .page { | ||
38 | position: absolute; | ||
39 | |||
40 | top: 0; | ||
41 | left: 0; | ||
42 | width: 100%; | ||
43 | height: 100%; | ||
44 | |||
45 | .slide(); | ||
46 | } | ||
47 | |||
48 | /* | ||
49 | .registrationForm { | ||
50 | .steps { | ||
51 | .step { | ||
52 | position: absolute; | ||
53 | |||
54 | // top: 0; | ||
55 | // left: 0; | ||
56 | // width: 100%; | ||
57 | // height: 100%; | ||
58 | |||
59 | .slide(); | ||
60 | } | ||
61 | } | ||
62 | } | ||
63 | */ | ||
64 | |||
65 | //---------------------------------------------------------------------- | ||
66 | //tentative 3D transformations | ||
67 | /* | ||
68 | .page { | ||
69 | transform: rotateY( 0deg) translateZ( 100px); | ||
70 | |||
71 | &.left { | ||
72 | transform: rotateY( -90deg) translateZ( 100px); | ||
73 | } | ||
74 | |||
75 | &.center { | ||
76 | transform: rotateY( 0deg) translateZ( 100px); | ||
77 | } | ||
78 | |||
79 | &.right { | ||
80 | transform: rotateY( 90deg) translateZ( 100px); | ||
81 | } | ||
82 | } | ||
83 | |||
84 | #mainDiv { | ||
85 | width: 100%; | ||
86 | height: 100%; | ||
87 | position: absolute; | ||
88 | transform-style: preserve-3d; | ||
89 | |||
90 | transition: transform 3s; | ||
91 | |||
92 | &.show-front { transform: translateZ( -100px ) rotateY( 0deg ); } | ||
93 | &.show-back { transform: translateZ( -100px ) rotateX( -180deg ); } | ||
94 | &.show-right { transform: translateZ( -100px ) rotateY( -90deg ); } | ||
95 | &.show-left { transform: translateZ( -100px ) rotateY( 90deg ); } | ||
96 | &.show-top { transform: translateZ( -100px ) rotateX( -90deg ); } | ||
97 | &.show-bottom { transform: translateZ( -100px ) rotateX( 90deg ); } | ||
98 | } | ||
99 | */ | ||
100 | //======================================================================= | ||
101 | |||
102 | |||
103 | //======================================================================= | ||
104 | |||
105 | |||
106 | |||
107 | |||
108 | |||
109 | |||
110 | |||
111 | //======================================================== | ||