ultra-design/lib/drawer/drawer-style.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
var react = require('@emotion/react');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);

var _templateObject;
var drawerWrapperStyles = function drawerWrapperStyles(props) {
  var theme = props.theme;
  var _theme$theme$mode = theme[theme.mode],
      textColor = _theme$theme$mode.textColor,
      thirdBackgroundColor = _theme$theme$mode.thirdBackgroundColor;
  return react.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n    position: fixed;\n    inset: 0;\n    z-index: 1000;\n    color: ", ";\n    pointer-events: none;\n    .ultra-drawer {\n      pointer-events: all;\n      position: absolute;\n      background-color: ", ";\n      padding: 20px;\n      overflow: auto;\n      transition: transform 300ms cubic-bezier(0.1, 0.6, 0.1, 1);\n      .ultra-drawer-header {\n        display: flex;\n        align-items: center;\n        flex-direction: row-reverse;\n        &__title {\n          flex: 1;\n          margin: 0;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          font-weight: 500;\n          font-size: 16px;\n        }\n\n        &__close {\n          margin-left: 10px;\n          cursor: pointer;\n        }\n      }\n      .ultra-drawer-body {\n        padding: 20px 0;\n      }\n      .ultra-drawer-footer {\n        text-align: right;\n        button + button {\n          margin-left: 10px;\n        }\n      }\n    }\n  "])), textColor, thirdBackgroundColor);
};

exports.drawerWrapperStyles = drawerWrapperStyles;