From fcc4877b23e071ecbb5952b223f438e4c8abbb4d Mon Sep 17 00:00:00 2001
From: Yuin Chien <yuin@google.com>
Date: Wed, 15 May 2019 23:21:49 -0700
Subject: [PATCH] Refined menu button

---
 docs/index.html     |  2 +-
 examples/index.html |  2 +-
 files/main.css      | 17 +++++++++++++++--
 index.html          |  2 +-
 4 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 94578d2963..024e460ea4 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -34,7 +34,7 @@
 					<a href="../examples/#webgl_animation_cloth">examples</a>
 				</div>
 
-				<img id="expandButton" src="../files/ic_menu_black_24dp.svg">
+				<div id="expandButton"></div>
 			</div>
 
 			<div id="panelScrim"></div>
diff --git a/examples/index.html b/examples/index.html
index d7adae1b0b..b0e3f93a17 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -37,7 +37,7 @@
 					<span class="selected">examples</span>
 				</div>
 
-				<img id="expandButton" src="../files/ic_menu_black_24dp.svg">
+				<div id="expandButton"></div>
 			</div>
 
 			<div id="panelScrim"></div>
diff --git a/files/main.css b/files/main.css
index abf10db4cf..3efdff153b 100644
--- a/files/main.css
+++ b/files/main.css
@@ -140,9 +140,16 @@ h1 a {
 	}
 
 	#panel #expandButton {
-		margin-right: 14px;
-		margin-left: 2px;
+		width: 3rem;
+		height: 3rem;
+		margin-right: 4px;
+		margin-left: 4px;
 		display: none;
+		cursor: pointer;
+		background-size: var(--icon-size);
+		background-position: 50% 50%;
+		background-repeat: no-repeat;
+		background-image: url(../files/ic_menu_black_24dp.svg);
 	}
 
 	#panel #sections {
@@ -257,10 +264,14 @@ h1 a {
 
 		#panel #content h2 {
 			margin-top: 2rem;
+			border-top: var(--border-style);
+	    padding-top: .8rem;
 		}
 
 		#panel #content h2:first-child {
 			margin-top: 1rem !important;
+			border-top: none;
+			padding-top: 0;
 		}
 
 		#panel #content a {
@@ -285,6 +296,8 @@ h1 a {
 			margin-bottom: 2px;
 			padding-bottom: 0px;
 			margin-top: 1.2rem;
+			border-top: none;
+			padding-top: .4rem;
 		}
 
 .spacer {
diff --git a/index.html b/index.html
index df3fc4e6fc..6b46c2ab11 100644
--- a/index.html
+++ b/index.html
@@ -35,7 +35,7 @@
 					<a href="examples/#webgl_animation_cloth">examples</a>
 				</div>
 
-				<img id="expandButton" src="files/ic_menu_black_24dp.svg">
+				<div id="expandButton"></div>
 			</div>
 
 			<div id="panelScrim"></div>
-- 
GitLab