mobilebone.css
7.71 KB
/*!
* mobilebone.css
* by zhangxinxu(.com) 2014-09-26
* some necessary CSS for mobilebone.js
* good luck for U, ^_^
**/a,img{-webkit-touch-callout:none}body{margin:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:none;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.page,body,html{height:100%;width:100%;overflow:hidden}.page{position:absolute;left:0;top:0;background-color:#fff}.page.out{display:none}.in,.out{-webkit-animation-fill-mode:both;animation-fill-mode:both}.mask{height:100%;width:100%;background-color:rgba(255,255,255,.35);position:absolute;left:0;top:0;z-index:9}.loading{background-color:transparent;width:24px;height:24px;border-radius:100%;margin:0 auto;-webkit-animation-fill-mode:both;animation-fill-mode:both;border:2px solid #c5c5c5;border-bottom-color:transparent;background:0 0!important;display:inline-block;-webkit-animation:rotate .75s 0s linear infinite;animation:rotate .75s 0s linear infinite;position:absolute;left:50%;top:50%;margin-left:-12px;margin-top:-12px}.page[data-form],.slide.in,.slide.out{-webkit-animation-timing-function:ease-in-out;-webkit-animation-duration:250ms;-webkit-animation-delay:1ms;animation-timing-function:ease-in-out;animation-duration:250ms;animation-delay:1ms}.show_hide.out{display:none!important}.show_hide.in{display:block!important}.slide.in{-webkit-animation-name:slideinfromright;animation-name:slideinfromright;z-index:2!important}.slide.out{-webkit-animation-name:slideouttoleft;animation-name:slideouttoleft;z-index:1!important}.slide.reverse.out{-webkit-animation-name:slideouttoright;animation-name:slideouttoright;z-index:2!important}.slide.reverse.in{-webkit-animation-name:slideinfromleft;animation-name:slideinfromleft;z-index:1!important}@-webkit-keyframes slideinfromright{from{-webkit-transform:translate3d(100%,0,0)}to{-webkit-transform:translate3d(0,0,0)}}@keyframes slideinfromright{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes slideinfromleft{from{-webkit-transform:translate3d(-30%,0,0)}to{-webkit-transform:translate3d(0,0,0)}}@keyframes slideinfromleft{from{-webkit-transform:translate3d(-30%,0,0);transform:translate3d(-30%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes slideouttoleft{from{-webkit-transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-30%,0,0)}}@keyframes slideouttoleft{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-30%,0,0);transform:translate3d(-30%,0,0)}}@-webkit-keyframes slideouttoright{from{-webkit-transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(100%,0,0)}}@keyframes slideouttoright{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.page[data-form^=slide_noop],.page[data-form^=slide_part]{display:block!important}.page.in{z-index:2!important}.page.out{z-index:1!important}.page.in[data-mask]:after,.page.out[data-mask]:after{content:" ";position:fixed;display:block;visibility:visible;width:100%;height:100%;top:0;left:0;-webkit-animation:bgfadein .3s;animation:bgfadein .3s;-webkit-animation-fill-mode:both;animation-fill-mode:both;z-index:1}.page.in[data-mask]:after{-webkit-animation:bgfadeout .3s;animation:bgfadeout .3s}.slide_noop,.slide_noop.in,.slide_noop.in.reverse,.slide_noop_down.in,.slide_noop_down.out,.slide_noop_up.in,.slide_noop_up.out,.slide_noop_up_left.in,.slide_noop_up_left.out{-webkit-animation-name:slidenoop;animation-name:slidenoop;z-index:1!important}.slide_part_up_left.in{-webkit-animation-name:slidepartupleftin;animation-name:slidepartupleftin;z-index:2!important}.slide_part_up_left.out{-webkit-animation-name:slidepartupleftout;animation-name:slidepartupleftout;z-index:2!important}.page[data-form=slide_part_left].in{-webkit-animation-name:slidepartleftin;animation-name:slidepartleftin;z-index:2!important}.page[data-form=slide_part_left].out{-webkit-animation-name:slidepartleftout;animation-name:slidepartleftout;z-index:1!important}.page[data-form=slide_part_right].in{-webkit-animation-name:slidepartrightin;animation-name:slidepartrightin;z-index:2!important}.slide_part_right.out{-webkit-animation-name:slidepartrightout;animation-name:slidepartrightout;z-index:1!important}.page[data-form=slide_noop_left].out{-webkit-animation-name:slidenoopleftout;animation-name:slidenoopleftout;z-index:1!important}.slide_noop_left.in{-webkit-animation-name:slidenoopleftin;animation-name:slidenoopleftin;z-index:2!important}.page[data-form=slide_noop_right].out{-webkit-animation-name:slidenooprightout;animation-name:slidenooprightout;z-index:1!important}.slide_noop_right.in{-webkit-animation-name:slidenooprightin;animation-name:slidenooprightin;z-index:2!important}.slide_noop_right.in{-webkit-animation-name:slidenooprightin;animation-name:slidenooprightin;z-index:2!important}.page[data-form=slide_part_up].in{-webkit-animation-name:slidepartupin;animation-name:slidepartupin;z-index:2!important}.slide_part_up.out{-webkit-animation-name:slidepartupout;animation-name:slidepartupout;z-index:2!important}.page[data-form=slide_part_down].in{-webkit-animation-name:slidepartdownin;animation-name:slidepartdownin;z-index:2!important}.slide_part_down.out{-webkit-animation-name:slidepartdownout;animation-name:slidepartdownout;z-index:2!important}@-webkit-keyframes slidenoop{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slidenoop{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.slideup{animation-delay:10ms;-webkit-animation-delay:10ms}.slideup.out{-webkit-transform:translateY(100%);-webkit-animation-name:slideouttobottom;-webkit-animation-duration:.3s;-ms-transform:translateY(100%);transform:translateY(100%);animation-name:slideouttobottom;animation-duration:.3s}.slideup.in{-webkit-transform:translateY(0);-webkit-animation-name:slideinfrombottom;-webkit-animation-duration:.3s;-ms-transform:translateY(0);transform:translateY(0);animation-name:slideinfrombottom;animation-duration:.3s}.slideup.in.reverse{-webkit-animation-name:fadein;-webkit-animation-duration:150ms;animation-name:fadein;animation-duration:150ms}.slideup.out.reverse{-webkit-transform:translateY(100%);-webkit-animation-name:slideouttobottom;-webkit-animation-duration:.2s;-ms-transform:translateY(100%);transform:translateY(100%);animation-name:slideouttobottom;animation-duration:.2s}@-webkit-keyframes slideinfrombottom{from{-webkit-transform:translateY(100%)}to{-webkit-transform:translateY(0)}}@keyframes slideinfrombottom{from{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes slideouttobottom{from{-webkit-transform:translateY(0)}to{-webkit-transform:translateY(100%)}}@keyframes slideouttobottom{from{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}