/// Format for CSS classes created with Motion UI. /// @type Map /// @prop {Boolean} append [true] - Defines if selectors are chained to the selector (‘.class.enter`), or appended as a new class (`.class-enter`). /// @prop {String} prefix [’mui-‘] - Prefix to add before the state of a class. Enter an empty string to use no prefix. /// @prop {String} prefix [’-active’] - Suffix to add to the active state class. $motion-ui-classes: (
chain: true, prefix: 'mui-', active: '-active',
) !default;
/// State names to reference when writing motion classes. To use multiple class names for one state, enter a list of strings instead of one string. /// @type Map $motion-ui-states: (
in: 'enter', out: 'leave',
) !default;
/// Default speed that transitions and animations play at, along with values for modifier classes to change the speed. /// @type Map $motion-ui-speeds: (
default: 500ms, slow: 750ms, fast: 250ms,
) !default;
/// Default delay to add before motion, along with values for modifier classes to change the delay. /// @type Map $motion-ui-delays: (
default: 0, short: 300ms, long: 700ms,
) !default;
/// Default easing for transitions and animations, along with values for modifier classes to change the easing. /// @type Map $motion-ui-easings: (
default: linear, linear: linear, ease: ease, ease-in: ease-in, ease-out: ease-out, ease-in-out: ease-in-out, bounce-in: cubic-bezier(0.485, 0.155, 0.24, 1.245), bounce-out: cubic-bezier(0.485, 0.155, 0.515, 0.845), bounce-in-out: cubic-bezier(0.76, -0.245, 0.24, 1.245),
) !default;
/// Miscellaneous settings related to Motion UI. /// @type Map /// @prop {Boolean} slide-and-fade [false] - Defines if slide motions should also fade in/out. /// @prop {Boolean} slide-and-fade [true] - Defines if hinge motions should also fade in/out. /// @prop {Boolean} slide-and-fade [true] - Defines if scale motions should also fade in/out. /// @prop {Boolean} slide-and-fade [true] - Defines if spin motions should also fade in/out. $motion-ui-settings: (
slide-and-fade: false, hinge-and-fade: true, scale-and-fade: true, spin-and-fade: true, activate-queue-class: 'is-animating',
) !default;