Move DropTargetRowContainer static styles to CSS class for user custo…

…mization (#1308)

* Adding a class to the drop target row container that allows the user to restyle

* Updating the css

* Use className instead of class

packages/react-data-grid-addons/src/draggable/DropTargetRowContainer.js

@@ -19,14 +19,9 @@ let rowDropTarget = (Row) => class extends React.Component {
     let overlayTop = this.props.idx * this.props.height;
     return connectDropTarget(<div>
       <Row ref={(node) => this.row = node} {...this.props}/>
-      {isOver && canDrop && <div style={{
-        position: 'absolute',
+      {isOver && canDrop && <div className="rowDropTarget" style={{
         top: overlayTop,
-        left: 0,
-        height: this.props.height,
-        width: '100%',
-        zIndex: 1,
-        borderBottom: '1px solid black'
+        height: this.props.height
       }} /> }
     </div>);
   }

themes/react-data-grid-drop-target.css

@@ -1,14 +1,14 @@
 .slideUp{
 	animation-name: slideUp;
-	-webkit-animation-name: slideUp;	
+	-webkit-animation-name: slideUp;
 
 	animation-duration: 1s;	
 	-webkit-animation-duration: 1s;
 
-	animation-timing-function: ease;	
+	animation-timing-function: ease;
 	-webkit-animation-timing-function: ease;
 
-	visibility: visible !important;			
+	visibility: visible !important;
 }
 
 @keyframes slideUp {
@@ -26,10 +26,10 @@
 	}
 	95%{
 		transform: translateY(2%);
-	}			
+	}
 	100% {
 		transform: translateY(0%);
-	}	
+	}
 }
 
 
@@ -48,8 +48,16 @@
 	}
 	95%{
 		-webkit-transform: translateY(2%);
-	}			
+	}
 	100% {
 		-webkit-transform: translateY(0%);
-	}	
+	}
+}
+
+.rowDropTarget {
+	position: absolute;
+	left: 0;
+	width: 100%;
+	z-index: 1;
+	border-bottom: 1px solid black;
 }