chore: Scope styles for SearchableJson.svelte (#540)

svelte-society · Dec 21, 2023 · 88e454e · 88e454e
1 parent 2c9fca3
commit 88e454e
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 43 deletions.
diff --git a/src/lib/SearchableJson.svelte b/src/lib/SearchableJson.svelte
@@ -91,3 +91,49 @@
 		{/each}
 	</section>
 </SearchLayout>
+
+<style>
+	.controls {
+		display: grid;
+		justify-content: stretch;
+		align-items: center;
+		gap: var(--s-4);
+		font-family: Overpass;
+		position: relative;
+	}
+	.inputs {
+		display: grid;
+		gap: var(--s-2);
+	}
+	.searchbar {
+		padding: 20.5px var(--s-2);
+		border: 2px solid var(--dark-gray);
+		border-radius: 2px;
+		align-self: flex-end;
+		grid-row: 1/2;
+		font-family: Overpass;
+		background: #f3f6f9 url(/images/search-icon.svg) 98% no-repeat;
+		margin: 0;
+	}
+	.searchbar:focus {
+		outline: none;
+		border: 1px solid var(--secondary);
+	}
+	.searchbar-count {
+		position: absolute;
+		top: calc(100% + 1rem);
+		right: 0;
+	}
+
+	@media (min-width: 1280px) {
+		.controls {
+			grid-template-columns: 2fr 1fr;
+		}
+		.inputs {
+			grid-template-columns: repeat(4, auto);
+		}
+		.searchbar {
+			grid-row: auto;
+		}
+	}
+</style>
diff --git a/src/lib/styles/globals.css b/src/lib/styles/globals.css
@@ -112,37 +112,6 @@ hr {
 	top: calc(100% + 1rem);
 	left: 0;
 }
-.controls {
-	display: grid;
-	justify-content: stretch;
-	align-items: center;
-	gap: var(--s-4);
-	font-family: Overpass;
-	position: relative;
-}
-.inputs {
-	display: grid;
-	gap: var(--s-2);
-}
-.searchbar {
-	padding: 20.5px var(--s-2);
-	border: 2px solid var(--dark-gray);
-	border-radius: 2px;
-	align-self: flex-end;
-	grid-row: 1/2;
-	font-family: Overpass;
-	background: #f3f6f9 url(/images/search-icon.svg) 98% no-repeat;
-	margin: 0;
-}
-.searchbar:focus {
-	outline: none;
-	border: 1px solid var(--secondary);
-}
-.searchbar-count {
-	position: absolute;
-	top: calc(100% + 1rem);
-	right: 0;
-}
 ul.popin {
 	padding: 0.5ex;
 	margin: 0;
@@ -190,15 +159,3 @@ ul.popin li input {
 	flex: 0;
 	margin: 0 1ex 0 0;
 }
-
-@media (min-width: 1280px) {
-	.controls {
-		grid-template-columns: 2fr 1fr;
-	}
-	.searchbar {
-		grid-row: auto;
-	}
-	.inputs {
-		grid-template-columns: repeat(4, auto);
-	}
-}