Add styles for a light primary header (#525)

* Update docs with light header * Add colours for a light primary header (`header--primary--light`) * Remove nav bar from docs * Compiled CSS * Version bump
red-gate · May 1, 2024 · c377154 · c377154
1 parent 4e74e5d
commit c377154
Show file tree

Hide file tree

Showing 7 changed files with 233 additions and 5 deletions.
diff --git a/dist/honeycomb.app.css b/dist/honeycomb.app.css
diff --git a/dist/honeycomb.css b/dist/honeycomb.css
diff --git a/dist/honeycomb.css.cheatsheet.html b/dist/honeycomb.css.cheatsheet.html
@@ -1290,6 +1290,20 @@ <h1>Honeycomb web toolkit class name cheatsheet</h1>
                         <li>.header--primary--collapsed .header__buy-now</li>
                         <li>.header--primary--collapsed .header__quotes</li>
                         <li>.header--primary--has-inner-container</li>
+                        <li>.header--primary--light</li>
+                        <li>.header--primary--light .active</li>
+                        <li>.header--primary--light .dropdown.open .arrow</li>
+                        <li>.header--primary--light .header--primary__app-logo-container</li>
+                        <li>.header--primary--light .header--primary__app-name-container</li>
+                        <li>.header--primary--light .header--primary__company-logo-container</li>
+                        <li>.header--primary--light .header--primary__icon.active</li>
+                        <li>.header--primary--light .header--primary__menu--mobile</li>
+                        <li>.header--primary--light .header--primary__menu--mobile .active-parent</li>
+                        <li>.header--primary--light .header--primary__menu--mobile .dropdown &gt; ul a.active</li>
+                        <li>.header--primary--light .header--primary__menu--mobile .dropdown.open</li>
+                        <li>.header--primary--light .header--primary__menu-button</li>
+                        <li>.header--primary--light .header--primary__strapline</li>
+                        <li>.header--primary--light a.active</li>
                         <li>.header--primary__app-logo-container</li>
                         <li>.header--primary__app-name-container</li>
                         <li>.header--primary__company-logo-container</li>
@@ -1617,6 +1631,7 @@ <h1>Honeycomb web toolkit class name cheatsheet</h1>
 
                     <ul>
                         <li>.mobile-nav--open .header--primary .header--primary__menu--mobile</li>
+                        <li>.mobile-nav--open .header--primary--light .header--primary__menu-button</li>
                         <li>.mobile-nav--open .header--primary__menu-button</li>
 
                     </ul>

diff --git a/docs/html-patterns/global/navigation/header.htm b/docs/html-patterns/global/navigation/header.htm
@@ -136,6 +136,73 @@ <h2 class="spaced-top">HTML Examples</h2>
             </nav>
     </div>
 
+    <div class="spaced-bottom--loose">
+        <div class="band header--primary header--primary--light js-header-primary-collapse">
+            <nav>
+                <a href="/" class="header--primary__app-logo-container"><img src="https://info.red-gate.com/rg/_/7F000001015FFDCCF8DBF52653981C1B/1712313926595/assets/images/redgate-logo.svg" width="94" alt=""></a>
+
+
+                <span class="hide-on-medium">
+                    <ul class="js-dropdown">
+                        <li><a href="x">Products</a></li>
+                        <li><a href="x">DLM</a></li>
+                        <li><a href="x" class="active">Support</a>
+                        <ul>
+                            <li><a href="x" class="active">Support dropdown</a></li>
+                            <li><a href="x">Support dropdown 2</a></li>
+                        </ul>
+                        <li><a href="x">Our company</a></li>
+                    </ul>
+                </span>
+
+                <span class="float-right hide-on-medium">
+                    <form role="search" method="get" action="http://local.simple-talk.com/" class="header--primary__search-form">
+                        <input type="search" placeholder="Search ..." value="" name="s" title="Search for:">
+                        <button type="submit" class="header--primary__icon"><span class="icon--search"></span></button>
+                    </form>
+                </span>
+
+                <span class="hide-on-max show-on-medium float-right">
+                    <ul>
+                        <li><a href="x" class="header--primary__icon header--primary__menu-button"></a></li>
+                    </ul>
+                </span>
+
+                <ul class="header--primary__menu--mobile js-dropdown" data-position="70">
+                    <li>
+                        <a href="#item">Item 1</a>
+                        <ul>
+                            <li><a href="#item">Item 1 A</a></li>
+                            <li><a href="#item">Item 1 B</a></li>
+                            <li><a href="#item">Item 1 C</a></li>
+                            <li><a href="#item">Item 1 D</a></li>
+                        </ul>
+                    </li>
+                    <li>
+                        <a href="#item"><span class="icon--shopping-cart"></span> Item 2</a>
+                        <ul>
+                            <li><a href="#item">Item 2 A</a></li>
+                            <li>
+                                <a href="#item">Item 2 B</a>
+                                <ul>
+                                    <li><a href="#item">Item 2 B 1</a></li>
+                                    <li><a href="#item" class="active">Item 2 B 2</a></li>
+                                    <li><a href="#item">Item 2 B 3</a></li>
+                                    <li><a href="#item">Item 2 B 4</a></li>
+                                </ul>
+                            </li>
+                            <li><a href="#item">Item 2 C</a></li>
+                            <li><a href="#item">Item 2 D</a></li>
+                        </ul>
+                    </li>
+                    <li><a href="#item">Item 3</a></li>
+                    <li><a href="#item">Item 4</a></li>
+                </ul>
+
+            </nav>
+        </div>
+    </div>
+
 
     <div class="spaced-bottom--loose">
         <div class="band header--primary js-header-primary-collapse">

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "honeycomb-web-toolkit",
-  "version": "14.3.10",
+  "version": "14.3.11",
   "repository": {
     "type": "git",
     "url": "https://github.com/red-gate/honeycomb-web-toolkit"

diff --git a/src/navigation/css/components/_honeycomb.navigation.components.header.scss b/src/navigation/css/components/_honeycomb.navigation.components.header.scss
@@ -463,3 +463,149 @@
         }
     }
 }
