@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
78 lines (76 loc) • 1.63 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(${_ref => {
let {
theme
} = _ref;
return theme['text-rgb'];
}}, 0.15);
}
${_ref2 => {
let {
$isActive,
theme
} = _ref2;
return $isActive && css`
background-color: ${theme['102']} ;
`;
}}
`;
export const StyledMentionFinderItemImage = styled.img`
background-color: rgba(
${_ref3 => {
let {
theme
} = _ref3;
return theme['text-rgb'];
}},
0.1
);
border-radius: ${_ref4 => {
let {
$shouldShowRoundImage
} = _ref4;
return $shouldShowRoundImage ? '50%' : 'initial';
}};
box-shadow: 0 0 0 1px
rgba(${_ref5 => {
let {
theme
} = _ref5;
return theme['009-rgb'];
}}, 0.08) inset;
flex: 0 0 auto;
height: 40px;
overflow: hidden;
transition: border-radius 0.3s ease;
width: 40px;
`;
export const StyledMentionFinderItemContent = styled.div`
color: ${_ref6 => {
let {
theme
} = _ref6;
return 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