12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182 |
- .butterbar{
- position: relative;
- margin-bottom: -@butterbar-height;
- height: @butterbar-height;
- .bar{
- position: absolute;
- height: 0;
- width: 100%;
- text-indent: -9999px;
- background-color: @brand-info;
- &:before{
- content: "";
- height: @butterbar-height;
- position: absolute;
- left: 50%;
- right: 50%;
- background-color: inherit;
- }
- }
- }
- .butterbar.active{
- -webkit-animation: changebar @butterbar-time*3 infinite @butterbar-time;
- -moz-animation: changebar @butterbar-time*3 infinite @butterbar-time;
- animation: changebar @butterbar-time*3 infinite @butterbar-time;
- .bar{
- -webkit-animation: changebar @butterbar-time*3 infinite;
- -moz-animation: changebar @butterbar-time*3 infinite;
- animation: changebar @butterbar-time*3 infinite;
- &:before{
- -webkit-animation: movingbar @butterbar-time infinite;
- -moz-animation: movingbar @butterbar-time infinite;
- animation: movingbar @butterbar-time infinite;
- }
- }
- }
- /* Moving bar */
- @-webkit-keyframes movingbar{
- 0% { left:50%; right:50% }
- 99.9% { left:0%; right:0% }
- 100% { left:50%; right:50%}
- }
- @-moz-keyframes movingbar{
- 0% { left:50%; right:50% }
- 99.9% { left:0%; right:0% }
- 100% { left:50%; right:50%}
- }
- @keyframes movingbar{
- 0% { left:50%; right:50% }
- 99.9% { left:0%; right:0% }
- 100% { left:50%; right:50%}
- }
- /* change bar */
- @-webkit-keyframes changebar{
- 0% { background-color: @brand-info }
- 33.3% { background-color: @brand-info }
- 33.33% { background-color: @brand-warning }
- 66.6% { background-color: @brand-warning }
- 66.66% { background-color: @brand-primary }
- 99.9% { background-color: @brand-primary }
- }
- @-moz-keyframes changebar{
- 0% { background-color: @brand-info }
- 33.3% { background-color: @brand-info }
- 33.33% { background-color: @brand-warning }
- 66.6% { background-color: @brand-warning }
- 66.66% { background-color: @brand-primary }
- 99.9% { background-color: @brand-primary }
- }
- @keyframes changebar{
- 0% { background-color: @brand-info }
- 33.3% { background-color: @brand-info }
- 33.33% { background-color: @brand-warning }
- 66.6% { background-color: @brand-warning }
- 66.66% { background-color: @brand-primary }
- 99.9% { background-color: @brand-primary }
- }
|