app.butterbar.less 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. .butterbar{
  2. position: relative;
  3. margin-bottom: -@butterbar-height;
  4. height: @butterbar-height;
  5. .bar{
  6. position: absolute;
  7. height: 0;
  8. width: 100%;
  9. text-indent: -9999px;
  10. background-color: @brand-info;
  11. &:before{
  12. content: "";
  13. height: @butterbar-height;
  14. position: absolute;
  15. left: 50%;
  16. right: 50%;
  17. background-color: inherit;
  18. }
  19. }
  20. }
  21. .butterbar.active{
  22. -webkit-animation: changebar @butterbar-time*3 infinite @butterbar-time;
  23. -moz-animation: changebar @butterbar-time*3 infinite @butterbar-time;
  24. animation: changebar @butterbar-time*3 infinite @butterbar-time;
  25. .bar{
  26. -webkit-animation: changebar @butterbar-time*3 infinite;
  27. -moz-animation: changebar @butterbar-time*3 infinite;
  28. animation: changebar @butterbar-time*3 infinite;
  29. &:before{
  30. -webkit-animation: movingbar @butterbar-time infinite;
  31. -moz-animation: movingbar @butterbar-time infinite;
  32. animation: movingbar @butterbar-time infinite;
  33. }
  34. }
  35. }
  36. /* Moving bar */
  37. @-webkit-keyframes movingbar{
  38. 0% { left:50%; right:50% }
  39. 99.9% { left:0%; right:0% }
  40. 100% { left:50%; right:50%}
  41. }
  42. @-moz-keyframes movingbar{
  43. 0% { left:50%; right:50% }
  44. 99.9% { left:0%; right:0% }
  45. 100% { left:50%; right:50%}
  46. }
  47. @keyframes movingbar{
  48. 0% { left:50%; right:50% }
  49. 99.9% { left:0%; right:0% }
  50. 100% { left:50%; right:50%}
  51. }
  52. /* change bar */
  53. @-webkit-keyframes changebar{
  54. 0% { background-color: @brand-info }
  55. 33.3% { background-color: @brand-info }
  56. 33.33% { background-color: @brand-warning }
  57. 66.6% { background-color: @brand-warning }
  58. 66.66% { background-color: @brand-primary }
  59. 99.9% { background-color: @brand-primary }
  60. }
  61. @-moz-keyframes changebar{
  62. 0% { background-color: @brand-info }
  63. 33.3% { background-color: @brand-info }
  64. 33.33% { background-color: @brand-warning }
  65. 66.6% { background-color: @brand-warning }
  66. 66.66% { background-color: @brand-primary }
  67. 99.9% { background-color: @brand-primary }
  68. }
  69. @keyframes changebar{
  70. 0% { background-color: @brand-info }
  71. 33.3% { background-color: @brand-info }
  72. 33.33% { background-color: @brand-warning }
  73. 66.6% { background-color: @brand-warning }
  74. 66.66% { background-color: @brand-primary }
  75. 99.9% { background-color: @brand-primary }
  76. }