button transition with $enable-shadows:true not working properly
Created by: wojtask9
see: http://jsfiddle.net/aze0jzj5/6/
steps to reproduce: click and hold button for 1sec and then release mouse button
result: focus outline flickers
This is because BS tries transition from box-shadow: inset to box-shadow: outer
According to https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_buttons.scss#L89
you can disable inset
by setting $btn-active-box-shadow:none
but that will not work because in other places passing 'none' to box-shadow causes incorrect css rule (for example box-shadow: none, 1px 1px 1px black
)
Solution that can be worth consider: http://tobiasahlin.com/blog/how-to-animate-box-shadow/