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

fix list item vertical alignment

Browse Source 
fixes #391
This commit is contained in:
Sérgio Ramos 2017-03-22 12:15:09 +00:00 committed by Judit Greskovits
parent c7121538bc
commit 5fd98995b0
3 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/src/components/list/meta.js
View File

@ -1,7 +1,7 @@
import styled from 'styled-components'; import styled from 'styled-components';
import { Subscriber } from 'react-broadcast'; import { Subscriber } from 'react-broadcast';
import { Baseline } from '../../shared/composers'; import { Baseline } from '../../shared/composers';
import { is } from '../../shared/functions'; import { is, isNot } from '../../shared/functions';
import Column from '../column'; import Column from '../column';
import Row from '../row'; import Row from '../row';
import View from './view'; import View from './view';
@ -11,6 +11,10 @@ const InnerRow = styled(Row)`
display: block; display: block;
height: 100%; height: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
${is('collapsed')` ${is('collapsed')`
display: flex; display: flex;
`}; `};

7
ui/src/components/list/options.js
View File

@ -50,14 +50,15 @@ const StyledButton = styled(Button)`
const StyledContainer = styled.div` const StyledContainer = styled.div`
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 35%; /* I don't know why this doesn't center with 50% */
`; `;
const StyledCircle = styled.div` const StyledCircle = styled.div`
margin: 0 0 2px -2px; margin: 0 0 ${remcalc(2)} ${remcalc(-2)};
border-radius: 50%; border-radius: 50%;
background-color: ${colors.base.white}; background-color: ${colors.base.white};
width: 4px; width: ${remcalc(4)};
height: 4px; height: ${remcalc(4)};
`; `;
const Options = ({ const Options = ({

2
ui/src/components/list/view.js
View File

@ -17,7 +17,7 @@ const StyledView = styled(Row)`
`}; `};
${is('collapsed')` ${is('collapsed')`
height: ${remcalc(48)}; height: ${remcalc(47)};
`}; `};
${is('fromHeader')` ${is('fromHeader')`