v3/packages/design-system/molecules/user-avatar-group/UserAvatarGroup.styled.ts
2023-06-09 03:21:26 -04:00

30 lines
700 B
TypeScript

import { onSmallScreen } from '@roleypoly/design-system/atoms/breakpoints';
import { palette } from '@roleypoly/design-system/atoms/colors';
import styled, { css } from 'styled-components';
export const Collapse = styled.div<{ preventCollapse: boolean }>`
${(props) =>
!props.preventCollapse &&
onSmallScreen(css`
display: none;
`)}
`;
export const Group = styled.div`
display: flex;
align-items: center;
justify-content: flex-end;
white-space: nowrap;
`;
export const Discriminator = styled.span`
color: ${palette.taupe500};
font-size: 75%;
padding-left: 5px;
`;
export const GroupText = styled.span`
position: relative;
top: -2px;
padding-right: 5px;
`;