-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyles.css
executable file
·108 lines (59 loc) · 4.41 KB
/
styles.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
/*!
*
* Hundo Framework Demo
* http://goHundo.com/
*
* Created by Owen Biddle
* Copywrite iO Ganics inc
*
* Fork it! https://github.com/obiddle/Framework
*
*/
/* --------------------------------- page set up css ------------------------------------ */
body {font-family:arial; -webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-touch-callout: none;-webkit-user-select: none;margin:0;padding:0; background-color:#fff;width: 100%}
#buttonCover {position:absolute;top:0px; left:0px; height:100%; width:100%;z-index:98;}
#buttonCover.tappable-active{ background-color:rgba(0,0,0,0.3);}
#framework {position: absolute; top: 0;left: 0;z-index: 1;width:100%;height:100%;overflow: hidden;}
.toolbar {position:absolute;z-index:13;width:100%;height:50px;top:0;left:0; text-align: center;background-color:#333;-webkit-box-shadow: 0 1px 1px 1px rgba(0,0,0,0.4);line-height:50px;font-size:20px;color:#fff;}
/* --------------------------------- START ------------------------------------ */
/* don't hate on same style properties for different id or classes. We prefer a bigger file that takes less time to render than a small file going up and down the dom tree looking for css properties */
/* --------------------------------- TOOLBARS ------------------------------------ */
#pageTwoBar {position:absolute;z-index:13;width:100%;height:50px;top:0;left:0; text-align: center;line-height:50px;font-size:20px;color:#fff;}
#pageThreeBar {position:absolute;z-index:13;width:100%;height:50px;top:0;left:0; text-align: center;line-height:50px;font-size:20px;color:#fff;}
/* --------------------------------- HOME PAGE ------------------------------------ */
#pageOne{position:absolute;z-index:20; width:100%;height:100%;visibility:visible;-webkit-transform: translate3d(0,0,0);}
.buttonOne {position:absolute;margin-top: 50px;width:100%;height:200px;color:#000;text-align: center;line-height: 200px;background-color: #ccc;cursor: pointer;}
/* --------------------------------- ANOTHER PAGE ------------------------------------ */
#pageTwo{position:absolute;z-index:99; width:100%;height:100%;visibility:visible;-webkit-transform: translate3d(100%,0,0);}
/* --------------------------------- NEW PAGE ------------------------------------ */
#pageThree{position:absolute;z-index:99; width:100%;height:100%;visibility:visible;-webkit-transform: translate3d(100%,0,0);}
/* --------------------------------- backButton for all pages ------------------------------------ */
.back {position:absolute;z-index:99; top: 10px;left:10px; color: #fff;background-color:#000;height: 30px;width: 100px;border-radius: 5px;color: #fff;line-height: 30px;text-align: center;font-size: 16px;}
/* --------------------------------- reset Back button ------------------------------------ */
.clear {position:absolute;z-index:99; top: 10px;right:10px; color: #fff;background-color:#000;height: 30px;width: 100px;border-radius: 5px;color: #fff;line-height: 30px;text-align: center;}
/* --------------------------------- class that are added to run the animation ------------------------------------ */
/* animations will not work twice in a row for the same id, we could change to use transitions with visibiliy hidden / visible */
.outLeft {-webkit-animation: outLeft 0.3s ease-out forwards;} /* browser do not like linear */
.inLeft {-webkit-animation: inLeft 0.3s ease-out forwards;}
.inRight {-webkit-animation: inRight 0.3s ease-out forwards;}
.outRight {-webkit-animation: outRight 0.3s ease-out forwards;}
/* --------------------------------- Toolbar Transitions ------------------------------------ */
.opacity {opacity: 1; visibility: visible;-webkit-transition:visibility 0s linear 0s,opacity 0.3s ease-in;}
.noOpacity {opacity: 0;visibility: hidden;-webkit-transition:visibility 0s linear 0.5s,opacity 0.3s ease-in;}
/* --------------------------------- Page Animations ------------------------------------ */
@-webkit-keyframes outLeft {
from{-webkit-transform: translate3d(0,0,0);}
to{-webkit-transform: translate3d(-100%,0,0);}
}
@-webkit-keyframes inLeft {
from{-webkit-transform: translate3d(-100%,0,0);}
to{-webkit-transform: translate3d(0,0,0);}
}
@-webkit-keyframes outRight {
from{-webkit-transform: translate3d(0,0,0);}
to{-webkit-transform: translate3d(100%,0,0);}
}
@-webkit-keyframes inRight{
from{-webkit-transform: translate3d(100%,0,0);}
to{-webkit-transform: translate3d(0,0,0);}
}