@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
61 lines (59 loc) • 1.43 kB
JavaScript
import styled, { css } from 'styled-components';
export const StyledMentionFinderItem = styled.div`
align-items: center;
cursor: pointer;
display: flex;
padding: 10px 8px;
&:not(:last-child) {
border-bottom: 1px solid
rgba(${({
theme
}) => theme['text-rgb']}, 0.15);
}
${({
$isActive,
theme
}) => $isActive && css`
background-color: ${theme['102']} ;
`}
`;
export const StyledMentionFinderItemImage = styled.img`
background-color: rgba(
${({
theme
}) => theme['text-rgb']},
0.1
);
border-radius: ${({
$shouldShowRoundImage
}) => $shouldShowRoundImage ? '50%' : 'initial'};
box-shadow: 0 0 0 1px
rgba(${({
theme
}) => theme['009-rgb']}, 0.08) inset;
flex: 0 0 auto;
height: 40px;
object-fit: cover;
overflow: hidden;
transition: border-radius 0.3s ease;
width: 40px;
`;
export const StyledMentionFinderItemContent = styled.div`
color: ${({
theme
}) => theme.text};
display: flex;
flex: 1 1 auto;
flex-direction: column;
justify-content: center;
line-height: normal;
margin-left: 10px;
min-width: 0;
`;
export const StyledMentionFinderItemContentName = styled.div``;
export const StyledMentionFinderItemContentInfo = styled.div`
font-size: 85%;
margin-top: 2px;
opacity: 0.75;
`;
//# sourceMappingURL=MentionFinderItem.styles.js.map