Updated position of check, arrow in ListItem

• Updated:
- position of check, arrow in ListItem
This commit is contained in:
mgabdev 2020-12-31 16:39:46 -05:00
parent 2fc8401257
commit 3224ad2546
2 changed files with 18 additions and 10 deletions

View File

@ -85,6 +85,13 @@ class ListItem extends React.PureComponent {
maxW100PC42PX: !hideArrow || showActive, maxW100PC42PX: !hideArrow || showActive,
}) })
const arrowClasses = CX({
mlAuto: !showActive,
ml10: showActive,
cSecondary: 1,
flexShrink1: 1,
})
return ( return (
<Button <Button
to={to} to={to}
@ -126,21 +133,21 @@ class ListItem extends React.PureComponent {
} }
</div> </div>
{
!hideArrow &&
<Icon
id={!!actionIcon ? actionIcon : 'angle-right'}
size='10px'
className={[_s.mlAuto, _s.cSecondary, _s.flexShrink1].join(' ')}
/>
}
{ {
!!showActive && !!showActive &&
<input <input
type='radio' type='radio'
checked={isActive} checked={isActive}
className={[_s.mlAuto, _s.flexShrink1].join(' ')} className={[_s.mlAuto, _s.flexShrink1, _s.mt0].join(' ')}
/>
}
{
!hideArrow &&
<Icon
id={!!actionIcon ? actionIcon : 'angle-right'}
size='10px'
className={arrowClasses}
/> />
} }
</Button> </Button>

View File

@ -831,6 +831,7 @@ pre {
.mt10 { margin-top: 10px; } .mt10 { margin-top: 10px; }
.mt5 { margin-top: 5px; } .mt5 { margin-top: 5px; }
.mt2 { margin-top: 2px; } .mt2 { margin-top: 2px; }
.mt0 { margin-top: 0; }
.mtAuto { margin-top: auto; } .mtAuto { margin-top: auto; }
.mtNeg5PX { margin-top: -5px; } .mtNeg5PX { margin-top: -5px; }
.mtNeg26PX { margin-top: -26px; } .mtNeg26PX { margin-top: -26px; }