Fix: Moving header nav styling to header nav styling file instead of …

…navigation. (#108)

Fix: Moving header nav styling to header nav styling file instead of navigation.
BREAKING CHANGE: From now on use header-navigation to style the header-navigation instead of navigation.

docs/scss/manon.scss

@@ -71,9 +71,19 @@
 @use "@minvws/manon/layout-column-4";
 @use "@minvws/manon/layout-centered";
 
+/* Button */
+@use "@minvws/manon/button-base";
+@use "@minvws/manon/button-ghost";
+@use "@minvws/manon/button-cta";
+@use "@minvws/manon/button-icon";
+
 /* Header */
 @use "@minvws/manon/header";
 
+/* Header navigation */
+@use "@minvws/manon/header-navigation";
+@use "@minvws/manon/header-navigation-content-wrapper";
+
 /* Navigation */
 @use "@minvws/manon/navigation";
 @use "@minvws/manon/navigation-content-wrapper";
@@ -109,12 +119,6 @@
 @use "@minvws/manon/accordion";
 @use "@minvws/manon/filter";
 
-/* Button */
-@use "@minvws/manon/button-base";
-@use "@minvws/manon/button-ghost";
-@use "@minvws/manon/button-cta";
-@use "@minvws/manon/button-icon";
-
 @use "@minvws/manon/list-base";
 @use "@minvws/manon/skip-to-content-base";
 @use "@minvws/manon/background-color-offset";

docs/scss/themes/soft/header-navigation.scss

@@ -0,0 +1,7 @@
+/* Header navigation */
+
+:root {
+    --header-navigation-background-color: transparent;
+    --header-navigation-text-color: var(--text-set-text-color);
+    --header-navigation-justify-content: flex-end;
+}

docs/scss/themes/soft/variables.scss

@@ -15,4 +15,4 @@
 /* Components */
 @use "breadcrumb-bar";
 @use "tile";
-@use "navigation";
+@use "header-navigation";

manon/button-base-variables.scss

@@ -25,7 +25,6 @@
 
   /* Reset ios button styling */
   /* --button-base-webkit-appearance: none; */
-
   --button-base-align-self: flex-end;
 
   /* Hover */

manon/header-navigation-content-wrapper-variables.scss

@@ -0,0 +1,14 @@
+/*---------------------------------------------------------------*/
+/*------ header-navigation-content-wrapper-variables.scss -------*/
+/*---------------------------------------------------------------*/
+:root {
+  --header-navigation-content-wrapper-flex-direction: var(--content-flex-direction);
+  --header-navigation-content-wrapper-justify-content: center;
+  --header-navigation-content-wrapper-align-items: var(--content-align-items);
+  --header-navigation-content-wrapper-gap: var(--content-gap);
+  --header-navigation-content-wrapper-padding-top: 0;
+  --header-navigation-content-wrapper-padding-right: var(--content-padding-right);
+  --header-navigation-content-wrapper-padding-bottom: 0;
+  --header-navigation-content-wrapper-padding-left: var(--content-padding-left);
+  --header-navigation-content-wrapper-max-width: 100%;
+}

manon/header-navigation-content-wrapper.scss

@@ -0,0 +1,25 @@
+/*---------------------------------------------------------------*/
+/*------------- header-navigation-content-wrapper.scss ----------*/
+/*---------------------------------------------------------------*/
+@use "header-navigation-content-wrapper-variables";
+
+body > header,
+%header-navigation-content-wrapper-style {
+  nav {
+    > div {
+      display: flex;
+      flex-direction: var(--header-navigation-content-wrapper-flex-direction);
+      justify-content: var(--header-navigation-content-wrapper-justify-content);
+      align-items: var(--header-navigation-content-wrapper-align-items);
+      gap: var(--header-navigation-content-wrapper-gap);
+      width: 100%;
+      margin: 0 auto;
+      box-sizing: border-box;
+      padding-top: var(--header-navigation-content-wrapper-padding-top);
+      padding-right: var(--header-navigation-content-wrapper-padding-right);
+      padding-bottom: var(--header-navigation-content-wrapper-padding-bottom);
+      padding-left: var(--header-navigation-content-wrapper-padding-left);
+      max-width: var(--header-navigation-content-wrapper-max-width);
+    }
+  }
+}

manon/header-navigation-variables.scss

@@ -0,0 +1,76 @@
+/*---------------------------------------------------------------*/
+/*-------------- header-navigation-variables.scss ---------------*/
+/*---------------------------------------------------------------*/
+:root {
+  /* header-Navigation layout */
+  --header-navigation-gap: 2rem;
+  --header-navigation-justify-content: flex-start;
+  --header-navigation-align-items: center;
+  --header-navigation-min-height: 4rem;
+  --header-navigation-width: 100%;
+  --header-navigation-padding-top: 0;
+  --header-navigation-padding-right: 0;
+  --header-navigation-padding-bottom: 0;
+  --header-navigation-padding-left: 0;
+  --header-navigation-margin: 0;
+  --header-navigation-background-color: var(--application-base-accent-color);
+  --header-navigation-text-color: var(--application-base-accent-color-text-color);
+  --header-navigation-max-width: 100%;
+
+  /* Content wrapper - Usualy a div to match main content alignment */
+  --header-navigation-content-wrapper-padding-top: 0;
+  --header-navigation-content-wrapper-padding-right: 0;
+  --header-navigation-content-wrapper-padding-bottom: 0;
+  --header-navigation-content-wrapper-padding-left: 0;
+  --header-navigation-content-wrapper-max-width: var(
+    --content-max-width
+  );
+
+  /* List */
+  --header-navigation-list-gap: 1rem;
+  --header-navigation-list-justify-content: var(--header-navigation-justify-content);
+  --header-navigation-list-align-items: var(--header-navigation-align-items);
+  --header-navigation-list-text-color: var(--header-navigation-text-color, var(--application-base-accent-color-text-color));
+
+  /* List item */
+  --header-navigation-list-item-text-color: var(--header-navigation-list-text-color, var(--application-base-accent-color-text-color));
+  --header-navigation-list-item-justify-content: var(--header-navigation-justify-content);
+  --header-navigation-list-item-align-items: var(--header-navigation-align-items);
+
+  /* Link */
+  --header-navigation-link-text-decoration: none;
+  --header-navigation-link-justify-content: center;
+  --header-navigation-link-align-items: center;
+  --header-navigation-link-padding-top: 0;
+  --header-navigation-link-padding-right: 0;
+  --header-navigation-link-padding-bottom: 0;
+  --header-navigation-link-padding-left: 0;
+  --header-navigation-link-text-color: var(--header-navigation-text-color, black);
+
+  /* Link visited */
+  --header-navigation-link-visited-text-color: var(--header-navigation-link-text-color);
+
+  /* Link hover */
+  --header-navigation-link-hover-text-decoration: underline;
+  --header-navigation-link-hover-background-color: transparent;
+  --header-navigation-link-hover-text-color: var(--header-navigation-text-color);
+
+  /* Button */
+  --header-navigation-button-justify-content: var(--button-base-justify-content, center);
+  --header-navigation-button-align-self: center;
+  --header-navigation-button-min-width: var(--button-base-min-width, 0);
+  --header-navigation-button-min-height: var(--button-base-min-height, 2.75rem);
+  --header-navigation-button-background-color: var(--button-base-background-color, transparent);
+  --header-navigation-button-text-color: var(--button-base-text-color, black);
+  --header-navigation-button-border-width: var(--button-base-border-width, 0);
+  --header-navigation-button-border-style: var(--button-base-border-style, solid);
+  --header-navigation-button-border-color: var(--button-base-border-color, black);
+  --header-navigation-button-padding-top: 0;
+  --header-navigation-button-padding-right: 0;
+  --header-navigation-button-padding-bottom: 0;
+  --header-navigation-button-padding-left: 0;
+  --header-navigation-button-font-size: var(--button-base-font-size, var(--application-base-font-size));
+  --header-navigation-button-line-height: var(--button-base-line-height, var(--application-base-line-height));
+  --header-navigation-button-font-weight: var(--button-base-font-weight, var(--application-base-font-weight));
+  --header-navigation-button-border-radius: var(--button-base-border-radius, 0);
+}

manon/header-navigation.scss

@@ -0,0 +1,114 @@
+/*---------------------------------------------------------------*/
+/*----------------- header-navigation.scss ----------------------*/
+/*---------------------------------------------------------------*/
+@use "header-navigation-variables";
+
+body > header,
+%header-navigation-style {
+  width: 100%;
+  box-sizing: border-box;
+
+  nav {
+    display: flex;
+    gap: var(--header-navigation-gap);
+    flex-direction: row;
+    justify-content: var(--header-navigation-justify-content);
+    align-items: var(--header-navigation-align-items);
+    width: var(--header-navigation-width);
+    margin: var(--header-navigation-margin);
+    min-height: var(--header-navigation-min-height);
+    box-sizing: border-box;
+    background-color: var(--header-navigation-background-color);
+    padding-top: var(--header-navigation-padding-top);
+    padding-right: var(--header-navigation-padding-right);
+    padding-bottom: var(--header-navigation-padding-bottom);
+    padding-left: var(--header-navigation-padding-left);
+    max-width: var(--header-navigation-max-width);
+
+    > button,
+    > a.button,
+    > input[type="button"],
+    > input[type="submit"],
+    > input[type="reset"]  {
+
+      justify-content: var(--header-navigation-button-justify-content);
+      align-self: var(--header-navigation-button-align-self);
+      min-width: var(--header-navigation-button-min-width);
+      min-height: var(--header-navigation-button-min-height);
+
+      background-color: var(--header-navigation-button-background-color);
+      color: var(--header-navigation-button-text-color);
+
+      font-size: var(--header-navigation-button-font-size);
+      font-weight: var(--header-navigation-button-font-weight);
+      line-height: var(--header-navigation-button-line-height);
+
+      border-width: var(--header-navigation-button-border-width);
+      border-style: var(--header-navigation-button-border-style);
+      border-color: var(--header-navigation-button-border-color);
+      border-radius: var(--header-navigation-button-border-radius);
+
+      padding-top: var(--header-navigation-button-padding-top);
+      padding-right: var(--header-navigation-button-padding-right);
+      padding-bottom: var(--header-navigation-button-padding-bottom);
+      padding-left: var(--header-navigation-button-padding-left);
+
+      &:visited {
+        color: var(--header-navigation-button-text-color);
+      }
+
+      &:hover {
+        text-decoration: var(--header-navigation-link-hover-text-decoration);
+        color: inherit;
+        background-color: var(--header-navigation-link-hover-background-color);
+        color: var(--header-navigation-link-hover-text-color);
+      }
+    }
+
+    ul,
+    ol {
+      display: flex;
+      gap: var(--header-navigation-list-gap);
+      justify-content: var(--header-navigation-list-justify-content);
+      align-items: var(--header-navigation-list-align-items);
+      flex-direction: row;
+      flex-wrap: wrap;
+      padding: 0;
+      color: var(--header-navigation-list-text-color);
+      width: 100%;
+      margin: 0;
+
+      li {
+        display: flex;
+        justify-content: var(--header-navigation-list-item-justify-content);
+        align-items: var(--header-navigation-list-item-align-items);
+        color: var(--header-navigation-list-item-text-color);
+        list-style: none;
+
+        a,
+        a.button {
+          color: var(--header-navigation-link-text-color);
+          text-decoration: var(--header-navigation-link-text-decoration);
+          display: flex;
+          justify-content: var(--header-navigation-link-justify-content);
+          align-items: var(--header-navigation-link-align-items);
+          padding-top: var(--header-navigation-link-padding-top);
+          padding-right: var(--header-navigation-link-padding-right);
+          padding-bottom: var(--header-navigation-link-padding-bottom);
+          padding-left: var(--header-navigation-link-padding-left);
+
+          &:visited {
+            color: var(--header-navigation-link-visited-text-color);
+          }
+
+          &:hover {
+            text-decoration: var(--header-navigation-link-hover-text-decoration);
+            color: inherit;
+            background-color: var(--header-navigation-link-hover-background-color);
+            color: var(--header-navigation-link-hover-text-color);
+          }
+        }
+      }
+    }
+  }
+}