Styling fixes for icore open theme

minvws · Sep 17, 2024 · f868d26 · f868d26
1 parent 7733059
commit f868d26
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 13 deletions.
diff --git a/docs/src/routes/(docs)/components/header-navigation/example-logo-above/[email protected] b/docs/src/routes/(docs)/components/header-navigation/example-logo-above/[email protected]
@@ -26,7 +26,7 @@ See: https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-breaking-out-
 <header>
   <a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>
   <a href="{base}/" class="logo">
-    <img src="$img/logo-white.svg" alt="Placeholder logo" />Manon
+    <img src="$img/logo.svg" alt="Placeholder logo" />Manon
   </a>
   <nav
     data-open-label="Menu"
@@ -76,7 +76,7 @@ See: https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-breaking-out-
     <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
+      <img src="/img/logo.svg" alt="Placeholder logo">Manon
     </a>
 
     <nav

diff --git a/docs/src/routes/(docs)/components/header-navigation/example-multiple-menus/[email protected] b/docs/src/routes/(docs)/components/header-navigation/example-multiple-menus/[email protected]
@@ -109,17 +109,13 @@ See: https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-breaking-out-
     /* Header */
     --header-border-width: 0 0 1px 0;
     --header-border-color: #ccc;
-    --header-padding-right: var(--page-whitespace-right);
-    --header-padding-left: var(--page-whitespace-left);
 
     /* Content wrapper */
     --header-content-wrapper-position: relative;
 
     /* Header navigation */
     --header-navigation-position: static;
     --header-navigation-border-width: 0;
-    --header-navigation-padding-right: 0;
-    --header-navigation-padding-left: 0;
 
     /* Collapsible menu */
     --header-navigation-collapsible-menu-top: 4rem;

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]
@@ -114,17 +114,13 @@ See: https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-breaking-out-
     /* Header */
     --header-border-width: 0 0 1px 0;
     --header-border-color: #ccc;
-    --header-padding-right: var(--page-whitespace-right);
-    --header-padding-left: var(--page-whitespace-left);
 
     /* Content wrapper */
     --header-content-wrapper-position: relative;
 
     /* Header navigation */
     --header-navigation-position: static;
     --header-navigation-border-width: 0;
-    --header-navigation-padding-right: 0;
-    --header-navigation-padding-left: 0;
 
     /* Header navigation content */
     --header-navigation-content-wrapper-gap: 1rem;

diff --git a/manon/header-navigation.scss b/manon/header-navigation.scss
@@ -72,5 +72,9 @@ body > header,
         }
       }
     }
+
+    input {
+      align-self: var(--header-navigation-input-algin-self);
+    }
   }
 }
diff --git a/manon/mixins/icon-only.scss b/manon/mixins/icon-only.scss
@@ -23,6 +23,7 @@
   &:hover {
     background-color: var(--#{$prefix}hover-background-color);
     border-width: var(--#{$prefix}hover-border-width);
+    font-size: var(--#{$prefix}hover-font-size);
   }
 }
 

diff --git a/themes/icore-open/components/header-navigation-button.scss b/themes/icore-open/components/header-navigation-button.scss
@@ -19,6 +19,15 @@
     --header-navigation-button-font-weight
   );
 
+  /* Icon only */
+  --header-navigation-button-icon-only-font-size: 0;
+  --header-navigation-button-hover-icon-font-size: var(
+    --header-navigation-button-icon-only-icon-font-size
+  );
+
+  /* Icon only hover */
+  --header-navigation-button-icon-only-hover-font-size: 0;
+
   /* Active */
   --header-navigation-button-active-background-color: var(
     --header-navigation-button-hover-background-color

diff --git a/themes/icore-open/components/header-navigation.scss b/themes/icore-open/components/header-navigation.scss
@@ -17,9 +17,6 @@
   --header-navigation-align-items: stretch;
   --header-navigation-justify-content: space-between;
 
-  /* List */
-  --header-navigation-list-gap: 0;
-
   /* Link*/
   --header-navigation-link-background-color: transparent;
   --header-navigation-link-padding-right: 1rem;
@@ -29,9 +26,13 @@
   --header-navigation-link-text-decoration: none;
 
   /* List */
+  --header-navigation-list-gap: 0;
   --header-navigation-list-align-content: stretch;
   --header-navigation-list-width: auto;
 
+  /* Input */
+  --header-navigation-input-algin-self: center;
+
   /* Collapsed icon */
   --navigation-collapsible-menu-icon-font-size: 2rem;
 }