113 lines
3.5 KiB
CSS
113 lines
3.5 KiB
CSS
/*******************************************
|
|
Default Pull-up and Pull-down styling
|
|
Replace/modify/override to your preferences
|
|
*******************************************/
|
|
.iscroll-pullup {
|
|
/* The wrapper is position:relative or position:absolute, so the pullUp is positioned here
|
|
relative to the scroller, not the page. If we don't do this, the pullUp will initially
|
|
appear briefly at the bottom of content if content is shorter than the wrapper.
|
|
*/
|
|
position: absolute; /* relative to the scroller */
|
|
bottom: 0; /* at the bottom of the scroller */
|
|
width: 100%;
|
|
}
|
|
|
|
.iscroll-pulldown,
|
|
.iscroll-pullup {
|
|
background: #fff;
|
|
height: 40px;
|
|
line-height: 40px; /* Center text vertically */
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
color: #888;
|
|
}
|
|
|
|
|
|
/* MSIE not supported by iScroll, so not MSIE transitions or animation */
|
|
.iscroll-pulldown .iscroll-pull-icon,
|
|
.iscroll-pullup .iscroll-pull-icon {
|
|
margin-left: 0.5em;
|
|
display: block;
|
|
float: left;
|
|
width: 40px;
|
|
height: 40px;
|
|
background: url(iscroll-pull-icon@2x.png) 0 0 no-repeat;
|
|
-webkit-background-size: 40px 80px;
|
|
-moz-background-size: 40px 80px;
|
|
-o-background-size: 40px 80px;
|
|
background-size: 40px 80px;
|
|
-webkit-transition: -webkit-transform 250ms linear;
|
|
-moz-transition: -moz-transform 250ms linear;
|
|
-o-transition: -o-transform 250ms linear;
|
|
transition: transform 250ms linear;
|
|
}
|
|
|
|
/* Note that translateZ(0) triggers hardware acceleration on WebKit browsers
|
|
Acceleration is automatic on Mozilla */
|
|
|
|
.iscroll-pulldown .iscroll-pull-icon {
|
|
-webkit-transform: rotate(0deg) translateZ(0);
|
|
-moz-transform: rotate(0deg);
|
|
-o-transform: rotate(0deg);
|
|
transform: rotate(0deg) translateZ(0);
|
|
}
|
|
|
|
.iscroll-pullup .iscroll-pull-icon {
|
|
-webkit-transform: rotate(-180deg) translateZ(0);
|
|
-moz-transform: rotate(-180deg);
|
|
-o-transform: rotate(-180deg);
|
|
transform: rotate(-180deg) translateZ(0);
|
|
}
|
|
|
|
.iscroll-pulldown.iscroll-pull-pulled .iscroll-pull-icon {
|
|
-webkit-transform: rotate(-180deg) translateZ(0);
|
|
-moz-transform: rotate(-180deg);
|
|
-o-transform: rotate(-180deg);
|
|
transform: rotate(-180deg) translateZ(0);
|
|
}
|
|
|
|
.iscroll-pullup.iscroll-pull-pulled .iscroll-pull-icon {
|
|
-webkit-transform: rotate(0deg) translateZ(0);
|
|
-moz-transform: rotate(0deg);
|
|
-o-transform: rotate(0deg);
|
|
transform: rotate(0deg) translateZ(0);
|
|
}
|
|
|
|
.iscroll-pulldown.iscroll-pull-loading .iscroll-pull-icon,
|
|
.iscroll-pullup.iscroll-pull-loading .iscroll-pull-icon {
|
|
background-position: 0 100%;
|
|
-webkit-transform: rotate(0deg) translateZ(0);
|
|
-webkit-transition-duration: 0ms;
|
|
-webkit-animation: iscroll-pull-loading 2s infinite linear;
|
|
-moz-transform: rotate(0deg);
|
|
-moz-transition-duration: 0ms;
|
|
-moz-animation: iscroll-pull-loading 2s infinite linear;
|
|
-o-transform: rotate(0deg);
|
|
-o-transition-duration: 0ms;
|
|
-o-animation: iscroll-pull-loading 2s infinite linear; /* Opera 12+ only */
|
|
transform: rotate(0deg) translateZ(0);
|
|
transition: transform 0ms linear;
|
|
animation: iscroll-pull-loading 2s infinite linear;
|
|
}
|
|
|
|
@-webkit-keyframes iscroll-pull-loading {
|
|
from { -webkit-transform: rotate(0deg); }
|
|
to { -webkit-transform: rotate(360deg); }
|
|
}
|
|
|
|
@-moz-keyframes iscroll-pull-loading {
|
|
from { -moz-transform: rotate(0deg); }
|
|
to { -moz-transform: rotate(360deg); }
|
|
}
|
|
|
|
@-o-keyframes iscroll-pull-loading {
|
|
from { -o-transform: rotate(0deg); }
|
|
to { -o-transform: rotate(360deg); }
|
|
}
|
|
|
|
@-keyframes iscroll-pull-loading {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|