.build-view { &_info { } &_terminal { margin-top: 20px; } } .builds { padding: 0 15px; } .build { .row(); padding: 15px 0; margin-bottom: 3px; background: lighten(@well-bg, 3%); &_status { float: left; padding-top: 14px; margin-right: 13px; } &_info { display: inline-block; margin-right: 10px; } &_controls { .make-md-column(3); .make-xs-column(3); .text-right; &_buttons { margin-top: 8px; transition: opacity 0.2s ease; opacity: 0; } &_progress { padding-top: 14px; .progress { margin-bottom: 0; } } } &_content { .make-md-column(9); .make-xs-column(9); } &_header { margin-bottom: 6px; font-size: 18px; a { font-size: inherit; } } &:hover { .build_controls_buttons { opacity: 1; } } } @animation-duration: 1.5s; .status { width: 25px; height: 25px; border-radius: 50%; &__in-progress { background: @brand-info; -webkit-animation: pulsate @animation-duration ease-out; -webkit-animation-iteration-count: infinite; -moz-animation: pulsate @animation-duration ease-out; -moz-animation-iteration-count: infinite; -o-animation: pulsate @animation-duration ease-out; -o-animation-iteration-count: infinite; animation: pulsate @animation-duration ease-out; animation-iteration-count: infinite; } &__done { background: @link-color; } &__error { background: @brand-danger; } &__queued { background: @brand-primary; } } .pulsate-frames() { .transform(@scaleX, @scaleY) { -webkit-transform: scale(@scaleX, @scaleY); opacity: 1; -moz-transform: scale(@scaleX, @scaleY); opacity: 1; -ms-transform: scale(@scaleX, @scaleY); opacity: 1; -o-transform: scale(@scaleX, @scaleY); opacity: 1; transform: scale(@scaleX, @scaleY); opacity: 1; } 0% { .transform(1.0, 1.0); } 25% { opacity: 1.0; } 50% { .transform(0.75, 0.75); } 50% { opacity: 1.0; } 100% { .transform(1.0, 1.0); } } @-webkit-keyframes pulsate {.pulsate-frames} @-moz-keyframes pulsate {.pulsate-frames} @-ms-keyframes pulsate {.pulsate-frames} @-o-keyframes pulsate {.pulsate-frames} @keyframes pulsate {.pulsate-frames}