@braineet/ui/dist/esm/components/drawer/styles.js

Braineet design system

import { animated } from 'react-spring';
import styled from 'styled-components';
import Pane from '../pane';
export var Wrapper = styled(animated.div).withConfig({
  displayName: "styles__Wrapper",
  componentId: "sc-1hmtrk1-0"
})(["position:", ";z-index:", ";overflow:hidden;"], function (props) {
  return props.$position;
}, function (props) {
  return props.$zIndex || props.theme.zIndex.overlay;
});
export var Content = styled.div.withConfig({
  displayName: "styles__Content",
  componentId: "sc-1hmtrk1-1"
})(["display:flex;width:", ";margin:0.5rem;border-radius:1rem;height:calc(100% - 1rem);flex-direction:column;background:white;box-sizing:border-box;overflow:hidden;box-shadow:0 7px 14px 0 rgba(0,0,0,0.1),0 3px 6px 0 rgba(0,0,0,0.07);", ""], function (props) {
  return props.width || 'auto';
}, function (p) {
  return p.innerStyles;
});
export var Overlay = styled(animated.div).withConfig({
  displayName: "styles__Overlay",
  componentId: "sc-1hmtrk1-2"
})(["position:fixed;top:0;left:0;bottom:0;right:0;z-index:", ";background:", ";"], function (props) {
  return props.$zIndex || props.theme.zIndex.overlay;
}, function (props) {
  return props.bg ? props.bg : 'rgba(16, 22, 26, 0.7)';
});
export var Body = styled(Pane).withConfig({
  displayName: "styles__Body",
  componentId: "sc-1hmtrk1-3"
})(["display:flex;flex-direction:column;height:100%;flex:1;padding:", ";"], function (props) {
  return props.padding || '16px';
});
export var Footer = styled.footer.withConfig({
  displayName: "styles__Footer",
  componentId: "sc-1hmtrk1-4"
})(["display:flex;justify-content:flex-end;padding:16px;"]);
export default {
  Wrapper: Wrapper,
  Content: Content,
  Overlay: Overlay,
  Body: Body,
  Footer: Footer
};