From ca28c42eadcb676e0dc221df4e6fc176c9e9ca95 Mon Sep 17 00:00:00 2001
From: Robert Elliott <robert.elliott@automattic.com>
Date: Tue, 4 Dec 2018 13:57:12 +0200
Subject: [PATCH] separate legend styling out

---
 .../components/src/chart/d3chart/legend.scss  | 214 +++++++++++++++++
 .../components/src/chart/d3chart/style.scss   | 219 +-----------------
 2 files changed, 218 insertions(+), 215 deletions(-)
 create mode 100644 plugins/woocommerce-admin/packages/components/src/chart/d3chart/legend.scss

diff --git a/plugins/woocommerce-admin/packages/components/src/chart/d3chart/legend.scss b/plugins/woocommerce-admin/packages/components/src/chart/d3chart/legend.scss
new file mode 100644
index 00000000000..1d574a3a91c
--- /dev/null
+++ b/plugins/woocommerce-admin/packages/components/src/chart/d3chart/legend.scss
@@ -0,0 +1,214 @@
+/** @format */
+
+.woocommerce-legend {
+	&.has-total {
+		padding-bottom: 50px;
+		position: relative;
+	}
+
+	&.woocommerce-legend__direction-column {
+		border-right: 1px solid $core-grey-light-700;
+		min-width: 320px;
+
+		.woocommerce-chart__footer & {
+			border-right: none;
+		}
+	}
+}
+
+.woocommerce-legend__list {
+	color: $black;
+	display: flex;
+	height: 100%;
+	margin: 0;
+
+	.woocommerce-legend__direction-column & {
+		flex-direction: column;
+		height: 300px;
+		overflow: auto;
+
+		.woocommerce-chart__footer & {
+			border-top: 1px solid $core-grey-light-700;
+			height: 100%;
+			max-height: none;
+			min-height: none;
+		}
+	}
+
+	.has-total.woocommerce-legend__direction-column & {
+		height: 250px;
+
+		.woocommerce-chart__footer & {
+			height: auto;
+			max-height: 220px;
+			min-height: none;
+		}
+	}
+
+	.woocommerce-legend__direction-row & {
+		flex-direction: row;
+	}
+}
+
+.woocommerce-legend__item {
+	& > button {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: $white;
+		color: $core-grey-dark-500;
+		display: inline-flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		justify-content: space-between;
+		width: 100%;
+		border: none;
+		padding: 0;
+
+		.woocommerce-legend__item-container {
+			display: flex;
+			flex-direction: row;
+			flex-wrap: nowrap;
+			justify-content: space-between;
+			position: relative;
+			padding: 3px 0 3px 24px;
+			cursor: pointer;
+			font-size: 13px;
+			user-select: none;
+			width: 100%;
+
+			&:hover {
+				input {
+					~ .woocommerce-legend__item-checkmark {
+						background-color: $core-grey-light-200;
+					}
+				}
+			}
+
+			.woocommerce-legend__item-checkmark {
+				border: 1px solid $core-grey-light-900;
+				position: absolute;
+				top: 4px;
+				left: 0;
+				height: 16px;
+				width: 16px;
+				background-color: $white;
+
+				&::after {
+					content: '';
+					position: absolute;
+					display: none;
+				}
+
+				&.woocommerce-legend__item-checkmark-checked {
+					background-color: currentColor;
+					border-color: currentColor;
+
+					&::after {
+						display: block;
+						left: 5px;
+						top: 2px;
+						width: 3px;
+						height: 6px;
+						border: solid $white;
+						border-width: 0 2px 2px 0;
+						transform: rotate(45deg);
+					}
+				}
+			}
+
+			.woocommerce-legend__item-total {
+				font-weight: bold;
+			}
+		}
+
+		&:focus {
+			outline: none;
+
+			.woocommerce-legend__item-container {
+				.woocommerce-legend__item-checkmark {
+					outline: 2px solid $core-grey-light-900;
+				}
+			}
+		}
+
+		&:hover {
+			background-color: $core-grey-light-100;
+		}
+	}
+
+	.woocommerce-legend__direction-column & {
+		margin: 2px 0;
+		padding: 0;
+
+		& > button {
+			height: 32px;
+			padding: 0 17px;
+		}
+
+		&:first-child {
+			margin-top: $gap-small;
+		}
+
+		&:last-child::after {
+			content: '';
+			display: block;
+			height: $gap-small;
+			width: 100%;
+		}
+	}
+
+	.woocommerce-legend__direction-row & {
+		padding: 0;
+		margin: 0;
+
+		& > button {
+			padding: 0 17px;
+
+			.woocommerce-legend__item-container {
+				height: 50px;
+				align-items: center;
+
+				.woocommerce-legend__item-checkmark {
+					top: 17px;
+				}
+
+				.woocommerce-legend__item-title {
+					margin-right: 17px;
+				}
+			}
+		}
+	}
+}
+
+.woocommerce-legend__total {
+	align-items: center;
+	background: $white;
+	border-top: 1px solid $core-grey-light-700;
+	bottom: 0;
+	color: $core-grey-dark-500;
+	display: flex;
+	height: 50px;
+	justify-content: center;
+	left: 0;
+	position: absolute;
+	right: 0;
+	text-transform: uppercase;
+
+	&::before {
+		background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
+		bottom: 100%;
+		content: '';
+		height: 20px;
+		left: 0;
+		opacity: 0;
+		pointer-events: none;
+		position: absolute;
+		right: 0;
+		transition: opacity 0.3s;
+	}
+
+	.is-scrollable &::before {
+		opacity: 1;
+	}
+}
diff --git a/plugins/woocommerce-admin/packages/components/src/chart/d3chart/style.scss b/plugins/woocommerce-admin/packages/components/src/chart/d3chart/style.scss
index 91529ea6e17..00ba3b676dd 100644
--- a/plugins/woocommerce-admin/packages/components/src/chart/d3chart/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/chart/d3chart/style.scss
@@ -1,4 +1,8 @@
 /** @format */
