Skip to content

Commit c377154

Browse files
edwardcasbonedwardcasbon
authored
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
1 parent 4e74e5d commit c377154

File tree

7 files changed

+233
-5
lines changed

7 files changed

+233
-5
lines changed

‎dist/honeycomb.app.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/honeycomb.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/honeycomb.css.cheatsheet.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1290,6 +1290,20 @@ <h1>Honeycomb web toolkit class name cheatsheet</h1>
12901290
<li>.header--primary--collapsed .header__buy-now</li>
12911291
<li>.header--primary--collapsed .header__quotes</li>
12921292
<li>.header--primary--has-inner-container</li>
1293+
<li>.header--primary--light</li>
1294+
<li>.header--primary--light .active</li>
1295+
<li>.header--primary--light .dropdown.open .arrow</li>
1296+
<li>.header--primary--light .header--primary__app-logo-container</li>
1297+
<li>.header--primary--light .header--primary__app-name-container</li>
1298+
<li>.header--primary--light .header--primary__company-logo-container</li>
1299+
<li>.header--primary--light .header--primary__icon.active</li>
1300+
<li>.header--primary--light .header--primary__menu--mobile</li>
1301+
<li>.header--primary--light .header--primary__menu--mobile .active-parent</li>
1302+
<li>.header--primary--light .header--primary__menu--mobile .dropdown &gt; ul a.active</li>
1303+
<li>.header--primary--light .header--primary__menu--mobile .dropdown.open</li>
1304+
<li>.header--primary--light .header--primary__menu-button</li>
1305+
<li>.header--primary--light .header--primary__strapline</li>
1306+
<li>.header--primary--light a.active</li>
12931307
<li>.header--primary__app-logo-container</li>
12941308
<li>.header--primary__app-name-container</li>
12951309
<li>.header--primary__company-logo-container</li>
@@ -1617,6 +1631,7 @@ <h1>Honeycomb web toolkit class name cheatsheet</h1>
16171631

16181632
<ul>
16191633
<li>.mobile-nav--open .header--primary .header--primary__menu--mobile</li>
1634+
<li>.mobile-nav--open .header--primary--light .header--primary__menu-button</li>
16201635
<li>.mobile-nav--open .header--primary__menu-button</li>
16211636

16221637
</ul>

‎docs/html-patterns/global/navigation/header.htm‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,73 @@ <h2 class="spaced-top">HTML Examples</h2>
136136
</nav>
137137
</div>
138138

139+
<div class="spaced-bottom--loose">
140+
<div class="band header--primary header--primary--light js-header-primary-collapse">
141+
<nav>
142+
<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>
143+
144+
145+
<span class="hide-on-medium">
146+
<ul class="js-dropdown">
147+
<li><a href="x">Products</a></li>
148+
<li><a href="x">DLM</a></li>
149+
<li><a href="x" class="active">Support</a>
150+
<ul>
151+
<li><a href="x" class="active">Support dropdown</a></li>
152+
<li><a href="x">Support dropdown 2</a></li>
153+
</ul>
154+
<li><a href="x">Our company</a></li>
155+
</ul>
156+
</span>
157+
158+
<span class="float-right hide-on-medium">
159+
<form role="search" method="get" action="http://local.simple-talk.com/" class="header--primary__search-form">
160+
<input type="search" placeholder="Search ..." value="" name="s" title="Search for:">
161+
<button type="submit" class="header--primary__icon"><span class="icon--search"></span></button>
162+
</form>
163+
</span>
164+
165+
<span class="hide-on-max show-on-medium float-right">
166+
<ul>
167+
<li><a href="x" class="header--primary__icon header--primary__menu-button"></a></li>
168+
</ul>
169+
</span>
170+
171+
<ul class="header--primary__menu--mobile js-dropdown" data-position="70">
172+
<li>
173+
<a href="#item">Item 1</a>
174+
<ul>
175+
<li><a href="#item">Item 1 A</a></li>
176+
<li><a href="#item">Item 1 B</a></li>
177+
<li><a href="#item">Item 1 C</a></li>
178+
<li><a href="#item">Item 1 D</a></li>
179+
</ul>
180+
</li>
181+
<li>
182+
<a href="#item"><span class="icon--shopping-cart"></span> Item 2</a>
183+
<ul>
184+
<li><a href="#item">Item 2 A</a></li>
185+
<li>
186+
<a href="#item">Item 2 B</a>
187+
<ul>
188+
<li><a href="#item">Item 2 B 1</a></li>
189+
<li><a href="#item" class="active">Item 2 B 2</a></li>
190+
<li><a href="#item">Item 2 B 3</a></li>
191+
<li><a href="#item">Item 2 B 4</a></li>
192+
</ul>
193+
</li>
194+
<li><a href="#item">Item 2 C</a></li>
195+
<li><a href="#item">Item 2 D</a></li>
196+
</ul>
197+
</li>
198+
<li><a href="#item">Item 3</a></li>
199+
<li><a href="#item">Item 4</a></li>
200+
</ul>
201+
202+
</nav>
203+
</div>
204+
</div>
205+
139206

