Adds search icon

minvws · Sep 6, 2024 · 444628c · 444628c
1 parent 97e2b71
commit 444628c
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 29 deletions.
diff --git a/docs/src/routes/(docs)/components/header-navigation/example-search/[email protected] b/docs/src/routes/(docs)/components/header-navigation/example-search/[email protected]
@@ -33,14 +33,13 @@ See: https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-breaking-out-
     aria-label="Hoofdnavigatie"
     class="collapsible"
   >
-    <button type="submit" class="icon-only icon-cat">Zoeken</button>
     <div class="collapsing-element">
       <SiteNavLinks />
 
       <div>
         <form class="inline">
           <input type="text" placeholder="Zoeken" />
-          <button type="submit" class="icon-only icon-cat">Zoeken</button>
+          <button type="submit" class="icon-only icon-search">Zoeken</button>
         </form>
       </div>
     </div>
@@ -76,33 +75,26 @@ See: https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-breaking-out-
           language="html"
           code={`
 <header>
-  <div>
-      <a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>
-
-      <a href="./logo" class="logo">
-          <img src="/img/logo-white.svg" alt="Placeholder logo">Manon
-      </a>
-
-      <nav
-      data-open-label="Menu"
-      data-close-label="Sluit menu"
-      data-media="(min-width: 30rem)"
-      aria-label="Hoofdnavigatie"
-      class="collapsible">
-
-        <div class="collapsing-element">
-            <ul>
-              <li><a href="/">Home</a></li>
-              <li><a href="/components">Componenten</a></li>
-              <li><a href="/documentation">Documentatie</a></li>
-            </ul>
-
-            <ul>
-              <li><a href="#">Logout</a></li>
-            </ul>
-        </div>
-      </nav>
-  </div>
+  <a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>
+
+  <nav
+    data-open-label="Menu"
+    data-close-label="Sluit menu"
+    data-media="(min-width:42rem)"
+    aria-label="Hoofdnavigatie"
+    class="collapsible"
+  >
+    <div class="collapsing-element">
+      <SiteNavLinks />
+
+      <div>
+        <form class="inline">
+          <input type="text" placeholder="Zoeken" />
+          <button type="submit" class="icon-only icon-search">Zoeken</button>
+        </form>
+      </div>
+    </div>
+  </nav>
 </header>
 `}
         />

diff --git a/themes/basic-bold/components/icon-only.scss b/themes/basic-bold/components/icon-only.scss
@@ -0,0 +1,8 @@
+/* Icon only */
+
+:root {
+  --button-icon-only-background-color: var(--button-base-background-color);
+  --button-icon-only-hover-background-color: var(
+    --button-base-hover-background-color
+  );
+}
diff --git a/themes/basic-bold/theme.scss b/themes/basic-bold/theme.scss
@@ -31,6 +31,7 @@
 @use "components/footer";
 @use "components/form-input";
 @use "components/icon";
+@use "components/icon-only";
 @use "components/logo";
 @use "components/pagination";
 @use "components/sidemenu";