+
+.header--primary--light {
+
+    background-color: color('grey', 1);
+
+    .header--primary__app-logo-container {
+        background-color: color('grey', 1);
+        color: color('grey', 9) !important;
+    }
+
+    .header--primary__app-name-container {
+        color: color('grey', 9) !important;
+    }
+
+    .header--primary__company-logo-container {
+        color: color('grey', 9) !important;
+    }
+
+    .header--primary__strapline {
+        color: color('grey', 9);
+    }
+
+    a, a:link, a:visited, a:focus {
+        color: color('grey', 7);
+    }
+
+    a:hover {
+        color: color('grey', 7);
+    }
+
+    .active, a.active {
+        color: color('grey', 9);
+        border-bottom-color: color('red');
+
+        &:hover {
+            border-bottom-color: color('grey', 9);
+        }
+    }
+
+    .header--primary__icon {
+
+        &:hover {
+            background-color: color('grey', 3);
+        }
+
+        &.active {
+            background-color: color('grey', 3);
+            border-bottom-color: color('grey', 9) !important;
+        }
+    }
+
+    .dropdown.open {
+        & > a:first-of-type {
+            color: color('grey', 9);
+            border-bottom-color: color('grey', 9);
+        }
+
+        .arrow {
+            color: color('grey', 9);
+        }
+    }
+
+    .dropdown > ul {
+        background-color: color('white');
+        border-color: color('grey', 3);
+
+        a {
+            color: color('grey', 7);
+
+            &:hover {
+                background-color: color('grey', 1);
+            }
+        }
+    }
+
+    .header--primary__menu-button {
+        background-color: color('grey', 2);
+        color: color('grey', 9) !important;
+
+        .mobile-nav--open & {
+            background-color: color('grey', 2);
+        }
+    }
+
+    input[type="text"], input[type="search"] {
+        background-color: color('grey', 2);
+        color: color('grey', 9);
+    }
+
+    input[type="submit"], button {
+        background-color: color('grey', 2) !important;
+        color: color('grey', 9) !important;
+
+        &:hover {
+            background-color: color('grey', 3) !important;
+        }
+    }
+
+    .header--primary__menu--mobile {
+        border-bottom-color: color('grey', 9);
+
+        &, ul {
+            background-color: color('grey', 2);
+        }
+
+        li {
+            border-top-color: color('grey', 4);
+            border-bottom-color: color('grey', 3);
+        }
+
+        .dropdown > ul {
+            background-color: color('grey', 2);
+
+            a {
+                color: color('grey', 8);
+
+                &:hover {
+                    background-color: transparent;
+                    color: color('grey', 9);
+                }
+
+                &.active {
+                    &, &:hover {
+                        background-color: color('red');
+                        color: color('white');
+                    }
+                }
+            }
+        }
+
+        .dropdown.open {
+
+            &, ul {
+                background-color: color('grey', 3);
+            }
+
+            & > a {
+                color: color('grey', 8);
+            }
+        }
+
+        .active-parent {
+            color: color('grey', 9);
+        }
+    }
+}