@activecollab/components/dist/esm/components/Entity/Styles.js

ActiveCollab Components

import styled, { css } from "styled-components";
import { Card } from "../Card";
import { PaperStyles } from "../Paper/Styles";
export const StyledEntityCard = styled(Card).withConfig({
  displayName: "Styles__StyledEntityCard",
  componentId: "sc-bjeea8-0"
})(["line-height:1.375;", " ", " ", " ", ""], _ref => {
  let {
    $renderAs
  } = _ref;
  return $renderAs === "list" && css(["display:flex;flex-direction:row;align-items:center;min-height:48px;margin-bottom:4px;justify-content:space-between;padding:0 16px 0 16px;"]);
}, _ref2 => {
  let {
    $renderAs
  } = _ref2;
  return $renderAs === "grid" && css(["display:flex;flex-direction:column;position:relative;padding:20px 24px;height:280px;"]);
}, props => props.$background && css(["background-color:", ";"], props.$background), _ref3 => {
  let {
    $isCollection,
    $background
  } = _ref3;
  return $isCollection && css(["&::after{display:block;content:\"\";position:absolute;top:0;bottom:0;right:0;left:0;transform:rotate(-3deg);z-index:-1;", ";background-color:", ";}"], PaperStyles, $background);
});
StyledEntityCard.displayName = "StyledEntityCard";
export const StyledEntityProperty = styled("div").withConfig({
  displayName: "Styles__StyledEntityProperty",
  componentId: "sc-bjeea8-1"
})(["", " ", " ", " ", " ", " ", " ", " ", " ", ""], _ref4 => {
  let {
    $renderAs,
    $width
  } = _ref4;
  return $renderAs === "list" && css(["display:flex;align-items:center;min-width:24px;flex:", ";"], $width ? "initial" : 1);
}, props => props.$renderAs === "list" && props.$order && css(["order:", ";"], props.$order), props => props.$renderAs === "list" && props.$width && css(["width:", ";"], props.$width), _ref5 => {
  let {
    $visibleFromBreakpoint
  } = _ref5;
  return $visibleFromBreakpoint && css(["", ""], {
    "display": "none"
  });
}, _ref6 => {
  let {
    $visibleFromBreakpoint
  } = _ref6;
  return $visibleFromBreakpoint === "sm" && css(["", ""], {
    "@media (min-width: 640px)": {
      "display": "flex"
    }
  });
}, _ref7 => {
  let {
    $visibleFromBreakpoint
  } = _ref7;
  return $visibleFromBreakpoint === "md" && css(["", ""], {
    "@media (min-width: 768px)": {
      "display": "flex"
    }
  });
}, _ref8 => {
  let {
    $visibleFromBreakpoint
  } = _ref8;
  return $visibleFromBreakpoint === "lg" && css(["", ""], {
    "@media (min-width: 1024px)": {
      "display": "flex"
    }
  });
}, _ref9 => {
  let {
    $visibleFromBreakpoint
  } = _ref9;
  return $visibleFromBreakpoint === "xl" && css(["", ""], {
    "@media (min-width: 1280px)": {
      "display": "flex"
    }
  });
}, _ref10 => {
  let {
    $visibleFromBreakpoint
  } = _ref10;
  return $visibleFromBreakpoint === "2xl" && css(["", ""], {
    "@media (min-width: 1536px)": {
      "display": "flex"
    }
  });
});
StyledEntityProperty.displayName = "StyledEntityProperty";
export const StyledEntityGroup = styled("div").withConfig({
  displayName: "Styles__StyledEntityGroup",
  componentId: "sc-bjeea8-2"
})(["", " ", ""], _ref11 => {
  let {
    $renderAs,
    $gap
  } = _ref11;
  return $renderAs === "grid" && css(["display:grid;grid-gap:", ";grid-template-columns:repeat(auto-fill,minmax(260px,1fr));"], $gap ? $gap + "px" : "initial");
}, props => props.$renderAs === "list" && css(["display:flex;flex-direction:column;"]));
StyledEntityGroup.displayName = "StyledEntityGroup";
export const StyledEntityActions = styled("div").withConfig({
  displayName: "Styles__StyledEntityActions",
  componentId: "sc-bjeea8-3"
})(["display:flex;flex-direction:column;align-items:center;", " ", ""], _ref12 => {
  let {
    $renderAs
  } = _ref12;
  return $renderAs === "grid" && css(["position:absolute;right:16px;top:20px;"]);
}, _ref13 => {
  let {
    $renderAs
  } = _ref13;
  return $renderAs === "list" && css(["justify-self:flex-end;"]);
});
//# sourceMappingURL=Styles.js.map