@activecollab/components
Version:
ActiveCollab Components
87 lines • 3.99 kB
JavaScript
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.$renderAs;
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.$renderAs;
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 = _ref3.$isCollection,
$background = _ref3.$background;
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 = _ref4.$renderAs,
$width = _ref4.$width;
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.$visibleFromBreakpoint;
return $visibleFromBreakpoint && css(["", ""], {
"display": "none"
});
}, _ref6 => {
let $visibleFromBreakpoint = _ref6.$visibleFromBreakpoint;
return $visibleFromBreakpoint === "sm" && css(["", ""], {
"@media (min-width: 640px)": {
"display": "flex"
}
});
}, _ref7 => {
let $visibleFromBreakpoint = _ref7.$visibleFromBreakpoint;
return $visibleFromBreakpoint === "md" && css(["", ""], {
"@media (min-width: 768px)": {
"display": "flex"
}
});
}, _ref8 => {
let $visibleFromBreakpoint = _ref8.$visibleFromBreakpoint;
return $visibleFromBreakpoint === "lg" && css(["", ""], {
"@media (min-width: 1024px)": {
"display": "flex"
}
});
}, _ref9 => {
let $visibleFromBreakpoint = _ref9.$visibleFromBreakpoint;
return $visibleFromBreakpoint === "xl" && css(["", ""], {
"@media (min-width: 1280px)": {
"display": "flex"
}
});
}, _ref0 => {
let $visibleFromBreakpoint = _ref0.$visibleFromBreakpoint;
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"
})(["", " ", ""], _ref1 => {
let $renderAs = _ref1.$renderAs,
$gap = _ref1.$gap;
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;", " ", ""], _ref10 => {
let $renderAs = _ref10.$renderAs;
return $renderAs === "grid" && css(["position:absolute;right:16px;top:20px;"]);
}, _ref11 => {
let $renderAs = _ref11.$renderAs;
return $renderAs === "list" && css(["justify-self:flex-end;"]);
});
//# sourceMappingURL=Styles.js.map