From 86fff1d9dc7f5d5e5ca171cf79517af0d2fb1639 Mon Sep 17 00:00:00 2001
From: Caen De Silva <caen@desilva.se>
Date: Mon, 30 May 2022 13:44:41 +0200
Subject: [PATCH] Refactor inline styles to HydeFront Sass

---
 .../components/docs/search-input.blade.php    | 20 ----
 .../views/components/docs/search.blade.php    | 99 -------------------
 2 files changed, 119 deletions(-)

diff --git a/resources/views/components/docs/search-input.blade.php b/resources/views/components/docs/search-input.blade.php
index bb5eaf06..0b4b9d80 100644
--- a/resources/views/components/docs/search-input.blade.php
+++ b/resources/views/components/docs/search-input.blade.php
@@ -1,23 +1,3 @@
-<style>
-	#search-input {
-		font-size: 16px;
-		line-height: 1.5;
-		padding: 6px 10px;
-		background-color: #eee;
-		color: #000
-	}
-	.hyde-search-context {
-		margin-bottom: 10px;
-	}
-	.dark #search-input {
-		background-color: #333;
-		color: #fff;
-	}
-	.dark .hyde-search-context mark.search-highlight {
-		background-color: rgba(255, 255, 0, 0.75);
-	}
-</style>
-
 <div id="hyde-search">
     <noscript>
         The search feature requires JavaScript to be enabled in your browser.
diff --git a/resources/views/components/docs/search.blade.php b/resources/views/components/docs/search.blade.php
index 3e7b0e39..e447255e 100644
--- a/resources/views/components/docs/search.blade.php
+++ b/resources/views/components/docs/search.blade.php
@@ -1,5 +1,3 @@
-<noscript><style>#searchMenuButton,#searchMenuButtonMobile{display:none;}</style></noscript>
-
 <button id="searchMenuButton" onclick="toggleSearchMenu()" aria-label="Toggle search menu">
 	Search 
 	<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" role="presentation"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
@@ -9,103 +7,6 @@
 </button>
 @push('scripts')
 	
-<style>
-	#searchMenu {
-		padding: 16px;
-		max-width: 90vw;
-		width: 70ch;
-		min-height: 300px;
-		margin-top: 10vh;
-		border-radius: 8px;
-		z-index: 250;
-		max-height: 75vh;
-		overflow-y: hidden;
-	}
-	#search-results {
-		max-height: 60vh;
-		overflow-y: auto;
-		margin-top: 1.25em;
-	}
-	#search-status {
-		margin-top: 0;
-	}
-	#searchMenu input {
-		width: 100%;
-		padding: 8px 12px;
-		border-radius: 4px;
-		font-size: 1rem;
-		line-height: 1.5;
-		background-color: #fff;
-	}
-	.dark #searchMenu input {
-		background-color: #374151;
-		color: #fff;
-	}
-	#searchMenuBackdrop {
-		background-color: rgba(0,0,0,0.5);
-		z-index: 100;
-	}
-	#searchMenuCloseButton, #searchMenuButton {
-		position: absolute;
-		top: 1rem;
-		right: 1rem;
-		z-index: 150;
-		opacity: 0.75;
-		margin-right: 1rem;
-	}
-	#searchMenuCloseButton:hover {
-		opacity: 1;
-	}
-	#searchMenuButton svg {
-		float: left;
-		margin-right: 4px;
-	}
-	.dark #searchMenuButton svg {
-		fill: white;
-	}
-	#searchMenu footer {
-		font-family: monospace;
-		margin-top: auto;
-		margin-bottom: -0.5rem;
-		line-height: 1rem;
-		text-align: center;
-	}
-	@media screen and (max-width: 400px) {
-		#searchMenu footer {
-			display: none;
-		}
-	}
-	#searchMenuButtonMobile {
-		display: none;
-	}
-	@media (max-width: 767px)
-	{
-		#searchMenuButton {
-			display: none;
-		}
-		#searchMenuButtonMobile {
-			display: block;
-			position: fixed;
-			bottom: 1rem;
-			right: 1rem;
-			z-index: 50;
-			background: #ddd;
-			fill: #000;
-			border-radius: 50%;
-			padding: 0.5rem;
-			opacity: 0.75;
-		}
-		.dark #searchMenuButtonMobile {
-			background: #374151;
-			fill: #ddd;
-		}
-		#searchMenuButtonMobile:hover {
-			opacity: 1;
-		}
-	}
-	
-</style>
-
 <dialog id="searchMenu" class="prose dark:prose-invert bg-gray-100 dark:bg-gray-800">
 	@include('hyde::components.docs.search-input')
 	<footer>