fix list object styling

decaporg · Oct 24, 2017 · 2abdd34 · 2abdd34
1 parent 040e654
commit 2abdd34
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/src/components/Widgets/ListControl.css b/src/components/Widgets/ListControl.css
@@ -64,14 +64,6 @@
   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-objectLabel {
     display: block;
@@ -90,3 +82,13 @@
   width: 100%;
   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;
+}
+
diff --git a/src/components/Widgets/ListControl.js b/src/components/Widgets/ListControl.js
@@ -150,7 +150,7 @@ export default class ListControl extends Component {
     const { field, getAsset, onAddAsset, onRemoveAsset } = this.props;
     const { itemsCollapsed } = this.state;
     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 }`}>
       <button className="nc-listControl-toggleButton" onClick={this.handleToggle(index)}>