/// 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;