/* Transitions originally inspired by those from jQtouch, nice work, folks */
.ui-mobile-viewport-transitioning,
.ui-mobile-viewport-transitioning.ui-page{
width:100%;
height:100%;
overflow:hidden;
}
.in{
-webkit-animation-timing-function:ease-out;
-webkit-animation-duration:350ms;
-moz-animation-timing-function:ease-out;
-moz-animation-duration:350ms;
}
.out{
-webkit-animation-timing-function:ease-in;
-webkit-animation-duration:225ms;
-moz-animation-timing-function:ease-in;
-moz-animation-duration:225;
}
@-webkit-keyframesfadein{
from{opacity:0;}
to{opacity:1;}
}
@-moz-keyframesfadein{
from{opacity:0;}
to{opacity:1;}
}
@-webkit-keyframesfadeout{
from{opacity:1;}
to{opacity:0;}
}
@-moz-keyframesfadeout{
from{opacity:1;}
to{opacity:0;}
}
.fade.out{
opacity:0;
-webkit-animation-duration:125ms;
-webkit-animation-name:fadeout;
-moz-animation-duration:125ms;
-moz-animation-name:fadeout;
}
.fade.in{
opacity:1;
-webkit-animation-duration:225ms;
-webkit-animation-name:fadein;
-moz-animation-duration:225ms;
-moz-animation-name:fadein;
}
.pop{
-webkit-transform-origin:50%50%;
-moz-transform-origin:50%50%;
}
.pop.in{
-webkit-transform:scale(1);
-moz-transform:scale(1);
opacity:1;
-webkit-animation-name:popin;
-moz-animation-name:popin;
-webkit-animation-duration:350ms;
-moz-animation-duration:350ms;
}
.pop.out{
-webkit-animation-name:fadeout;
-moz-animation-name:fadeout;
opacity:0;
-webkit-animation-duration:100ms;
-moz-animation-duration:100ms;
}
.pop.in.reverse{
-webkit-animation-name:fadein;
-moz-animation-name:fadein;
}
.pop.out.reverse{
-webkit-transform:scale(.8);
-moz-transform:scale(.8);
-webkit-animation-name:popout;
-moz-animation-name:popout;
}
@-webkit-keyframespopin{
from{
-webkit-transform:scale(.8);
opacity:0;
}
to{
-webkit-transform:scale(1);
opacity:1;
}
}
@-moz-keyframespopin{
from{
-moz-transform:scale(.8);
opacity:0;
}
to{
-moz-transform:scale(1);
opacity:1;
}
}
@-webkit-keyframespopout{
from{
-webkit-transform:scale(1);
opacity:1;
}
to{
-webkit-transform:scale(.8);
opacity:0;
}
}
@-moz-keyframespopout{
from{
-moz-transform:scale(1);
opacity:1;
}
to{
-moz-transform:scale(.8);
opacity:0;
}
}
/* keyframes for slidein from sides */
@-webkit-keyframesslideinfromright{
from{-webkit-transform:translateX(100%);}
to{-webkit-transform:translateX(0);}
}
@-moz-keyframesslideinfromright{
from{-moz-transform:translateX(100%);}
to{-moz-transform:translateX(0);}
}
@-webkit-keyframesslideinfromleft{
from{-webkit-transform:translateX(-100%);}
to{-webkit-transform:translateX(0);}
}
@-moz-keyframesslideinfromleft{
from{-moz-transform:translateX(-100%);}
to{-moz-transform:translateX(0);}
}
/* keyframes for slideout to sides */
@-webkit-keyframesslideouttoleft{
from{-webkit-transform:translateX(0);}
to{-webkit-transform:translateX(-100%);}
}
@-moz-keyframesslideouttoleft{
from{-moz-transform:translateX(0);}
to{-moz-transform:translateX(-100%);}
}
@-webkit-keyframesslideouttoright{
from{-webkit-transform:translateX(0);}
to{-webkit-transform:translateX(100%);}
}
@-moz-keyframesslideouttoright{
from{-moz-transform:translateX(0);}
to{-moz-transform:translateX(100%);}
}
.slide.out,.slide.in{
-webkit-animation-timing-function:ease-out;
-webkit-animation-duration:350ms;
-moz-animation-timing-function:ease-out;
-moz-animation-duration:350ms;
}
.slide.out{
-webkit-transform:translateX(-100%);
-webkit-animation-name:slideouttoleft;
-moz-transform:translateX(-100%);
-moz-animation-name:slideouttoleft;
}
.slide.in{
-webkit-transform:translateX(0);
-webkit-animation-name:slideinfromright;
-moz-transform:translateX(0);
-moz-animation-name:slideinfromright;
}
.slide.out.reverse{
-webkit-transform:translateX(100%);
-webkit-animation-name:slideouttoright;
-moz-transform:translateX(100%);
-moz-animation-name:slideouttoright;
}
.slide.in.reverse{
-webkit-transform:translateX(0);
-webkit-animation-name:slideinfromleft;
-moz-transform:translateX(0);
-moz-animation-name:slideinfromleft;
}
.slidefade.out{
-webkit-transform:translateX(-100%);
-webkit-animation-name:slideouttoleft;
-moz-transform:translateX(-100%);
-moz-animation-name:slideouttoleft;
-webkit-animation-duration:225ms;
-moz-animation-duration:225ms;
}
.slidefade.in{
-webkit-transform:translateX(0);
-webkit-animation-name:fadein;
-moz-transform:translateX(0);
-moz-animation-name:fadein;
-webkit-animation-duration:200ms;
-moz-animation-duration:200ms;
}
.slidefade.out.reverse{
-webkit-transform:translateX(100%);
-webkit-animation-name:slideouttoright;
-moz-transform:translateX(100%);
-moz-animation-name:slideouttoright;
-webkit-animation-duration:200ms;
-moz-animation-duration:200ms;
}
.slidefade.in.reverse{
-webkit-transform:translateX(0);
-webkit-animation-name:fadein;
-moz-transform:translateX(0);
-moz-animation-name:fadein;
-webkit-animation-duration:200ms;
-moz-animation-duration:200ms;
}
/* slide down */
.slidedown.out{
-webkit-animation-name:fadeout;
-moz-animation-name:fadeout;
-webkit-animation-duration:100ms;
-moz-animation-duration:100ms;
}
.slidedown.in{
-webkit-transform:translateY(0);
-webkit-animation-name:slideinfromtop;
-moz-transform:translateY(0);
-moz-animation-name:slideinfromtop;
-webkit-animation-duration:250ms;
-moz-animation-duration:250ms;
}
.slidedown.in.reverse{
-webkit-animation-name:fadein;
-moz-animation-name:fadein;
-webkit-animation-duration:150ms;
-moz-animation-duration:150ms;
}
.slidedown.out.reverse{
-webkit-transform:translateY(-100%);
-moz-transform:translateY(-100%);
-webkit-animation-name:slideouttotop;
-moz-animation-name:slideouttotop;
-webkit-animation-duration:200ms;
-moz-animation-duration:200ms;
}
@-webkit-keyframesslideinfromtop{
from{-webkit-transform:translateY(-100%);}
to{-webkit-transform:translateY(0);}
}
@-moz-keyframesslideinfromtop{
from{-moz-transform:translateY(-100%);}
to{-moz-transform:translateY(0);}
}
@-webkit-keyframesslideouttotop{
from{-webkit-transform:translateY(0);}
to{-webkit-transform:translateY(-100%);}
}
@-moz-keyframesslideouttotop{
from{-moz-transform:translateY(0);}
to{-moz-transform:translateY(-100%);}
}
/* slide up */
.slideup.out{
-webkit-animation-name:fadeout;
-moz-animation-name:fadeout;
-webkit-animation-duration:100ms;
-moz-animation-duration:100ms;
}
.slideup.in{
-webkit-transform:translateY(0);
-webkit-animation-name:slideinfrombottom;
-moz-transform:translateY(0);
-moz-animation-name:slideinfrombottom;
-webkit-animation-duration:250ms;
-moz-animation-duration:250ms;
}
.slideup.in.reverse{
-webkit-animation-name:fadein;
-moz-animation-name:fadein;
-webkit-animation-duration:150ms;
-moz-animation-duration:150ms;
}
.slideup.out.reverse{
-webkit-transform:translateY(100%);
-moz-transform:translateY(100%);
-webkit-animation-name:slideouttobottom;
-moz-animation-name:slideouttobottom;
-webkit-animation-duration:200ms;
-moz-animation-duration:200ms;
}
@-webkit-keyframesslideinfrombottom{
from{-webkit-transform:translateY(100%);}
to{-webkit-transform:translateY(0);}
}
@-moz-keyframesslideinfrombottom{
from{-moz-transform:translateY(100%);}
to{-moz-transform:translateY(0);}
}
@-webkit-keyframesslideouttobottom{
from{-webkit-transform:translateY(0);}
to{-webkit-transform:translateY(100%);}
}
@-moz-keyframesslideouttobottom{
from{-moz-transform:translateY(0);}
to{-moz-transform:translateY(100%);}
}
/* The properties in this rule are only necessary for the 'flip' transition.
* We need specify the perspective to create a projection matrix. This will add
* some depth as the element flips. The depth number represents the distance of
* the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
* value.
*/
.viewport-flip{
-webkit-perspective:1000;
-moz-perspective:1000;
position:absolute;
}
.flip{
-webkit-backface-visibility:hidden;
-webkit-transform:translateX(0);/* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
-moz-backface-visibility:hidden;
-moz-transform:translateX(0);
}
.flip.out{
-webkit-transform:rotateY(-90deg)scale(.9);
-webkit-animation-name:flipouttoleft;
-webkit-animation-duration:175ms;
-moz-transform:rotateY(-90deg)scale(.9);
-moz-animation-name:flipouttoleft;
-moz-animation-duration:175ms;
}
.flip.in{
-webkit-animation-name:flipintoright;
-webkit-animation-duration:225ms;
-moz-animation-name:flipintoright;
-moz-animation-duration:225ms;
}
.flip.out.reverse{
-webkit-transform:rotateY(90deg)scale(.9);
-webkit-animation-name:flipouttoright;
-moz-transform:rotateY(90deg)scale(.9);
-moz-animation-name:flipouttoright;
}
.flip.in.reverse{
-webkit-animation-name:flipintoleft;
-moz-animation-name:flipintoleft;
}
@-webkit-keyframesflipouttoleft{
from{-webkit-transform:rotateY(0);}
to{-webkit-transform:rotateY(-90deg)scale(.9);}
}
@-moz-keyframesflipouttoleft{
from{-moz-transform:rotateY(0);}
to{-moz-transform:rotateY(-90deg)scale(.9);}
}
@-webkit-keyframesflipouttoright{
from{-webkit-transform:rotateY(0);}
to{-webkit-transform:rotateY(90deg)scale(.9);}
}
@-moz-keyframesflipouttoright{
from{-moz-transform:rotateY(0);}
to{-moz-transform:rotateY(90deg)scale(.9);}
}
@-webkit-keyframesflipintoleft{
from{-webkit-transform:rotateY(-90deg)scale(.9);}
to{-webkit-transform:rotateY(0);}
}
@-moz-keyframesflipintoleft{
from{-moz-transform:rotateY(-90deg)scale(.9);}
to{-moz-transform:rotateY(0);}
}
@-webkit-keyframesflipintoright{
from{-webkit-transform:rotateY(90deg)scale(.9);}
to{-webkit-transform:rotateY(0);}
}
@-moz-keyframesflipintoright{
from{-moz-transform:rotateY(90deg)scale(.9);}
to{-moz-transform:rotateY(0);}
}
/* The properties in this rule are only necessary for the 'flip' transition.
* We need specify the perspective to create a projection matrix. This will add
* some depth as the element flips. The depth number represents the distance of
* the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
* value.
*/
.viewport-turn{
-webkit-perspective:1000;
-moz-perspective:1000;
position:absolute;
}
.turn{
-webkit-backface-visibility:hidden;
-webkit-transform:translateX(0);/* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
-webkit-transform-origin:0;
-moz-backface-visibility:hidden;
-moz-transform:translateX(0);/* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
/* Fixes #2588 — When Windows Phone 7.5 (Mango) tries to calculate a numeric opacity for a select—including “inherit”—without explicitly specifying an opacity on the parent to give it context, a bug appears where clicking elsewhere on the page after opening the select will open the select again. */
.ui-footerinput.ui-input-text{margin-left:1.25%;padding:.4em1%;width:95.5%}/* Note that padding left/right on text inputs is factored into how the element is displayed in Firefox, but does not actually pad the text inside it. */
