Spearhead
/
joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #328 from yldio/fix/tooltip 

fixing outline, padding and position of tooltip
This commit is contained in:
Alex Windett 2017-02-28 10:47:52 +00:00 committed by GitHub
parent e78a9d2d28 9e850e0429
commit 50971def23
2 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/components/header/index.js
View File

@ -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)`

9
ui/src/components/tooltip/index.js
View File

@ -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)};
} }