From 0bc168d5e98770b13439efa1872e1c39b71f6716 Mon Sep 17 00:00:00 2001
From: Tilman Frick <tilman.frick@sinnerschrader.com>
Date: Sat, 16 Dec 2017 00:32:42 +0100
Subject: [PATCH] feat(lsg): add styling to property boolean

---
 .../property-items/boolean-item/index.tsx     | 43 +++++++++++--------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/lsg/patterns/property-items/boolean-item/index.tsx b/src/lsg/patterns/property-items/boolean-item/index.tsx
index 08569f610..30bffa60f 100644
--- a/src/lsg/patterns/property-items/boolean-item/index.tsx
+++ b/src/lsg/patterns/property-items/boolean-item/index.tsx
@@ -20,53 +20,58 @@ const StyledBooleanItem = styled.div`
 `;
 
 const StyledLabelWrapper = styled.label`
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
+	display: block;
 	margin-bottom: ${getSpace(Size.XXL)}px;
 `;
 
-const indicatorWidth = 18;
-const indicatorHeight = 8;
+const indicatorWidth = 42;
+const indicatorHeight = 24;
 const indicatorBorderWidth = 1;
 
 const StyledIndicator = styled.span`
 	position: relative;
-	display: inline-block;
+	display: block;
 	width: ${indicatorWidth}px;
 	height: ${indicatorHeight}px;
-	border-radius: 5px;
+	border-radius: ${indicatorHeight/2}px;
+	background: ${colors.grey90.toString()};
 	box-sizing: border-box;
-	border: ${indicatorBorderWidth}px solid transparent;
-	box-shadow: 0 0 0 ${indicatorBorderWidth}px ${colors.grey70.toString()};
-	&::after {
+	box-shadow: inset 0 0 0 ${indicatorBorderWidth}px ${colors.grey70.toString()};
+
+	&:after {
 		content: '';
 		display: block;
-		width: 6px;
-		height: 6px;
+		width: ${indicatorHeight}px;
+		height: ${indicatorHeight}px;
+		border: ${indicatorBorderWidth}px solid ${colors.grey70.toString()};
 		transform: translateX(0px);
 		border-radius: 100%;
-		background: ${colors.grey70.toString()};
-		transition: transform ease-in-out 0.5s;
+		background: ${colors.white.toString()};
+		transition: all ease-in-out 0.25s;
+		box-sizing: border-box;
 	}
 	${(props: IndicatorProps) =>
 		props.checked
 			? `
 			background: ${colors.blue.toString()};
-			border-color: ${colors.blue.toString()};
-			box-shadow: 0 0 0 ${indicatorBorderWidth}px ${colors.blue.toString()};
-			&::after {
-				transform: translateX(${indicatorWidth / 2 + indicatorBorderWidth}px);
+			box-shadow: inset 0 0 0 ${indicatorBorderWidth}px ${colors.blue.toString()};
+
+			&:after {
+				transform: translateX(${indicatorWidth - indicatorHeight}px);
 				background: ${colors.white.toString()};
+				border-color: ${colors.blue.toString()};
 			}
 		`
 			: ''};
 `;
 
 const StyledLabel = styled.span`
-	font-size: 14px;
+	display: block;
+	font-size: 12px;
 	font-family: ${fonts().NORMAL_FONT};
 	color: ${colors.grey70.toString()};
+	text-transform: capitalize;
+	margin-bottom: ${getSpace(Size.XS)}px;
 `;
 
 const StyledInput = styled.input`