@activecollab/components
Version:
ActiveCollab Components
14 lines • 1.56 kB
JavaScript
import styled, { css } from "styled-components";
import { BoxSizingStyle } from "../BoxSizingStyle";
const StyledMultiAvatarImg = css(["width:inherit;height:inherit;"]);
export const StyledMultiAvatarInner = styled.div.withConfig({
displayName: "Styles__StyledMultiAvatarInner",
componentId: "sc-k6nldn-0"
})(["overflow:hidden;position:absolute;display:inline-flex;"]);
export const StyledMultiAvatar = styled.div.withConfig({
displayName: "Styles__StyledMultiAvatar",
componentId: "sc-k6nldn-1"
})(["", " border-radius:100%;position:relative;overflow:hidden;", " ", " ", ""], BoxSizingStyle, props => props.$urlCount === 2 && css(["", ":first-child{left:0;img{transform:translateX(-20%);}}", ":last-child{right:0;img{transform:translateX(-20%);}}"], StyledMultiAvatarInner, StyledMultiAvatarInner), props => props.$urlCount === 3 && css(["", ":nth-child(1){left:0;img{transform:translateX(-20%);}}", ":nth-child(2){right:0;top:0;img{", "}}", ":nth-child(3){right:0;bottom:0;img{", "}}"], StyledMultiAvatarInner, StyledMultiAvatarInner, StyledMultiAvatarImg, StyledMultiAvatarInner, StyledMultiAvatarImg), props => props.$urlCount > 3 && css(["img{", "}", ":nth-child(1){left:0;}", ":nth-child(2){left:0;bottom:0;}", ":nth-child(3){right:0;top:0;}", ":nth-child(4){right:0;bottom:0;}"], StyledMultiAvatarImg, StyledMultiAvatarInner, StyledMultiAvatarInner, StyledMultiAvatarInner, StyledMultiAvatarInner));
StyledMultiAvatar.displayName = "StyledMultiAvatar";
StyledMultiAvatarInner.displayName = "StyledMultiAvatarInner";
//# sourceMappingURL=Styles.js.map