Skip to content

Commit 1226af3

Browse files
eashaweashaw
authored
Website: update website header & mobile navigation menu (#17718)
Closes: #17708 Changes: - Updated the website's header navigation to match the latest Figma wireframes. - Updated the padding of the mobile navigation menu to keep padding consistent when the menu is opened/closed
1 parent 4f7ebe2 commit 1226af3

File tree

2 files changed

+196
-160
lines changed

2 files changed

+196
-160
lines changed

‎website/assets/styles/layout.less

+125-86
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,9 @@ html, body {
5757

5858
[purpose='page-header'] {
5959
max-width: 1200px;
60+
padding: 19px 64px;
6061
height: 80px;
62+
color: @core-fleet-black;
6163
[purpose='header-logo'] {
6264
max-width: 118px;
6365
img {
@@ -99,23 +101,20 @@ html, body {
99101

100102
[purpose='mobile-nav-toggle-btn'] {
101103
color: #192147;
102-
cursor: unset;
104+
cursor: pointer;
103105
font-size: 16px;
104106
text-decoration: none;
105107
font-family: @navigation-font;
106108
font-weight: @bold;
107109
height: 100%;
110+
padding-left: 24px;
111+
user-select: none;
108112
img {
113+
margin-left: 8px;
109114
width: 16px;
110115
}
111116
}
112117
[purpose='mobile-nav'] {
113-
[purpose='mobile-header-logo'] {
114-
img {
115-
height: 92px;
116-
width: 162px;
117-
}
118-
}
119118
position: fixed;
120119
min-height: 100vh;
121120
top: 0;
@@ -124,52 +123,79 @@ html, body {
124123
bottom: 0;
125124
pointer-events: none;
126125
background-color: #ffffff;
127-
a:not(.btn) {
128-
width: 100%;
129-
padding: 8px 24px 8px 0px;
130-
margin-bottom: 4px;
131-
font-weight: 700;
132-
color: #212529;
133-
cursor: pointer;
134-
}
135126
hr {
136127
margin-top: 4px;
137128
margin-bottom: 8px;
138129
}
130+
[purpose='mobile-nav-header'] {
131+
padding: 19px 40px;
132+
height: 80px;
133+
}
134+
[purpose='mobile-nav-container'] {
135+
padding: 8px 40px 0px 40px;
136+
}
137+
[purpose='mobile-header-logo'] {
138+
img {
139+
height: 41px;
140+
width: 118px;
141+
}
142+
}
139143
[purpose='mobile-nav-close-btn'] {
140144
font-size: 16px;
145+
padding-left: 24px;
146+
cursor: pointer;
141147
text-decoration: none;
148+
user-select: none;
142149
img {
143150
width: 16px;
144151
}
145152
}
146153

154+
[purpose='mobile-dropdown-link'] {
155+
width: 100%;
156+
padding: 8px 24px 8px 0px;
157+
margin-bottom: 8px;
158+
font-weight: 700;
159+
cursor: pointer;
160+
color: @core-fleet-black;
161+
&:hover {
162+
color: @core-vibrant-blue;
163+
text-decoration: none;
164+
}
165+
}
147166
[purpose='mobile-dropdown-toggle'] {
167+
width: 100%;
168+
padding: 8px 24px 8px 0px;
169+
margin-bottom: 4px;
148170
font-weight: 700;
171+
cursor: pointer;
149172
color: @core-fleet-black;
150-
margin-bottom: 0px;
151173
&[aria-expanded='true'] {
152174
color: #6a67fe;
153175
outline: none;
154176
margin-bottom: 4px;
155177
}
178+
&:hover {
179+
color: #6a67fe;
180+
}
156181
}
157182
[purpose='mobile-nav-btn'] {
158183
text-decoration: none;
159184
font-weight: 700;
185+
color: @core-fleet-black;
186+
&:hover {
187+
color: @core-vibrant-blue;
188+
}
160189
}
161190
[purpose='mobile-dropdown'] {
162-
[purpose='beta-label'] {
163-
background: linear-gradient(90deg, #FF5C83 0%, #6A67FE 100%);
164-
display: inline-block;
165-
padding: 1px 6px;
166-
text-transform: uppercase;
167-
color: #FFF;
168-
font-weight: 700;
169-
font-size: 11px;
170-
line-height: 20px;
171-
margin-left: 8px;
172-
vertical-align: middle;
191+
cursor: pointer;
192+
display: flex;
193+
flex-direction: column;
194+
&.collapse {
195+
display: none;
196+
}
197+
&.collapse.show {
198+
display: flex;
173199
}
174200
span {
175201
display: inline-flex;
@@ -192,16 +218,13 @@ html, body {
192218
color: #6a67fe;
193219
text-decoration: none;
194220
}
195-
[purpose='beta-label'] {
196-
color: #FFF;
197-
font-weight: 700;
198-
font-size: 11px;
199-
line-height: 20px;
200-
margin-bottom: 0px;
221+
[purpose='indented-mobile-links'] {
222+
padding-left: 16px;
201223
}
202224
}
203225
}
204226
[purpose='header-nav'] {
227+
205228
[purpose='glass-header-btn'] {
206229
color: #FFFFFF;
207230
height: 32px;
@@ -213,11 +236,12 @@ html, body {
213236
border-radius: 4px;
214237
background-color: @core-vibrant-red;
215238
text-decoration: none;
239+
white-space: nowrap;
216240
}
217241
[purpose='header-nav-btn'][aria-expanded='true'] {
218242
font-weight: 700;
219243
outline: none;
220-
color: #192147;
244+
color: @core-fleet-black-75;;
221245
}
222246
[purpose='header-nav-btn']:before {
223247
display: block;
@@ -227,11 +251,22 @@ html, body {
227251
overflow: hidden;
228252
visibility: hidden;
229253
}
254+
[purpose='log-out-button'] {
255+
padding-left: 16px;
256+
color: @core-fleet-black-75;
257+
white-space: nowrap;
258+
&:hover {
259+
color: @core-fleet-black-75;
260+
font-weight: 700;
261+
text-decoration: none;
262+
}
263+
}
230264
[purpose='header-nav-btn'] {
231-
color: #192147;
265+
color: @core-fleet-black-75;
232266
font-weight: 400;
233267
cursor: pointer;
234268
display: inline-block;
269+
padding: 6px 16px;
235270
}
236271
[purpose='header-nav-btn']:hover {
237272
font-weight: 700;
@@ -248,13 +283,9 @@ html, body {
248283
}
249284
}
250285
}
251-
[purpose='logout-btn'] {
252-
color: @core-fleet-black;
253-
text-decoration: none;
254-
line-height: 23px;
255-
}
256-
&:hover {
257-
font-weight: 700;
286+
[purpose='gh-button'] {
287+
margin-left: 24px;
288+
margin-right: 24px;
258289
}
259290
[purpose='header-dropdown'] {
260291
box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.4);
@@ -263,41 +294,32 @@ html, body {
263294
color: @core-fleet-black;
264295
font-weight: 400;
265296
line-height: 20px;
297+
&:not(:last-of-type) {
298+
margin-bottom: 4px;
299+
}
266300
}
267301
a:hover {
268302
color: #6a67fe;
269303
text-decoration: none;
270304
}
271-
[purpose='beta-label'] {
272-
background: linear-gradient(90deg, #FF5C83 0%, #6A67FE 100%);
273-
display: inline-block;
274-
padding: 1px 6px;
275-
text-transform: uppercase;
276-
color: #FFF;
277-
font-weight: 700;
278-
font-size: 11px;
279-
line-height: 20px;
280-
margin-left: 8px;
281-
vertical-align: middle;
282-
}
283305
}
284306
}
285-
}
286-
[purpose='admin-nav'] {
287-
justify-content: center;
288-
a {
289-
margin-left: 30px;
290-
margin-right: 30px;
291-
color: @core-fleet-black-75;
292-
&:hover {
307+
[purpose='admin-nav'] {
308+
justify-content: center;
309+
a {
310+
margin-left: 30px;
311+
margin-right: 30px;
312+
color: @core-fleet-black-75;
313+
&:hover {
314+
color: @core-fleet-black;
315+
}
316+
}
317+
span {
293318
color: @core-fleet-black;
319+
font-weight: 600;
320+
margin-right: 30px;
294321
}
295322
}
296-
span {
297-
color: @core-fleet-black;
298-
font-weight: 600;
299-
margin-right: 30px;
300-
}
301323
}
302324

303325
// Footer styles
@@ -411,8 +433,6 @@ html, body {
411433
}
412434
}
413435

414-
415-
416436
body.detected-mobile {
417437
// Above and beyond the media queries below, this selector (which relies on
418438
// `parasails` automatically attaching this class, if appropriate) contains
@@ -421,9 +441,9 @@ body.detected-mobile {
421441
// devices (like the iPad) as well as handset devices (like the iPhone).
422442
// …
423443
}
424-
@media (max-width: 992px) {
425-
.homepage-cta-banner+.homepage-header-top {
426-
top: 72px;
444+
@media (max-width: 991px) {
445+
[purpose='page-header'] {
446+
padding: 19px 40px;
427447
}
428448
[purpose='page-wrap'] {
429449
padding-bottom: 460px;
@@ -432,13 +452,23 @@ body.detected-mobile {
432452
padding: 64px 40px;
433453
height: 460px;
434454
}
435-
436455
[purpose='footer-socials'] {
437456
margin-bottom: 32px;
438457
}
439458
}
440459

441460
@media (max-width: 767px) {
461+
[purpose='page-header'] {
462+
padding: 19px 32px;
463+
[purpose='mobile-nav'] {
464+
[purpose='mobile-nav-header'] {
465+
padding: 19px 32px;
466+
}
467+
[purpose='mobile-nav-container'] {
468+
padding: 8px 32px 0px 32px;
469+
}
470+
}
471+
}
442472
[purpose='page-wrap'] {
443473
padding-bottom: 701px;
444474
}
@@ -451,18 +481,24 @@ body.detected-mobile {
451481
}
452482

453483
}
454-
@media (max-width: 605px) {
455-
.homepage-cta-banner + .homepage-header-top {
456-
top: 92px;
457-
}
458-
}
459484
@media (max-width: 575px) {
460485
[purpose='page-wrap'] {
461486
padding-bottom: 925px;
462487
}
463488
[purpose='page-wrap'].reduced-footer-links {
464489
padding-bottom: 97px;
465490
}
491+
[purpose='page-header'] {
492+
padding: 19px 24px;
493+
[purpose='mobile-nav'] {
494+
[purpose='mobile-nav-header'] {
495+
padding: 19px 24px;
496+
}
497+
[purpose='mobile-nav-container'] {
498+
padding: 8px 24px 0px 24px;
499+
}
500+
}
501+
}
466502
[purpose='reduced-nav-footer'] {
467503
height: 97px;
468504
}
@@ -490,14 +526,17 @@ body.detected-mobile {
490526
}
491527
}
492528

493-
@media (max-width: 393px) {
494-
.homepage-cta-banner + .homepage-header-top {
495-
top: 112px;
496-
}
497-
}
498-
@media (max-width: 330px) {
499-
.homepage-cta-banner + .homepage-header-top {
500-
top: 132px;
529+
@media (max-width: 375px) {
530+
[purpose='page-header'] {
531+
padding: 19px 16px;
532+
[purpose='mobile-nav'] {
533+
[purpose='mobile-nav-header'] {
534+
padding: 19px 16px;
535+
}
536+
[purpose='mobile-nav-container'] {
537+
padding: 8px 16px 0px 16px;
538+
}
539+
}
501540
}
502541
}
503542

0 commit comments

Comments
 (0)