feat(lsg): add hover to property items

meetalva · Dec 16, 2017 · 2c1d6ee · 2c1d6ee
1 parent 0bc168d
commit 2c1d6ee
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/src/lsg/patterns/property-items/boolean-item/index.tsx b/src/lsg/patterns/property-items/boolean-item/index.tsx
@@ -21,7 +21,7 @@ const StyledBooleanItem = styled.div`
 
 const StyledLabelWrapper = styled.label`
 	display: block;
-	margin-bottom: ${getSpace(Size.XXL)}px;
+	margin-bottom: ${getSpace(Size.L)}px;
 `;
 
 const indicatorWidth = 42;

diff --git a/src/lsg/patterns/property-items/enum-item/index.tsx b/src/lsg/patterns/property-items/enum-item/index.tsx
@@ -27,9 +27,15 @@ const StyledSelect = styled.select`
 	font-family: ${fonts().NORMAL_FONT};
 	color: ${colors.grey36.toString()};
 	font-size: 15px;
-	border-bottom: 1px solid ${colors.grey70.toString()};
+	border-bottom: 1px solid transparent;
 	padding-bottom: ${getSpace(Size.M)/2}px;
-	margin-bottom: ${getSpace(Size.XXL)}px;
+	margin-bottom: ${getSpace(Size.L)}px;
+	transition: all 0.2s;
+	
+	&:hover {
+		color: ${colors.black.toString()};
+		border-color: ${colors.grey70.toString()};
+	}
 	
 	&:focus {
 		outline: none;

diff --git a/src/lsg/patterns/property-items/string-item/index.tsx b/src/lsg/patterns/property-items/string-item/index.tsx
@@ -30,18 +30,23 @@ const StyledInput = styled.input`
 	width: 100%;
 	text-overflow: ellipsis;
 	border: none;
-	border-bottom: 1px solid ${colors.grey70.toString()};
+	border-bottom: 1px solid transparent;
 	background: transparent;
 	font-family: ${fonts().NORMAL_FONT};
 	font-size: 15px;
 	padding-bottom: ${getSpace(Size.M)/2}px;
 	color: ${colors.grey36.toString()};
-	
-	margin-bottom: ${getSpace(Size.XXL)}px;
+	margin-bottom: ${getSpace(Size.L)}px;
+	transition: all 0.2s;
 	
 	::-webkit-input-placeholder {
 		color: ${colors.grey70.toString()};
 	}
+
+	&:hover {
+		color: ${colors.black.toString()};
+		border-color: ${colors.grey70.toString()};
+	}
 	
 	&:focus {
 		outline: none;