Add variables for transitions

[tomlutzenberger]

In order to standardize transitions it would be useful to add variables for transitions.
When looking at transition usage, I see that in most cases ease-in-out is used as timing-function and 0.2s / 0.6s as duration. These values could be transfered into variables.

Additionally, the mixin could be extended to provide those variables as default values if no parameters are given. So using @include transition(); could end up in transition: all 0.2s ease-in-out; after compiling.

I would be happy to make those changes and open a PR 😃

[tomlutzenberger]

Any opinions on this, @mdo ?

[virgofx]

Also -- Can we add a variable for the input focus transition (for border and box shadow) in the [13. Forms] section. It's a pain to override the 0.15s in external CSS.

[guylepage3]

+1

An example of variables that we've implemented are;

$transitions-primary:        opacity .15s linear !default;
$transitions-secondary:      all .2s ease-in-out !default;

We are entering a new area of UX dominance where interactions are becoming more and more useful in a designer's tool belt. I feel this is a basic but decent start in for the Bootstrap framework.

[mdo]

Fixed by #21345.