feat(lsg): add animation to element drag placeholder

meetalva · Dec 14, 2017 · f72b27c · f72b27c
1 parent 9d9d2b3
commit f72b27c
Showing 1 changed file with 21 additions and 1 deletion.
diff --git a/src/lsg/patterns/element/index.tsx b/src/lsg/patterns/element/index.tsx
@@ -71,13 +71,33 @@ const StyledPlaceholder = styled.div`
 	position: relative;
     z-index: 15;
     height: 10px;
+    width: 100%;
     margin-top: -5px;
     margin-bottom: -5px;
 	border-radius: 3px;
+    
+    &::after {
+        content:'';
+        display: block;
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        left: 0;
+        top: 0;
+        background: ${colors.grey90.toString()};
+        transform: scale(1,0);
+        transition: transform 0.2s;
+    }
+    
+    
 	${(props: StyledPlaceholder) =>
 		props.highlightPlaceholder
 			? `
-			background: ${colors.grey90.toString()};
+			
+
+            &:after {
+                transform: scale(1,1);
+            }
 		`
 			: ''};
 `;