pull-up-down.css 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  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. text-align: center;
  39. height: 50px;
  40. line-height: 50px;
  41. /*background:#fff;
  42. padding:14px 10px;*/
  43. /*border-bottom:1px solid #ccc;*/
  44. font-weight:bold;
  45. font-size:14px;
  46. color:#888;
  47. margin-top:0;
  48. white-space: nowrap;
  49. font-size:14px;
  50. position: relative;
  51. }
  52. .pullDown.scrolledUp{
  53. margin-top:-51px; /* Should match the totalt height (i.e. height + paddings + borders) of #pullDown set above */
  54. }
  55. .pullDown .pullDownLabel, .pullUp .pullUpLabel {
  56. margin: 0px;
  57. }
  58. .pullDown .pullDownIcon, .pullUp .pullUpIcon {
  59. display: inline-block;
  60. width:40px; height:40px;
  61. background:url(../images/pull-icon@2x.png) 0 0 no-repeat;
  62. -webkit-background-size:40px 80px; background-size:40px 80px;
  63. -webkit-transition-property:-webkit-transform;
  64. -webkit-transition-duration:250ms;
  65. vertical-align: middle;
  66. margin: 0px;
  67. }
  68. .pullDown .pullDownIcon {
  69. position: absolute;
  70. top: 6px;
  71. left: 66px;
  72. -webkit-transform:rotate(0deg) translateZ(0);
  73. }
  74. .pullUp .pullUpIcon {
  75. position: absolute;
  76. top: 6px;
  77. left: 66px;
  78. -webkit-transform:rotate(-180deg) translateZ(0);
  79. }
  80. .pullDown.flip .pullDownIcon {
  81. -webkit-transform:rotate(-180deg) translateZ(0);
  82. }
  83. .pullUp.flip .pullUpIcon {
  84. -webkit-transform:rotate(0deg) translateZ(0);
  85. }
  86. .pullDown.loading .pullDownIcon, .pullUp.loading .pullUpIcon {
  87. background-position:0 100%;
  88. -webkit-transform:rotate(0deg) translateZ(0);
  89. -webkit-transition-duration:0ms;
  90. -webkit-animation-name:loading;
  91. -webkit-animation-duration:2s;
  92. -webkit-animation-iteration-count:infinite;
  93. -webkit-animation-timing-function:linear;
  94. }
  95. @-webkit-keyframes loading {
  96. from { -webkit-transform:rotate(0deg) translateZ(0); }
  97. to { -webkit-transform:rotate(360deg) translateZ(0); }
  98. }