pull-up-down.css 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. @charset "utf-8";
  2. .scroll-wrapper {
  3. position: absolute;
  4. z-index: 1;
  5. top: 0px;
  6. bottom: 0px;
  7. left: 0;
  8. width: 100%;
  9. overflow: hidden;
  10. }
  11. .iScroller {
  12. position: absolute;
  13. z-index: 1;
  14. -webkit-tap-highlight-color: rgba(0,0,0,0);
  15. width: 100%;
  16. -webkit-transform: translateZ(0);
  17. -moz-transform: translateZ(0);
  18. -ms-transform: translateZ(0);
  19. -o-transform: translateZ(0);
  20. transform: translateZ(0);
  21. -webkit-touch-callout: none;
  22. -webkit-user-select: none;
  23. -moz-user-select: none;
  24. -ms-user-select: none;
  25. user-select: none;
  26. -webkit-text-size-adjust: none;
  27. -moz-text-size-adjust: none;
  28. -ms-text-size-adjust: none;
  29. -o-text-size-adjust: none;
  30. text-size-adjust: none;
  31. }
  32. /**
  33. *
  34. * Pull down/up styles
  35. *
  36. */
  37. .pullDown, .pullUp {
  38. background:#fff;
  39. height:40px;
  40. line-height:40px;
  41. padding:5px 10px;
  42. /*border-bottom:1px solid #ccc;*/
  43. font-weight:bold;
  44. font-size:14px;
  45. color:#888;
  46. margin-top:0;
  47. white-space: nowrap;
  48. font-size:14px;
  49. }
  50. .pullDown.scrolledUp{
  51. margin-top:-51px; /* Should match the totalt height (i.e. height + paddings + borders) of #pullDown set above */
  52. }
  53. .pullDown .pullDownLabel, .pullUp .pullUpLabel {
  54. margin: 0 5px;
  55. }
  56. .pullDown .pullDownIcon, .pullUp .pullUpIcon {
  57. display: inline-block;
  58. width:40px; height:40px;
  59. background:url(../images/pull-icon@2x.png) 0 0 no-repeat;
  60. -webkit-background-size:40px 80px; background-size:40px 80px;
  61. -webkit-transition-property:-webkit-transform;
  62. -webkit-transition-duration:250ms;
  63. vertical-align: middle;
  64. margin: 0 5px;
  65. }
  66. .pullDown .pullDownIcon {
  67. -webkit-transform:rotate(0deg) translateZ(0);
  68. }
  69. .pullUp .pullUpIcon {
  70. -webkit-transform:rotate(-180deg) translateZ(0);
  71. }
  72. .pullDown.flip .pullDownIcon {
  73. -webkit-transform:rotate(-180deg) translateZ(0);
  74. }
  75. .pullUp.flip .pullUpIcon {
  76. -webkit-transform:rotate(0deg) translateZ(0);
  77. }
  78. .pullDown.loading .pullDownIcon, .pullUp.loading .pullUpIcon {
  79. background-position:0 100%;
  80. -webkit-transform:rotate(0deg) translateZ(0);
  81. -webkit-transition-duration:0ms;
  82. -webkit-animation-name:loading;
  83. -webkit-animation-duration:2s;
  84. -webkit-animation-iteration-count:infinite;
  85. -webkit-animation-timing-function:linear;
  86. }
  87. @-webkit-keyframes loading {
  88. from { -webkit-transform:rotate(0deg) translateZ(0); }
  89. to { -webkit-transform:rotate(360deg) translateZ(0); }
  90. }