@helpscout/hsds-react/components/SidePanel/SidePanel.css.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.ClosePanelButtonUI = exports.ContentUI = exports.SidePanelUI = exports.OverlayUI = void 0;

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _color = require("../../styles/utilities/color");

var _color2 = require("../../utilities/color");

var _useAnimatedRender = require("../../hooks/useAnimatedRender");

var sidePanelDefaultAnimation = "\n.right &.element-in {\n  animation: slideRightIn 0.3s;\n}\n.left &.element-in {\n  animation: slideLeftIn 0.3s;\n}\n\n@keyframes slideRightIn {\n  0% {\n    transform: translateX(100px);\n    opacity: 0;\n  }\n  100% {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n@keyframes slideLeftIn {\n  0% {\n    transform: translateX(-100px);\n    opacity: 0;\n  }\n  100% {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n";
var OverlayUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "SidePanelcss__OverlayUI",
  componentId: "hgiinc-0"
})(["width:100%;display:flex;flex-direction:row-reverse;position:absolute;top:0;right:0;bottom:0;left:0;overflow-x:hidden;z-index:", ";background-color:", ";&.no-overlay{background-color:transparent;pointer-events:none;}&.left{flex-direction:row;}", ""], function (_ref) {
  var zIndex = _ref.zIndex;
  return zIndex;
}, (0, _color2.rgba)((0, _color.getColor)('blue.800'), 0.3), _useAnimatedRender.defaultAnimation);
exports.OverlayUI = OverlayUI;
var SidePanelUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "SidePanelcss__SidePanelUI",
  componentId: "hgiinc-1"
})(["position:relative;flex-direction:column;background-color:", ";width:", ";pointer-events:all;display:none;&.element-in{display:flex;}.no-overlay &{pointer-events:all;}@media screen and (prefers-reduced-motion:no-preference){", "}&:focus{outline:none;}"], (0, _color.getColor)('grey.300'), function (_ref2) {
  var panelWidth = _ref2.panelWidth;
  return panelWidth;
}, sidePanelDefaultAnimation);
exports.SidePanelUI = SidePanelUI;
var ContentUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "SidePanelcss__ContentUI",
  componentId: "hgiinc-2"
})(["display:flex;flex-direction:column;flex-grow:1;overflow:hidden;"]);
exports.ContentUI = ContentUI;
var ClosePanelButtonUI = (0, _styledComponents.default)('button').withConfig({
  displayName: "SidePanelcss__ClosePanelButtonUI",
  componentId: "hgiinc-3"
})(["position:absolute;padding:5px;background:#fff;border:0;border-radius:4px;color:", ";top:20px;right:20px;z-index:5;&:hover{color:", ";cursor:pointer;}&:active,&:focus{outline:0;box-shadow:0 0 0 2px ", ";}"], (0, _color.getColor)('charcoal.400'), (0, _color.getColor)('charcoal.600'), (0, _color.getColor)('blue.400'));
exports.ClosePanelButtonUI = ClosePanelButtonUI;