Redo the tableList baseline alignment

This commit is contained in:
cyril lopez 2017-08-17 15:35:25 +02:00
parent a568c54e5f
commit 34e3af2d0b
2 changed files with 7 additions and 23 deletions

View File

@ -64,7 +64,6 @@ class TableList extends React.Component { // eslint-disable-line react/prefer-st
</li> </li>
{map(this.props.rowItems, (rowItem, key) => ( {map(this.props.rowItems, (rowItem, key) => (
<li key={key} onClick={this.goTo}> <li key={key} onClick={this.goTo}>
<div className={styles.hovered} />
<div className={`${styles.liInnerContainer} row`}> <div className={`${styles.liInnerContainer} row`}>
<div className="col-md-1"><i className={`fa ${rowItem.icon}`} /></div> <div className="col-md-1"><i className={`fa ${rowItem.icon}`} /></div>
<div className="col-md-2">{startCase(rowItem.name)}</div> <div className="col-md-2">{startCase(rowItem.name)}</div>

View File

@ -28,36 +28,22 @@
padding: 0; padding: 0;
list-style: none; list-style: none;
> li:first-child { > li:first-child {
margin-bottom: .5rem; margin-top: 0rem;
border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0;
background-color: #F3F3F4; background-color: #F3F3F4;
// background-color: rgba(16,22,34,0.04);
} }
> li:not(:first-child) { > li:not(:first-child) {
position: relative; position: relative;
margin-bottom: .2rem; height: 5.4rem;
line-height: 5.4rem;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
.hovered { background-color: #F7F8F8;
position: absolute;
width: 100%;
height: 5.4rem;
top: -.2rem;
background-color: #F7F8F8;
}
} }
} }
> li:nth-child(2) { > li:nth-child(2) {
&:hover { height: 5.7rem;
.hovered { padding-top: .3rem;
position: absolute;
width: 100%;
height: 5.6rem;
top: -.5rem;
background-color: #F7F8F8;
}
}
} }
> li:last-child { > li:last-child {
margin-bottom: 0; margin-bottom: 0;
@ -71,7 +57,7 @@
.liHeaderContainer { .liHeaderContainer {
height: 3rem; height: 3rem;
margin: 0; margin: 0;
padding: 0 4.6rem 0 1.9rem; padding: 0 4.6rem .3rem 1.9rem;
font-size: 1.3rem; font-size: 1.3rem;
line-height: 1.6rem; line-height: 1.6rem;
font-weight: 600; font-weight: 600;
@ -85,7 +71,6 @@
} }
.liInnerContainer { .liInnerContainer {
height: 5.2rem;
margin: 0 3.2rem 0 1.9rem ; margin: 0 3.2rem 0 1.9rem ;
padding: 0 1.4rem 0 0rem; padding: 0 1.4rem 0 0rem;
border-bottom: 1px solid rgba(14,22,34,0.04); border-bottom: 1px solid rgba(14,22,34,0.04);