@atlaskit/panel/dist/esm/components/Panel/styledPanel.js

A React component rendering a collapsible panel

import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

import { withFocusWithin } from 'react-focus-within';
import styled, { css } from 'styled-components'; // AFP-2532 TODO: Fix automatic suppressions below
// eslint-disable-next-line @atlassian/tangerine/import/entry-points

import { borderRadius, colors, gridSize } from '@atlaskit/theme';
var transition = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  transition: all 200ms ease-in-out;\n"])));
export var PanelWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: 0 auto ", "px;\n"])), gridSize() * 2);
export var ButtonWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  left: 0;\n  line-height: 0;\n  opacity: ", ";\n  position: absolute;\n  ", ";\n\n  /* IE 11 needs these vertical positioning rules - the flexbox\n  behavior for absolute-positioned children is not up to spec.\n  https://googlechrome.github.io/samples/css-flexbox-abspos/ */\n  top: 50%;\n  transform: translateY(-50%);\n\n  button {\n    pointer-events: none;\n  }\n"])), function (_ref) {
  var isHidden = _ref.isHidden;
  return isHidden ? 0 : 1;
}, transition);
export var PanelHeader = withFocusWithin(styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", "px;\n  display: flex;\n  left: -", "px;\n  margin-bottom: ", "px;\n  margin-top: ", "px;\n  padding: 2px 0 2px ", "px;\n  position: relative;\n  ", ";\n  width: 100%;\n\n  ", " {\n    opacity: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n    cursor: pointer;\n\n    ", " {\n      opacity: 1;\n    }\n  }\n"])), function (props) {
  return props.isFocused && colors.N20;
}, borderRadius, gridSize() * 3, gridSize(), gridSize() * 2, gridSize() * 3, transition, ButtonWrapper, function (props) {
  return props.isFocused && 1;
}, colors.N20, ButtonWrapper));