Updated search interaction

docs/index.html

@@ -27,6 +27,7 @@
 
 			<div id="contentWrapper">
 				<input placeholder="Search" type="text" id="filter" autocorrect="off" autocapitalize="off" spellcheck="false" />
+				<div id="exitSearchButton"></div>
 
 				<select id="language">
 					<option value="en">en</option>
@@ -91,6 +92,7 @@
 			var panel = document.getElementById( 'panel' );
 			var content = document.getElementById( 'content' );
 			var expandButton = document.getElementById( 'expandButton' );
+			var exitSearchButton = document.getElementById( 'exitSearchButton' );
 			var panelScrim = document.getElementById( 'panelScrim' );
 			var filterInput = document.getElementById( 'filter' );
 			var iframe = document.querySelector( 'iframe' );
@@ -120,6 +122,19 @@
 
 
 			// Functionality for search/filter input field
+ 			filterInput.onfocus = function ( event ) {
+
+				panel.classList.add('searchFocused');
+
+			}
+
+			exitSearchButton.onclick = function( event ) {
+
+				filterInput.value = '';
+				updateFilter();
+				panel.classList.remove('searchFocused');
+
+			}
 
 			filterInput.oninput = function ( event ) {
 

docs/page.css

@@ -161,8 +161,8 @@ strong {
 
 #button {
 	position: fixed;
-	bottom: 16px;
-	right: 16px;
+	bottom: 12px;
+	right: 12px;
 
 	padding: 8px;
 	border-radius: 50%;
@@ -179,6 +179,7 @@ strong {
 
 	#button img {
 		display: block;
+		width: 20px;
 	}
 
 a.permalink {

examples/index.html

@@ -12,8 +12,8 @@
 			}
 			#button {
 				position: fixed;
-				bottom: 16px;
-				right: 16px;
+				bottom: 12px;
+				right: 12px;
 
 				padding: 8px;
 				border-radius: 50%;
@@ -30,6 +30,7 @@
 
 			#button img {
 				display: block;
+				width: 20px;
 			}
 		</style>
 	</head>
@@ -52,6 +53,7 @@
 
 			<div id="contentWrapper">
 				<input placeholder="Search" type="text" id="filter" autocorrect="off" autocapitalize="off" spellcheck="false" />
+				<div id="exitSearchButton"></div>
 
 				<select id="language">
 					<option value="en">en</option>
@@ -84,6 +86,7 @@
 		var viewer = document.getElementById( 'viewer' );
 
 		var filterInput = document.getElementById( 'filter' );
+		var exitSearchButton = document.getElementById( 'exitSearchButton' );
 
 		var expandButton = document.getElementById( 'expandButton' );
 		expandButton.addEventListener( 'click', function ( event ) {
@@ -193,6 +196,19 @@
 		}
 
 		// filter
+		filterInput.onfocus = function ( event ) {
+
+			panel.classList.add('searchFocused');
+
+		}
+
+		exitSearchButton.onclick = function( event ) {
+
+			filterInput.value = '';
+			updateFilter();
+			panel.classList.remove('searchFocused');
+
+		}
 
 		filterInput.addEventListener( 'input', function( e ) {
 

files/ic_close_black_24dp.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#000000">
+    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

files/main.css

@@ -3,6 +3,7 @@
 	--text-color: #444;
 	--border-style: 1px solid #EEE;
 	--header-height: 48px;
+	--panel-padding: 16px;
 }
 
 @font-face {
@@ -83,6 +84,34 @@ h1 a {
 	transition: 0s 0s height;
 }
 
+	#panel #exitSearchButton {
+		position: absolute;
+		width: 40px;
+		height: 40px;
+		top: 4px;
+		right: calc(var(--panel-padding) - 12px);
+		z-index: 1000;
+		display: none;
+		background-size: 20px 20px;
+		background-position: 50% 50%;
+		background-repeat: no-repeat;
+		background-image: url(../files/ic_close_black_24dp.svg);
+		cursor: pointer;
+	}
+
+	#panel.searchFocused #exitSearchButton {
+		display: block;
+	}
+
+	#panel.searchFocused #language {
+		display: none;
+	}
+
+	#panel.searchFocused #filter {
+		background-image: none;
+		padding-left: var(--panel-padding);
+	}
+
 	#panel #expandButton {
 		margin-right: 14px;
 		margin-left: 4px;
@@ -100,7 +129,7 @@ h1 a {
 	}
 
 		#panel #sections * {
-			padding: 0 16px;
+			padding: 0 var(--panel-padding);
 			height: 100%;
 			position: relative;
 			display: flex;
@@ -166,7 +195,7 @@ h1 a {
 	#panel #content {
 		flex: 1;
 		overflow: scroll;
-		padding: 0 16px 24px 16px;
+		padding: 0 var(--panel-padding) 24px var(--panel-padding);
 	}
 
 		#panel #content ul {