@fluent-windows/core/Drawer/Drawer.styled.js

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.styles = exports.mask = exports.root = exports.createSwipe = void 0;

var _createTransition = require("../styles/createTransition");

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var anchorTransitionMap = {
  left: '-100%, 0, 0',
  right: '100%, 0, 0',
  top: '0, -100%, 0',
  bottom: '0, 100%, 0'
};

var createSwipe = function createSwipe(anchor) {
  return {
    transition: (0, _createTransition.createBaseTransition)(['transform', 'visibility']),
    '&.custom-enter': {
      transform: "translate3d(".concat(anchorTransitionMap[anchor], ")"),
      '&-done': {
        transform: 'none'
      }
    },
    '&.custom-exit': {
      transform: 'none',
      '&-active': {
        transform: "translate3d(".concat(anchorTransitionMap[anchor], ")")
      },
      '&-done': {
        transform: "translate3d(".concat(anchorTransitionMap[anchor], ")")
      }
    }
  };
};

exports.createSwipe = createSwipe;
var anchorMap = {
  left: {
    height: '100%',
    left: 0,
    right: 'auto',
    top: 0,
    bottom: 0
  },
  right: {
    height: '100%',
    left: 'auto',
    right: 0,
    top: 0,
    bottom: 0
  },
  top: {
    width: '100%',
    left: 0,
    right: 0,
    top: 0,
    bottom: 'auto'
  },
  bottom: {
    width: '100%',
    left: 0,
    right: 0,
    top: 'auto',
    bottom: 0
  }
};

var root = function root(theme) {
  return function (_ref) {
    var anchor = _ref.anchor;
    return _objectSpread({
      position: 'fixed',
      zIndex: 1001,
      boxShadow: theme.shadows[3],
      backgroundColor: theme.colors.white["default"]
    }, anchorMap[anchor]);
  };
};

exports.root = root;

var mask = function mask(theme) {
  return {
    position: 'fixed',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    zIndex: 1000,
    backgroundColor: theme.colors.standard.transparent2
  };
};

exports.mask = mask;

var styles = function styles(theme) {
  return {
    root: root(theme),
    mask: mask(theme)
  };
};

exports.styles = styles;