@fluent-windows/core/styles/createTransition.js

React components that inspired by Microsoft's Fluent Design System.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.createBaseTransition = void 0;

var _utils = require("../utils");

var createBaseTransition = function createBaseTransition(type) {
  var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 250;
  var cubicBezier = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '0.7, 0.1, 0.33, 1';
  return type.map(function (v) {
    return "".concat(v, " ").concat(duration, "ms cubic-bezier(").concat(cubicBezier, ") 0ms");
  }).join(',');
};

exports.createBaseTransition = createBaseTransition;
var baseTransition = createBaseTransition(['all']);

function createTransition(transitions) {
  var defaultTransitions = {
    "default": baseTransition,
    button: createBaseTransition(['background-color', 'color', 'border-color', 'box-shadow', 'padding'], 250),
    input: createBaseTransition(['background-color', 'color', 'border-color'], 250),
    inputLabel: createBaseTransition(['transform'], 180),
    checkbox: baseTransition,
    toggle: baseTransition,
    radio: baseTransition,
    navigation: baseTransition,
    drawer: createBaseTransition(['box-shadow'], 250),
    card: createBaseTransition(['box-shadow', 'filter'])
  };
  return (0, _utils.deepMerge)(transitions, defaultTransitions);
}

var _default = createTransition;
exports["default"] = _default;