140207
<div class="spaced-bottom--loose">
141208
<div class="band header--primary js-header-primary-collapse">

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "honeycomb-web-toolkit",
3-
"version": "14.3.10",
3+
"version": "14.3.11",
44
"repository": {
55
"type": "git",
66
"url": "https://github.com/red-gate/honeycomb-web-toolkit"

‎src/navigation/css/components/_honeycomb.navigation.components.header.scss‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -463,3 +463,149 @@
463463
}
464464
}
465465
}
466+
467+
.header--primary--light {
468+
469+
background-color: color('grey', 1);
470+
471+
.header--primary__app-logo-container {
472+
background-color: color('grey', 1);
473+
color: color('grey', 9) !important;
474+
}
475+
476+
.header--primary__app-name-container {
477+
color: color('grey', 9) !important;
478+
}
479+
480+
.header--primary__company-logo-container {
481+
color: color('grey', 9) !important;
482+
}
483+
484+
.header--primary__strapline {
485+
color: color('grey', 9);
486+
}
487+
488+
a, a:link, a:visited, a:focus {
489+
color: color('grey', 7);
490+
}
491+
492+
a:hover {
493+
color: color('grey', 7);
494+
}
495+
496+
.active, a.active {
497+
color: color('grey', 9);
498+
border-bottom-color: color('red');
499+
500+
&:hover {
501+
border-bottom-color: color('grey', 9);
502+
}
503+
}
504+
505+
.header--primary__icon {
506+
507+
&:hover {
508+
background-color: color('grey', 3);
509+
}
510+
511+
&.active {
512+
background-color: color('grey', 3);
513+
border-bottom-color: color('grey', 9) !important;
514+
}
515+
}
516+
517+
.dropdown.open {
518+
& > a:first-of-type {
519+
color: color('grey', 9);
520+
border-bottom-color: color('grey', 9);
521+
}
522+
523+
.arrow {
524+
color: color('grey', 9);
525+
}
526+
}
527+
528+
.dropdown > ul {
529+
background-color: color('white');
530+
border-color: color('grey', 3);
531+
532+
a {
533+
color: color('grey', 7);
534+
535+
&:hover {
536+
background-color: color('grey', 1);
537+
}
538+
}
539+
}
540+
541+
.header--primary__menu-button {
542+
background-color: color('grey', 2);
543+
color: color('grey', 9) !important;
544+
545+
.mobile-nav--open & {
546+
background-color: color('grey', 2);
547+
}
548+
}
549+
550+
input[type="text"], input[type="search"] {
551+
background-color: color('grey', 2);
552+
color: color('grey', 9);
553+
}
554+
555+
input[type="submit"], button {
556+
background-color: color('grey', 2) !important;
557+
color: color('grey', 9) !important;
558+
559+
&:hover {
560+
background-color: color('grey', 3) !important;
561+
}
562+
}
563+
564+
.header--primary__menu--mobile {
565+
border-bottom-color: color('grey', 9);
566+
567+
&, ul {
568+
background-color: color('grey', 2);
569+
}
570+
571+
li {
572+
border-top-color: color('grey', 4);
573+
border-bottom-color: color('grey', 3);
574+
}
575+
576+
.dropdown > ul {
577+
background-color: color('grey', 2);
578+
579+
a {
580+
color: color('grey', 8);
581+
582+
&:hover {
583+
background-color: transparent;
584+
color: color('grey', 9);
585+
}
586+
587+
&.active {
588+
&, &:hover {
589+
background-color: color('red');
590+
color: color('white');
591+
}
592+
}
593+
}
594+
}
595+
596+
.dropdown.open {
597+
598+
&, ul {
599+
background-color: color('grey', 3);
600+
}
601+
602+
& > a {
603+
color: color('grey', 8);
604+
}
605+
}
606+
607+
.active-parent {
608+
color: color('grey', 9);
609+
}
610+
}
611+
}

0 commit comments

Comments
 (0)