fix list object styling

This commit is contained in:
Shawn Erquhart 2017-10-23 12:25:55 -04:00
parent 040e654382
commit 2abdd34502
2 changed files with 11 additions and 9 deletions

View File

@ -64,14 +64,6 @@
display: none; display: none;
} }
.nc-listControl-objectControl {
display: block;
border-top: 28px solid rgba(0,0,0,0.1);
border-top-left-radius: 0;
}
.nc-listControl-expanded {}
.nc-listControl-collapsed { .nc-listControl-collapsed {
& .nc-listControl-objectLabel { & .nc-listControl-objectLabel {
display: block; display: block;
@ -90,3 +82,13 @@
width: 100%; width: 100%;
z-index: 1; z-index: 1;
} }
/**
* Styles for objects nested within lists.
*/
.nc-listControl-item .nc-listControl-objectControl {
display: block;
border-top: 28px solid rgba(0,0,0,0.1);
border-top-left-radius: 0;
}

View File

@ -150,7 +150,7 @@ export default class ListControl extends Component {
const { field, getAsset, onAddAsset, onRemoveAsset } = this.props; const { field, getAsset, onAddAsset, onRemoveAsset } = this.props;
const { itemsCollapsed } = this.state; const { itemsCollapsed } = this.state;
const collapsed = itemsCollapsed.get(index); const collapsed = itemsCollapsed.get(index);
const classNames = ['nc-listControl-item', collapsed ? 'nc-listControl-collapsed' : 'nc-listControl-expanded']; const classNames = ['nc-listControl-item', collapsed ? 'nc-listControl-collapsed' : ''];
return (<SortableListItem className={classNames.join(' ')} index={index} key={`item-${ index }`}> return (<SortableListItem className={classNames.join(' ')} index={index} key={`item-${ index }`}>
<button className="nc-listControl-toggleButton" onClick={this.handleToggle(index)}> <button className="nc-listControl-toggleButton" onClick={this.handleToggle(index)}>