Lungo.widgets.pull.css 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. /**
  2. * Stylesheet
  3. *
  4. * @namespace Lungo.Widgets
  5. * @class Pull
  6. *
  7. * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  8. */
  9. section > [data-control="pull"] {
  10. position: absolute;
  11. z-index: -1;
  12. top: 44px;
  13. width: 100%;
  14. height: 80px;
  15. padding: 10px 0;
  16. text-align: center;
  17. }
  18. section > [data-control="pull"] > .icon {
  19. display: inline-block;
  20. width: 48px;
  21. height: 48px;
  22. font-size: 44px;
  23. line-height: 48px;
  24. -webkit-transition: all 300ms;
  25. -moz-transition: all 300ms;
  26. -ms-transition: all 300ms;
  27. -o-transition: all 300ms;
  28. transition: all 300ms;
  29. }
  30. section > [data-control="pull"] > .loading {
  31. display: none;
  32. left: 0%;
  33. }
  34. section > [data-control="pull"] > strong {
  35. position: relative;
  36. top: -16px;
  37. margin-left: 4px;
  38. font-size: 1.1em;
  39. }
  40. section > [data-control="pull"].rotate > .icon {
  41. -webkit-transform: rotate(180deg);
  42. -moz-transform: rotate(180deg);
  43. -ms-transform: rotate(180deg);
  44. -o-transform: rotate(180deg);
  45. transform: rotate(180deg);
  46. }
  47. section > [data-control="pull"].refresh > .icon {
  48. display: none;
  49. }
  50. section > [data-control="pull"].refresh > .loading {
  51. display: inline-block;
  52. }