+/**
+ * Internal Dependencies
+ */
+@import './legend.scss';
 
 .d3-chart__container {
 	position: relative;
@@ -132,218 +136,3 @@
 		}
 	}
 }
-
-/** @format */
-
-.woocommerce-legend {
-	&.has-total {
-		padding-bottom: 50px;
-		position: relative;
-	}
-
-	&.woocommerce-legend__direction-column {
-		border-right: 1px solid $core-grey-light-700;
-		min-width: 320px;
-
-		.woocommerce-chart__footer & {
-			border-right: none;
-		}
-	}
-}
-
-.woocommerce-legend__list {
-	color: $black;
-	display: flex;
-	height: 100%;
-	margin: 0;
-
-	.woocommerce-legend__direction-column & {
-		flex-direction: column;
-		height: 300px;
-		overflow: auto;
-
-		.woocommerce-chart__footer & {
-			border-top: 1px solid $core-grey-light-700;
-			height: 100%;
-			max-height: none;
-			min-height: none;
-		}
-	}
-
-	.has-total.woocommerce-legend__direction-column & {
-		height: 250px;
-
-		.woocommerce-chart__footer & {
-			height: auto;
-			max-height: 220px;
-			min-height: none;
-		}
-	}
-
-	.woocommerce-legend__direction-row & {
-		flex-direction: row;
-	}
-}
-
-.woocommerce-legend__item {
-	& > button {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		background-color: $white;
-		color: $core-grey-dark-500;
-		display: inline-flex;
-		flex-direction: row;
-		flex-wrap: nowrap;
-		justify-content: space-between;
-		width: 100%;
-		border: none;
-		padding: 0;
-
-		.woocommerce-legend__item-container {
-			display: flex;
-			flex-direction: row;
-			flex-wrap: nowrap;
-			justify-content: space-between;
-			position: relative;
-			padding: 3px 0 3px 24px;
-			cursor: pointer;
-			font-size: 13px;
-			user-select: none;
-			width: 100%;
-
-			&:hover {
-				input {
-					~ .woocommerce-legend__item-checkmark {
-						background-color: $core-grey-light-200;
-					}
-				}
-			}
-
-			.woocommerce-legend__item-checkmark {
-				border: 1px solid $core-grey-light-900;
-				position: absolute;
-				top: 4px;
-				left: 0;
-				height: 16px;
-				width: 16px;
-				background-color: $white;
-
-				&::after {
-					content: '';
-					position: absolute;
-					display: none;
-				}
-
-				&.woocommerce-legend__item-checkmark-checked {
-					background-color: currentColor;
-					border-color: currentColor;
-
-					&::after {
-						display: block;
-						left: 5px;
-						top: 2px;
-						width: 3px;
-						height: 6px;
-						border: solid $white;
-						border-width: 0 2px 2px 0;
-						transform: rotate(45deg);
-					}
-				}
-			}
-
-			.woocommerce-legend__item-total {
-				font-weight: bold;
-			}
-		}
-
-		&:focus {
-			outline: none;
-
-			.woocommerce-legend__item-container {
-				.woocommerce-legend__item-checkmark {
-					outline: 2px solid $core-grey-light-900;
-				}
-			}
-		}
-
-		&:hover {
-			background-color: $core-grey-light-100;
-		}
-	}
-
-	.woocommerce-legend__direction-column & {
-		margin: 2px 0;
-		padding: 0;
-
-		& > button {
-			height: 32px;
-			padding: 0 17px;
-		}
-
-		&:first-child {
-			margin-top: $gap-small;
-		}
-
-		&:last-child::after {
-			content: '';
-			display: block;
-			height: $gap-small;
-			width: 100%;
-		}
-	}
-
-	.woocommerce-legend__direction-row & {
-		padding: 0;
-		margin: 0;
-
-		& > button {
-			padding: 0 17px;
-
-			.woocommerce-legend__item-container {
-				height: 50px;
-				align-items: center;
-
-				.woocommerce-legend__item-checkmark {
-					top: 17px;
-				}
-
-				.woocommerce-legend__item-title {
-					margin-right: 17px;
-				}
-			}
-		}
-	}
-}
-
-.woocommerce-legend__total {
-	align-items: center;
-	background: $white;
-	border-top: 1px solid $core-grey-light-700;
-	bottom: 0;
-	color: $core-grey-dark-500;
-	display: flex;
-	height: 50px;
-	justify-content: center;
-	left: 0;
-	position: absolute;
-	right: 0;
-	text-transform: uppercase;
-
-	&::before {
-		background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
-		bottom: 100%;
-		content: '';
-		height: 20px;
-		left: 0;
-		opacity: 0;
-		pointer-events: none;
-		position: absolute;
-		right: 0;
-		transition: opacity 0.3s;
-	}
-
-	.is-scrollable &::before {
-		opacity: 1;
-	}
-}