synapse-react-client/dist/components/FeaturedDataTabs/FacetPlotsCardGrid.js

[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie

import { styled as o, Box as i } from "@mui/material";
const p = "FacetPlotsCard", n = "FacetPlotsCardTitleContainer", a = "FacetPlotsCardPlotContainer", l = o(
  i,
  {
    label: "FacetPlotsCardGridContainer"
  }
)(({ theme: t }) => ({
  [t.breakpoints.down("md")]: {
    display: "flex",
    flexDirection: "column",
    gap: t.spacing(2)
  },
  [t.breakpoints.up("md")]: {
    /* 
        The grid is broken up into cards which have subcomponents that should be aligned
        Ideally we could use CSS Subgrid, but it is not widely supported as of the time of writing
        See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid
    
        Instead we will use grid with `display: contents`, and style each section to look like a card.
         */
    display: "grid",
    gridTemplateRows: "[title] auto [plot0] auto",
    justifyContent: "center",
    gridTemplateColumns: "repeat(auto-fit, minmax(100px, 1fr))",
    columnGap: "2%",
    [`.${p}`]: {
      display: "contents"
    },
    [`.${n}, .${a}`]: {
      // Since we're using `display:contents`, the card container style will not be displayed.
      // So add box-shadow to each grid item
      boxShadow: "0px 3px 10px 0px #5D69AB1A",
      backgroundColor: t.palette.background.paper
    },
    [`.${n}`]: {
      gridRow: "title",
      // For the title portion of the card, use clipPath to hide the box-shadow at the bottom of the section,
      // since the bottom border is adjacent to the rest of the visual card
      clipPath: "inset(-10px -10px 0px -10px)"
    },
    [`.${a}`]: {
      // For the plots section(s), use clipPath to hide the box-shadow at the top and bottom of the section
      clipPath: "inset(0px -10px 0px -10px)"
    },
    [`.${a}:last-of-type`]: {
      // For the last plot section, use clipPath to hide the box-shadow at the top of the section
      // the bottom box-shadow is shown since this is container marks the bottom of the card (visually)
      borderBottom: "1px solid #e8e8e8",
      clipPath: "inset(0px -10px -10px -10px)"
    }
  },
  [`.${a}:last-of-type`]: {
    paddingBottom: t.spacing(5)
  }
})), s = o(
  i,
  {
    label: "FacetPlotsCardTitleContainer"
  }
)(({ theme: t }) => ({
  display: "flex",
  flexDirection: "column",
  justifyContent: "start",
  paddingTop: t.spacing(5),
  paddingLeft: t.spacing(5),
  paddingRight: t.spacing(5),
  minHeight: "64px"
})), d = o(
  i,
  {
    label: "FacetPlotsCardPlotContainer"
  }
)(({ theme: t }) => ({
  paddingLeft: t.spacing(5),
  paddingRight: t.spacing(5)
}));
export {
  p as FACET_PLOTS_CARD_CLASSNAME,
  a as FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME,
  n as FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME,
  l as FacetPlotsCardGridContainer,
  d as FacetPlotsCardPlotContainer,
  s as FacetPlotsCardTitleContainer
};
//# sourceMappingURL=FacetPlotsCardGrid.js.map