mirror of
https://github.com/yldio/copilot.git
synced 2024-11-28 14:10:04 +02:00
Merge pull request #328 from yldio/fix/tooltip
fixing outline, padding and position of tooltip
This commit is contained in:
commit
50971def23
@ -41,15 +41,15 @@ const StyledAvatarWrapper = styled.div`
|
|||||||
|
|
||||||
${pseudoEl({
|
${pseudoEl({
|
||||||
top: '50%',
|
top: '50%',
|
||||||
right: remcalc(-10)
|
right: '0'
|
||||||
})}
|
})}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledTooltipWrapper = styled.div`
|
const StyledTooltipWrapper = styled.div`
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: ${remcalc-18};
|
right: ${remcalc(-18)};
|
||||||
bottom: ${remcalc(-180)};
|
bottom: ${remcalc(-140)};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledName = styled.span`
|
const StyledName = styled.span`
|
||||||
@ -64,6 +64,7 @@ const StyledName = styled.span`
|
|||||||
const EmptyButton = styled.button`
|
const EmptyButton = styled.button`
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
|
padding-right: ${remcalc(20)};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledAvatar = styled(Avatar)`
|
const StyledAvatar = styled(Avatar)`
|
||||||
|
@ -6,17 +6,16 @@ import React from 'react';
|
|||||||
|
|
||||||
const ItemPadder = 9;
|
const ItemPadder = 9;
|
||||||
const WrapperPadder = 24;
|
const WrapperPadder = 24;
|
||||||
const ulPadder = `${WrapperPadder - ItemPadder} 0`;
|
|
||||||
|
|
||||||
const StyledList = styled.ul`
|
const StyledList = styled.ul`
|
||||||
position: relative;
|
position: relative;
|
||||||
background: #fff;
|
background: ${colors.base.white};
|
||||||
color: #646464;
|
color: ${colors.base.text};
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: ${remcalc(ulPadder)};
|
padding: 0;
|
||||||
min-width: ${remcalc(200)};
|
min-width: ${remcalc(200)};
|
||||||
|
|
||||||
${props => props.styles}
|
${props => props.styles}
|
||||||
@ -42,7 +41,7 @@ const StyledList = styled.ul`
|
|||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
border-color: rgba(255, 255, 255, 0);
|
border-color: rgba(255, 255, 255, 0);
|
||||||
border-bottom-color: #fff;
|
border-bottom-color: ${colors.base.white};
|
||||||
border-width: ${remcalc(10)};
|
border-width: ${remcalc(10)};
|
||||||
margin-left: ${remcalc(-10)};
|
margin-left: ${remcalc(-10)};
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user