@uqds/header 0.0.6-alpha.0 → 0.0.9-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +28 -28
  2. package/dist/css/main.css +1 -0
  3. package/dist/js/uqds.js +108 -0
  4. package/dist/js/uqds.min.js +1 -0
  5. package/package.json +8 -7
  6. package/src/js/header.js +81 -53
  7. package/src/js/main.js +3 -3
  8. package/src/scss/_component.scss +794 -784
  9. package/src/scss/_global.scss +6 -6
package/src/scss/_component.scss CHANGED
@@ -1,785 +1,795 @@
1
- @use '@uqds/core/src/scss/global' as core;
2
- @use "@uqds/icon/src/scss/global" as icon-constants;
3
- @use '@uqds/grid/src/scss/global' as grid;
4
- @use 'global' as *;
5
-
6
- .uq-header {
7
-
8
- background: core.$uq-purple; //linear-gradient(90deg, $uq-purple 0%, 87%, #962A8B 100%);
9
- display: grid;
10
- align-items: center;
11
- grid-template-columns: auto;
12
- grid-template-areas:
13
- "mainheader"
14
- "secondarynav";
15
- position: relative;
16
-
17
- @media #{core.$screen-lg-up} {
18
- grid-template-areas:
19
- "secondarynav"
20
- "mainheader";
21
- }
22
-
23
- &__container {
24
-
25
- display: grid;
26
- align-items: center;
27
- grid-template-columns: 1fr 15fr 1fr;
28
- grid-area: mainheader;
29
- grid-template-areas:
30
- "menutoggle logo searchtoggle"
31
- "mainnav-mobile mainnav-mobile mainnav-mobile";
32
-
33
- @media #{core.$screen-lg-up} {
34
- max-width: 73.25rem;
35
- margin-left: auto;
36
- margin-right: auto;
37
- grid-template-areas:
38
- "logo mainnav searchtoggle";
39
- padding-left: core.$space;
40
- padding-right: core.$space;
41
- }
42
- }
43
-
44
- &__menu-toggle {
45
- grid-area: menutoggle;
46
-
47
- @media #{core.$screen-lg-up} {
48
- display: none;
49
- }
50
- }
51
-
52
- &__search-toggle {
53
- grid-area: searchtoggle;
54
- height: 100%;
55
- text-align: right;
56
- color: core.$uq-white;
57
-
58
- @media #{core.$screen-lg-up} {
59
- height: auto;
60
- }
61
-
62
- .search-toggle__label {
63
- display: none;
64
-
65
- @media #{core.$screen-lg-up} {
66
- display: block;
67
- font-family: core.$roboto;
68
- font-size: core.$font-size;
69
- text-align: right;
70
- width: 3.2rem;
71
- }
72
- }
73
- }
74
-
75
- & .nav-primary__toggle {
76
- background: none;
77
- border: none;
78
- padding: 1.75rem core.$space-l;
79
- height: 100%;
80
-
81
- @media #{core.$screen-lg-up} {
82
- padding: 1rem 0 1rem 1.5rem;
83
- height: auto;
84
- }
85
- }
86
-
87
- & .nav-primary__menu-toggle {
88
- cursor: pointer;
89
- color: core.$uq-white;
90
- position: relative;
91
- text-indent: -9999px;
92
- white-space: nowrap;
93
-
94
- &::before {
95
- content: "";
96
- background-image: url(icon-constants.get-icon("standard--navigation-menu", core.$uq-white));
97
- background-repeat: no-repeat;
98
- width: 1.5rem;
99
- height: 1.5rem;
100
- transform: translate(50%, 50%);
101
- position: absolute;
102
- top: .625rem;
103
- right: core.$space-l;
104
- }
105
-
106
- &--is-open {
107
- &::before {
108
- background-image: url(icon-constants.get-icon("standard--x", core.$uq-white));
109
- }
110
- }
111
- }
112
-
113
- & .nav-primary__search-toggle {
114
- cursor: pointer;
115
- color: core.$uq-white;
116
- position: relative;
117
-
118
- &::before {
119
- content: "";
120
- background-image: url(icon-constants.get-icon("standard--search", core.$uq-white));
121
- background-repeat: no-repeat;
122
- width: 1.5rem;
123
- height: 1.5rem;
124
- transform: translate(50%, 50%);
125
- position: absolute;
126
- top: .625rem;
127
- right: core.$space-l;
128
-
129
- @media #{core.$screen-lg-up} {
130
- top: 0.1rem;
131
- left: -1rem;
132
- }
133
- }
134
-
135
- @media #{core.$screen-lg-up} {
136
- &:hover {
137
- color: #d4c8de;
138
- text-decoration: underline;
139
- }
140
- }
141
-
142
- &--is-open {
143
-
144
- &::before {
145
- background-image: url(icon-constants.get-icon("standard--x", core.$uq-white));
146
- }
147
- }
148
-
149
- }
150
-
151
- &__logo {
152
- grid-area: logo;
153
-
154
-
155
- & a {
156
- display: grid;
157
- padding: 1rem 0;
158
- }
159
-
160
- & img {
161
- height: 32px;
162
-
163
- @media #{core.$screen-lg-up} {
164
- height: 40px;
165
- }
166
- }
167
- }
168
-
169
- // __nav-primary
170
-
171
- &__nav-primary {
172
- grid-area: mainnav;
173
- display: none;
174
- width: 100%;
175
- z-index: 99;
176
-
177
- @media #{core.$screen-lg-up} {
178
- display: block;
179
- }
180
- }
181
-
182
- &__nav-primary-container {
183
-
184
- @media #{core.$screen-lg-up} {
185
- padding: 0 0 0 core.$space-xl;
186
- }
187
- }
188
-
189
- &__nav-primary-list {
190
- list-style-type: none;
191
- margin: 0;
192
- padding-left: 0;
193
- display: flex;
194
- justify-content: flex-start;
195
- align-items: stretch;
196
- flex-direction: column;
197
-
198
- @media #{core.$screen-lg-up} {
199
- align-items: center;
200
- flex-direction: row;
201
- }
202
-
203
- & li {
204
- margin: 0;
205
- padding-right: 2rem;
206
-
207
- &:hover {
208
- & > .uq-header__megamenu {
209
- height: auto;
210
- visibility: visible;
211
- }
212
-
213
- & .uq-header__nav-primary-link {
214
- border-bottom: 4px solid white;
215
- }
216
- }
217
-
218
- & .uq-header__nav-primary-link--active {
219
- border-bottom: 4px solid white;
220
- }
221
- }
222
- }
223
-
224
- &__nav-primary-link {
225
- display: block;
226
- color: core.$uq-white; //core.$uq-purple;
227
- text-decoration: none;
228
- padding: core.$space core.$space-m;
229
- transition: background-color .25s,border-color .25s;
230
- font-weight: 400;
231
- position: relative;
232
- border-bottom: 4px solid core.$uq-purple;
233
-
234
- &:hover {
235
- color: core.$uq-white;
236
- text-decoration: none;
237
- }
238
-
239
-
240
- @media #{core.$screen-lg-up} {
241
- padding: core.$space-l core.$space-s;
242
- }
243
- }
244
-
245
- .nav-primary-link--has-dropdown {
246
- padding: core.$space-l core.$space-m core.$space-l core.$space-s;
247
-
248
- &::after {
249
- content: "";
250
- background-image: url(icon-constants.get-icon("standard--chevron-down-sml", core.$uq-white));
251
- background-repeat: no-repeat;
252
- width: core.$space;
253
- height: core.$space;
254
- transform: translateY(50%);
255
- position: absolute;
256
- top: 1.7rem;
257
- right: 1.75rem;
258
-
259
- @media #{core.$screen-lg-up} {
260
- right: .25rem;
261
- }
262
- }
263
- }
264
-
265
- .mega-menu {
266
- display: none;
267
- background-color: core.$uq-white;
268
- list-style-type: none;
269
- margin: 0;
270
- padding-left: 0;
271
-
272
- & li {
273
-
274
- & a {
275
- padding-left: core.$space-xxl;
276
- color: core.$uq-purple;
277
- }
278
- }
279
-
280
- & ul {
281
- list-style-type: none;
282
- margin: 0;
283
- padding-left: 0;
284
-
285
- & li {
286
- & a {
287
- padding-left: core.$space-ul;
288
- }
289
- }
290
- }
291
- }
292
-
293
- &__nav-secondary {
294
- background-color: #48206c;
295
- grid-area: secondarynav;
296
- }
297
-
298
- &__nav-secondary-container {
299
- @media #{core.$screen-lg-up} {
300
- text-align: right;
301
- max-width: 73.25rem;
302
- margin-left: auto;
303
- margin-right: auto;
304
- }
305
- }
306
-
307
- &__nav-secondary-list {
308
- list-style-type: none;
309
- margin: 0;
310
- padding-left: 0;
311
- display: flex;
312
- justify-content: flex-start;
313
- align-items: stretch;
314
- flex-direction: column;
315
-
316
- @media #{core.$screen-lg-up} {
317
- justify-content: flex-end;
318
- align-items: center;
319
- flex-direction: row;
320
- }
321
- }
322
-
323
- &__nav-secondary-item {
324
- margin: 0;
325
- }
326
-
327
- &__nav-secondary-link {
328
- display: block;
329
- color: white;
330
- padding: core.$space core.$space-m;
331
-
332
- @media #{core.$screen-lg-up} {
333
- font-size: core.$font-size-s;
334
- padding: .625rem core.$space;
335
- }
336
-
337
- &:hover {
338
- color: #d4c8de;
339
- }
340
- }
341
-
342
- &__search {
343
-
344
- background: core.$uq-purple;
345
- position: absolute;
346
- width: 100%;
347
- top: 3.95rem;
348
- z-index: 20;
349
- box-shadow: 0 .75rem core.$space-m rgb(24 24 24 / 20%);
350
- transition: max-height .2s ease-in-out, transform .2s ease-in-out;//, visibility .2s ease;
351
- transform: translateY(-1rem);
352
- max-height: 0;
353
- overflow: hidden;
354
-
355
- @media #{core.$screen-lg-up} {
356
- top: 8.3rem;
357
- }
358
-
359
- &--is-open {
360
- transform: translateY(0);
361
- max-height: 50vh;
362
- }
363
- }
364
-
365
- &__search-container {
366
-
367
- padding: 0 core.$space-m;
368
-
369
- @media #{core.$screen-lg-up} {
370
- padding-left: core.$space;
371
- padding-right: core.$space;
372
- max-width: 73.25rem;
373
- margin-left: auto;
374
- margin-right: auto;
375
- padding-top: 0;
376
- padding-bottom: 1rem;
377
- }
378
- }
379
-
380
- &__search-query {
381
- position: relative;
382
- display: inline-block;
383
- max-width: 100%;
384
- min-width: 100%;
385
- border-radius: 5px;
386
- background-position: core.$space;
387
- padding-top: core.$space;
388
- padding-bottom: core.$space;
389
- }
390
-
391
- &__search-query-input {
392
- margin: 0 !important;
393
- padding: .75rem core.$space !important;
394
- }
395
-
396
- &__search-query-button {
397
- background-clip: padding-box;
398
- background-color: core.$uq-white;
399
- border-radius: 5px;
400
- border: 2px solid transparent;
401
- color: core.$uq-purple;
402
- display: inline-block;
403
- font-size: core.$font-size;
404
- height: 2.75rem;
405
- line-height: 1.5;
406
- margin-bottom: 0;
407
- margin-right: 0;
408
- overflow: hidden;
409
- position: absolute;
410
- right: core.$space-s;
411
- text-decoration: none;
412
- text-indent: 0;
413
- top: calc(50% - 1.375rem);
414
- transition: color .2s,background-color .2s,border-color .2s;
415
- width: 2.75rem;
416
-
417
- &::before {
418
- content: "";
419
- position: absolute;
420
- display: block;
421
- width: core.$space-m;
422
- height: core.$space-m;
423
- top: core.$space-s;
424
- left: core.$space-s;
425
- background-size: 100%;
426
- background-image: url(icon-constants.get-icon("standard--search", core.$uq-purple));
427
- }
428
- }
429
-
430
- &__search-query-submit {
431
- color: transparent;
432
- position: relative;
433
- display: block;
434
- width: 100%;
435
- height: 100%;
436
- margin: core.$space-none;
437
- border: core.$space-none;
438
- background-color: transparent;
439
- z-index: 3;
440
- cursor: pointer;
441
- outline-offset: -2px;
442
- font-size: core.$font-size;
443
- }
444
-
445
- &__search-range {
446
-
447
- display: inline-block;
448
-
449
- & label {
450
- color: core.$uq-white;
451
- }
452
- }
453
-
454
- .uq-header__search-radio {
455
- &:checked {
456
- border-color: core.$uq-white;
457
-
458
- &:focus {
459
- border-color: core.$uq-white;
460
- }
461
-
462
- &::after {
463
- background-color: core.$uq-white;
464
- }
465
- }
466
- }
467
-
468
- &__search-label {
469
- font-size: .8rem !important;
470
- line-height: 1.7 !important;
471
-
472
- @media #{core.$screen-lg-up} {
473
- font-size: core.$font-size !important;
474
- line-height: 1.4 !important;
475
- }
476
- }
477
-
478
- &__nav-primary,
479
- &__nav-secondary {
480
- @media #{core.$screen-lg-down} {
481
- display: none;
482
- }
483
- }
484
-
485
- &__megamenu {
486
- position: absolute;
487
- top: 8.3rem;
488
- left: 0;
489
- width: 100%;
490
- z-index: 30;
491
- height: 0;
492
- visibility: hidden;
493
- }
494
-
495
- &__megamenu-container {
496
- max-width: 73.25rem;
497
- margin-left: auto;
498
- margin-right: auto;
499
-
500
- padding: core.$space core.$space-xxl core.$space-xl core.$space-xxl;
501
- background: core.$uq-white;
502
- box-shadow: 0 0.75rem core.$space-m rgb(24 24 24 / 20%);
503
- border-radius: 0 0 .25rem .25rem;
504
-
505
- @media #{core.$screen-xl-up} {
506
- max-width: 77.25rem;
507
- }
508
- }
509
-
510
- .megamenu__row {
511
- display: grid;
512
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
513
- }
514
-
515
- .megamenu__overview-link {
516
- display: block;
517
- padding: core.$space core.$space-none;
518
- color: core.$uq-purple;
519
- }
520
-
521
- .megamenu__heading {
522
- color: core.$uq-purple;
523
- font-weight: 500;
524
- padding-top: core.$space-xs;
525
- padding-bottom: core.$space-xs;
526
-
527
- &:nth-of-type(2) {
528
- padding-top: core.$space-xl;
529
- }
530
- }
531
-
532
- .megamenu__menu {
533
- & ul {
534
- list-style-type: none;
535
- margin: core.$space-none;
536
- padding-left: core.$space-none;
537
-
538
- & li {
539
- margin: core.$space-none;
540
-
541
- & a {
542
- display: inline-block;
543
- padding-top: core.$space-s;
544
- color: core.$uq-purple;
545
- }
546
- }
547
- }
548
- }
549
- }
550
-
551
- :root {
552
- --app-height: 100%;
553
- }
554
-
555
- body.no-scroll {
556
- position: fixed;
557
- @media #{core.$screen-lg-up} {
558
- position: relative;
559
- }
560
- }
561
-
562
- // Slide mobile menu
563
-
564
- .slide-menu {
565
- width:100%;
566
- max-width:100%;
567
- background-color:#FFFFFF;
568
- height: calc(var(--app-height) - 4.3rem);
569
- display:none;
570
- box-sizing:border-box;
571
- transition:transform .3s ease-in-out;
572
- transform:translateX(100%);
573
- will-change:transform;
574
- z-index:1000;
575
- grid-area: mainnav-mobile;
576
- position:fixed;
577
- top: 4.3rem;
578
- right:core.$space-none;
579
- overflow-y:auto;
580
- overflow-x:hidden;
581
- font-size: core.$font-size;
582
- color:core.$uq-purple;
583
-
584
- @media #{core.$screen-lg-up} {
585
- display: none !important;
586
- }
587
-
588
- .slide-menu__slider {
589
- width:100%;
590
- transform:translateX(0);
591
- transition:transform .3s ease-in-out;
592
- will-change:transform;
593
- }
594
-
595
- ul {
596
- position:relative;
597
- width:100%;
598
- margin:core.$space-none;
599
- padding-left:core.$space-none;
600
- list-style:none;
601
- background-color: core.$uq-white;
602
-
603
- ul {
604
- position:absolute;
605
- top:core.$space-none;
606
- left:100%;
607
- display:none;
608
-
609
- a {
610
- padding: .75rem core.$space-m .75rem core.$space-xxl;
611
- }
612
- }
613
-
614
- a {
615
- display:block;
616
- }
617
- }
618
-
619
- li {
620
- margin-bottom: core.$space-none;
621
-
622
- &:hover {
623
- background-color:#f1f1f1;
624
- }
625
-
626
- }
627
-
628
- .slide-menu__control {
629
- padding-top: 1rem;
630
- padding-bottom: 1rem;
631
- }
632
-
633
- a {
634
- cursor:pointer;
635
- padding: .75rem core.$space-m;
636
- text-decoration:none;
637
- font-size: core.$font-size;
638
- color:core.$uq-purple;
639
- position: relative;
640
-
641
- &:hover {
642
- color:core.$uq-purple;
643
- background-color:#f1f1f1;
644
- }
645
- }
646
-
647
- & .slide-menu__backlink {
648
- font-weight: 500;
649
- padding-left: core.$space-xxl;
650
-
651
- &::before {
652
- content: "";
653
- background-image: url(icon-constants.get-icon("standard--chevron-left-sml", core.$uq-purple));
654
- background-repeat: no-repeat;
655
- width: 1.5rem;
656
- height: 1.5rem;
657
- transform: translateY(50%);
658
- position: absolute;
659
- left: 1.25rem;
660
- top: core.$space-xs;
661
- }
662
- }
663
-
664
- &__decorator {
665
-
666
- &::before {
667
- content: "";
668
- background-image: url(icon-constants.get-icon("standard--chevron-right-sml", core.$uq-purple));
669
- background-repeat: no-repeat;
670
- width: 1.5rem;
671
- height: 1.5rem;
672
- transform: translateY(50%);
673
- position: absolute;
674
- right: 1.5rem;
675
- top: core.$space-xs;
676
- }
677
- }
678
-
679
- /* Controls */
680
- .controls {
681
- display:flex;
682
- margin-bottom:core.$space;
683
- }
684
-
685
- .btn {
686
- padding:.75rem core.$space-m;
687
- flex:1 0 auto;
688
- font-size:90%;
689
- color:core.$uq-purple;
690
- background-color:core.$uq-white;
691
- text-transform:uppercase;
692
-
693
- border:none;
694
- cursor:pointer;
695
- font-family:inherit;
696
- line-height:1;
697
-
698
- &:first-of-type {
699
- text-align:left;
700
-
701
- &:before {
702
- content:"⮜ this";
703
- margin-right:.5rem;
704
- }
705
- }
706
-
707
- &:last-of-type {
708
- text-align:right;
709
-
710
- &:before {content:"✕";
711
- margin-right:.5rem;
712
- }
713
- }
714
- }
715
-
716
- .uq-header__nav-secondary-item {
717
- background-color:#48206C;
718
-
719
- &:hover {
720
- background-color:#48206C;
721
- }
722
- }
723
-
724
- .uq-header__nav-secondary-link {
725
- color:core.$uq-white;
726
-
727
- &:hover {
728
- color:core.$uq-white;
729
- background-color:#48206C;
730
- }
731
- }
732
-
733
- .uq-header__newglobal-nav-parent {
734
- font-weight: 500;
735
- }
736
-
737
- .uq-header__newglobal-nav-item {
738
- background-color:core.$uq-purple;
739
- }
740
-
741
- .uq-header__newglobal-nav-link {
742
- color:core.$uq-white;
743
- background-color:core.$uq-purple;
744
-
745
- &:hover {
746
- color:core.$uq-white;
747
- background-color:core.$uq-purple;
748
- }
749
- }
750
-
751
- .uq-header__newglobal-nav-link .slide-menu__decorator::before {
752
- content: "";
753
- background-image: url(icon-constants.get-icon("standard--chevron-right-sml", core.$uq-white));
754
- }
755
- }
756
-
757
- /* LOCAL SITE NAVIGATION MODIFIERS */
758
-
759
- .global-mobile-nav {
760
-
761
- .uq-site-header__title-container {
762
- margin: 0;
763
- padding-left: 0rem;
764
- padding-right: 0rem;
765
- }
766
-
767
- .uq-site-header__title {
768
- padding: 1rem 1.5rem;
769
- font-size: 1rem;
770
- font-weight: 500;
771
-
772
- &:hover {
773
- background: none;
774
- }
775
- }
776
-
777
- &__audience-link {
778
- font-weight: 500;
779
- }
780
-
781
- }
782
-
783
- .uq-site-header__navigation-toggle {
784
- display: none;
1
+ @use '@uqds/core/src/scss/global' as core;
2
+ @use "@uqds/icon/src/scss/global" as icon-constants;
3
+ @use '@uqds/grid/src/scss/global' as grid;
4
+ @use 'global' as *;
5
+
6
+ .uq-header {
7
+
8
+ background: core.$uq-purple; //linear-gradient(90deg, $uq-purple 0%, 87%, #962A8B 100%);
9
+ display: grid;
10
+ align-items: center;
11
+ grid-template-columns: auto;
12
+ grid-template-areas:
13
+ "mainheader"
14
+ "secondarynav";
15
+ position: relative;
16
+
17
+ @media #{core.$screen-lg-up} {
18
+ grid-template-areas:
19
+ "secondarynav"
20
+ "mainheader";
21
+ }
22
+
23
+ &__container {
24
+
25
+ display: grid;
26
+ align-items: center;
27
+ grid-template-columns: 1fr 15fr 1fr;
28
+ grid-area: mainheader;
29
+ grid-template-areas:
30
+ "menutoggle logo searchtoggle"
31
+ "mainnav-mobile mainnav-mobile mainnav-mobile";
32
+
33
+ @media #{core.$screen-lg-up} {
34
+ max-width: 73.25rem;
35
+ margin-left: auto;
36
+ margin-right: auto;
37
+ grid-template-areas:
38
+ "logo mainnav searchtoggle";
39
+ padding-left: core.$space;
40
+ padding-right: core.$space;
41
+ }
42
+ }
43
+
44
+ &__menu-toggle {
45
+ grid-area: menutoggle;
46
+
47
+ @media #{core.$screen-lg-up} {
48
+ display: none;
49
+ }
50
+ }
51
+
52
+ &__search-toggle {
53
+ grid-area: searchtoggle;
54
+ height: 100%;
55
+ text-align: right;
56
+ color: core.$uq-white;
57
+
58
+ @media #{core.$screen-lg-up} {
59
+ height: auto;
60
+ }
61
+
62
+ .search-toggle__label {
63
+ display: none;
64
+
65
+ @media #{core.$screen-lg-up} {
66
+ display: block;
67
+ font-family: core.$roboto;
68
+ font-size: core.$font-size;
69
+ text-align: right;
70
+ width: 3.2rem;
71
+ }
72
+ }
73
+ }
74
+
75
+ & .nav-primary__toggle {
76
+ background: none;
77
+ border: none;
78
+ padding: 1.75rem core.$space-l;
79
+ height: 100%;
80
+
81
+ @media #{core.$screen-lg-up} {
82
+ padding: 1rem 0 1rem 1.5rem;
83
+ height: auto;
84
+ }
85
+ }
86
+
87
+ & .nav-primary__menu-toggle {
88
+ cursor: pointer;
89
+ color: core.$uq-white;
90
+ position: relative;
91
+ text-indent: -9999px;
92
+ white-space: nowrap;
93
+
94
+ &::before {
95
+ content: "";
96
+ background-image: url(icon-constants.get-icon("standard--navigation-menu", core.$uq-white));
97
+ background-repeat: no-repeat;
98
+ width: 1.5rem;
99
+ height: 1.5rem;
100
+ transform: translate(50%, 50%);
101
+ position: absolute;
102
+ top: .625rem;
103
+ right: core.$space-l;
104
+ }
105
+
106
+ &--is-open {
107
+ &::before {
108
+ background-image: url(icon-constants.get-icon("standard--x", core.$uq-white));
109
+ }
110
+ }
111
+ }
112
+
113
+ & .nav-primary__search-toggle {
114
+ cursor: pointer;
115
+ color: core.$uq-white;
116
+ position: relative;
117
+
118
+ &::before {
119
+ content: "";
120
+ background-image: url(icon-constants.get-icon("standard--search", core.$uq-white));
121
+ background-repeat: no-repeat;
122
+ width: 1.5rem;
123
+ height: 1.5rem;
124
+ transform: translate(50%, 50%);
125
+ position: absolute;
126
+ top: .625rem;
127
+ right: core.$space-l;
128
+
129
+ @media #{core.$screen-lg-up} {
130
+ top: 0.1rem;
131
+ left: -1rem;
132
+ }
133
+ }
134
+
135
+ @media #{core.$screen-lg-up} {
136
+ &:hover {
137
+ color: #d4c8de;
138
+ text-decoration: underline;
139
+ }
140
+ }
141
+
142
+ &--is-open {
143
+
144
+ &::before {
145
+ background-image: url(icon-constants.get-icon("standard--x", core.$uq-white));
146
+ }
147
+ }
148
+
149
+ }
150
+
151
+ &__logo {
152
+ grid-area: logo;
153
+
154
+
155
+ & a {
156
+ display: grid;
157
+ padding: 1rem 0;
158
+ }
159
+
160
+ & img {
161
+ height: 32px;
162
+
163
+ @media #{core.$screen-lg-up} {
164
+ height: 40px;
165
+ }
166
+ }
167
+ }
168
+
169
+ // __nav-primary
170
+
171
+ &__nav-primary {
172
+ grid-area: mainnav;
173
+ display: none;
174
+ width: 100%;
175
+ z-index: 99;
176
+
177
+ @media #{core.$screen-lg-up} {
178
+ display: block;
179
+ }
180
+ }
181
+
182
+ &__nav-primary-container {
183
+
184
+ @media #{core.$screen-lg-up} {
185
+ padding: 0 0 0 core.$space-xl;
186
+ }
187
+ }
188
+
189
+ &__nav-primary-list {
190
+ list-style-type: none;
191
+ margin: 0;
192
+ padding-left: 0;
193
+ display: flex;
194
+ justify-content: flex-start;
195
+ align-items: stretch;
196
+ flex-direction: column;
197
+
198
+ @media #{core.$screen-lg-up} {
199
+ align-items: center;
200
+ flex-direction: row;
201
+ }
202
+ }
203
+
204
+ &__nav-primary-item {
205
+ margin: 0;
206
+ padding-left: 2rem;
207
+
208
+ &:first-child {
209
+ padding-left: 0;
210
+ }
211
+
212
+ &--is-open {
213
+ & > .uq-header__megamenu {
214
+ height: auto;
215
+ visibility: visible;
216
+ }
217
+
218
+ & .uq-header__nav-primary-link {
219
+ border-bottom: 4px solid white;
220
+ }
221
+ }
222
+
223
+ & .uq-header__nav-primary-link--active {
224
+ border-bottom: 4px solid white;
225
+ }
226
+ }
227
+
228
+ &__nav-primary-link {
229
+ display: block;
230
+ color: core.$uq-white; //core.$uq-purple;
231
+ text-decoration: none;
232
+ padding: core.$space core.$space-m;
233
+ transition: background-color .25s,border-color .25s;
234
+ font-weight: 400;
235
+ position: relative;
236
+ border-bottom: 4px solid transparent;
237
+
238
+ &:hover {
239
+ color: core.$uq-white;
240
+ text-decoration: none;
241
+ }
242
+
243
+
244
+ @media #{core.$screen-lg-up} {
245
+ padding: core.$space-l core.$space-s;
246
+ }
247
+ }
248
+
249
+ .nav-primary-link--has-dropdown {
250
+ padding: core.$space-l core.$space-m core.$space-l core.$space-s;
251
+
252
+ &::after {
253
+ content: "";
254
+ background-image: url(icon-constants.get-icon("standard--chevron-down-sml", core.$uq-white));
255
+ background-repeat: no-repeat;
256
+ width: core.$space;
257
+ height: core.$space;
258
+ transform: translateY(50%);
259
+ position: absolute;
260
+ top: 1.7rem;
261
+ right: 1.75rem;
262
+
263
+ @media #{core.$screen-lg-up} {
264
+ right: .25rem;
265
+ }
266
+ }
267
+ }
268
+
269
+ .mega-menu {
270
+ display: none;
271
+ background-color: core.$uq-white;
272
+ list-style-type: none;
273
+ margin: 0;
274
+ padding-left: 0;
275
+
276
+ & li {
277
+
278
+ & a {
279
+ padding-left: core.$space-xxl;
280
+ color: core.$uq-purple;
281
+ }
282
+ }
283
+
284
+ & ul {
285
+ list-style-type: none;
286
+ margin: 0;
287
+ padding-left: 0;
288
+
289
+ & li {
290
+ & a {
291
+ padding-left: core.$space-ul;
292
+ }
293
+ }
294
+ }
295
+ }
296
+
297
+ &__nav-secondary {
298
+ background-color: #48206c;
299
+ grid-area: secondarynav;
300
+ }
301
+
302
+ &__nav-secondary-container {
303
+ @media #{core.$screen-lg-up} {
304
+ text-align: right;
305
+ max-width: 73.25rem;
306
+ margin-left: auto;
307
+ margin-right: auto;
308
+ }
309
+ }
310
+
311
+ &__nav-secondary-list {
312
+ list-style-type: none;
313
+ margin: 0;
314
+ padding-left: 0;
315
+ display: flex;
316
+ justify-content: flex-start;
317
+ align-items: stretch;
318
+ flex-direction: column;
319
+
320
+ @media #{core.$screen-lg-up} {
321
+ justify-content: flex-end;
322
+ align-items: center;
323
+ flex-direction: row;
324
+ }
325
+ }
326
+
327
+ &__nav-secondary-item {
328
+ margin: 0;
329
+ }
330
+
331
+ &__nav-secondary-link {
332
+ display: block;
333
+ color: white;
334
+ padding: core.$space core.$space-m;
335
+
336
+ @media #{core.$screen-lg-up} {
337
+ font-size: core.$font-size-s;
338
+ padding: .625rem core.$space;
339
+ }
340
+
341
+ &:hover {
342
+ color: #d4c8de;
343
+ }
344
+ }
345
+
346
+ &__search {
347
+
348
+ background: core.$uq-purple;
349
+ position: absolute;
350
+ width: 100%;
351
+ top: 3.95rem;
352
+ z-index: 20;
353
+ box-shadow: 0 .75rem core.$space-m rgb(24 24 24 / 20%);
354
+ transition: max-height .2s ease-in-out, transform .2s ease-in-out;//, visibility .2s ease;
355
+ transform: translateY(-1rem);
356
+ max-height: 0;
357
+ overflow: hidden;
358
+ visibility: hidden;
359
+
360
+ @media #{core.$screen-lg-up} {
361
+ top: 8.3rem;
362
+ }
363
+
364
+ &--is-open {
365
+ transform: translateY(0);
366
+ max-height: 50vh;
367
+ visibility: visible;
368
+ }
369
+ }
370
+
371
+ &__search-container {
372
+
373
+ padding: 0 core.$space-m;
374
+
375
+ @media #{core.$screen-lg-up} {
376
+ padding-left: core.$space;
377
+ padding-right: core.$space;
378
+ max-width: 73.25rem;
379
+ margin-left: auto;
380
+ margin-right: auto;
381
+ padding-top: 0;
382
+ padding-bottom: 1rem;
383
+ }
384
+ }
385
+
386
+ &__search-query {
387
+ position: relative;
388
+ display: inline-block;
389
+ max-width: 100%;
390
+ min-width: 100%;
391
+ border-radius: 5px;
392
+ background-position: core.$space;
393
+ padding-top: core.$space;
394
+ padding-bottom: core.$space;
395
+ }
396
+
397
+ &__search-query-label {
398
+ color: core.$uq-white;
399
+ }
400
+
401
+ &__search-query-input {
402
+ margin: 0 !important;
403
+ padding: .75rem core.$space !important;
404
+ }
405
+
406
+ &__search-query-button {
407
+ background-clip: padding-box;
408
+ background-color: core.$uq-white;
409
+ border-radius: 5px;
410
+ border: 2px solid transparent;
411
+ color: core.$uq-purple;
412
+ display: inline-block;
413
+ font-size: core.$font-size;
414
+ height: 2.75rem;
415
+ line-height: 1.5;
416
+ margin-bottom: 0;
417
+ margin-right: 0;
418
+ overflow: hidden;
419
+ position: absolute;
420
+ right: core.$space-s;
421
+ text-decoration: none;
422
+ text-indent: 0;
423
+ top: calc(50% - 1.375rem);
424
+ transition: color .2s,background-color .2s,border-color .2s;
425
+ width: 2.75rem;
426
+
427
+ &::before {
428
+ content: "";
429
+ position: absolute;
430
+ display: block;
431
+ width: core.$space-m;
432
+ height: core.$space-m;
433
+ top: core.$space-s;
434
+ left: core.$space-s;
435
+ background-size: 100%;
436
+ background-image: url(icon-constants.get-icon("standard--search", core.$uq-purple));
437
+ }
438
+ }
439
+
440
+ &__search-query-submit {
441
+ color: transparent;
442
+ position: relative;
443
+ display: block;
444
+ width: 100%;
445
+ height: 100%;
446
+ margin: core.$space-none;
447
+ border: core.$space-none;
448
+ background-color: transparent;
449
+ z-index: 3;
450
+ cursor: pointer;
451
+ outline-offset: -2px;
452
+ font-size: core.$font-size;
453
+ }
454
+
455
+ &__search-range {
456
+
457
+ display: inline-block;
458
+
459
+ & label {
460
+ color: core.$uq-white;
461
+ }
462
+ }
463
+
464
+ .uq-header__search-radio {
465
+ &:checked {
466
+ border-color: core.$uq-white;
467
+
468
+ &:focus {
469
+ border-color: core.$uq-white;
470
+ }
471
+
472
+ &::after {
473
+ background-color: core.$uq-white;
474
+ }
475
+ }
476
+ }
477
+
478
+ &__search-label {
479
+ font-size: .8rem !important;
480
+ line-height: 1.7 !important;
481
+
482
+ @media #{core.$screen-lg-up} {
483
+ font-size: core.$font-size !important;
484
+ line-height: 1.4 !important;
485
+ }
486
+ }
487
+
488
+ &__nav-primary,
489
+ &__nav-secondary {
490
+ @media #{core.$screen-lg-down} {
491
+ display: none;
492
+ }
493
+ }
494
+
495
+ &__megamenu {
496
+ position: absolute;
497
+ top: 8.3rem;
498
+ left: 0;
499
+ width: 100%;
500
+ z-index: 30;
501
+ height: 0;
502
+ visibility: hidden;
503
+ }
504
+
505
+ &__megamenu-container {
506
+ max-width: 73.25rem;
507
+ margin-left: auto;
508
+ margin-right: auto;
509
+
510
+ padding: core.$space core.$space-xxl core.$space-xl core.$space-xxl;
511
+ background: core.$uq-white;
512
+ box-shadow: 0 0.75rem core.$space-m rgb(24 24 24 / 20%);
513
+ border-radius: 0 0 .25rem .25rem;
514
+
515
+ @media #{core.$screen-xl-up} {
516
+ max-width: 77.25rem;
517
+ }
518
+ }
519
+
520
+ .megamenu__row {
521
+ display: grid;
522
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
523
+ }
524
+
525
+ .megamenu__overview-link {
526
+ display: block;
527
+ padding: core.$space core.$space-none;
528
+ color: core.$uq-purple;
529
+ }
530
+
531
+ .megamenu__heading {
532
+ color: core.$uq-purple;
533
+ font-weight: 500;
534
+ padding-top: core.$space-xs;
535
+ padding-bottom: core.$space-xs;
536
+
537
+ &:nth-of-type(2) {
538
+ padding-top: core.$space-xl;
539
+ }
540
+ }
541
+
542
+ .megamenu__menu {
543
+ & ul {
544
+ list-style-type: none;
545
+ margin: core.$space-none;
546
+ padding-left: core.$space-none;
547
+
548
+ & li {
549
+ margin: core.$space-none;
550
+
551
+ & a {
552
+ display: inline-block;
553
+ padding-top: core.$space-s;
554
+ color: core.$uq-purple;
555
+ }
556
+ }
557
+ }
558
+ }
559
+ }
560
+
561
+ :root {
562
+ --app-height: 100%;
563
+ }
564
+
565
+ body.no-scroll {
566
+ position: fixed;
567
+ @media #{core.$screen-lg-up} {
568
+ position: relative;
569
+ }
570
+ }
571
+
572
+ // Slide mobile menu
573
+
574
+ .slide-menu {
575
+ width:100%;
576
+ max-width:100%;
577
+ background-color:#FFFFFF;
578
+ height: calc(var(--app-height) - 4.3rem);
579
+ display:none;
580
+ box-sizing:border-box;
581
+ transition:transform .3s ease-in-out;
582
+ transform:translateX(100%);
583
+ will-change:transform;
584
+ z-index:1000;
585
+ grid-area: mainnav-mobile;
586
+ position:fixed;
587
+ top: 4.3rem;
588
+ right:core.$space-none;
589
+ overflow-y:auto;
590
+ overflow-x:hidden;
591
+ font-size: core.$font-size;
592
+ color:core.$uq-purple;
593
+
594
+ @media #{core.$screen-lg-up} {
595
+ display: none !important;
596
+ }
597
+
598
+ .slide-menu__slider {
599
+ width:100%;
600
+ transform:translateX(0);
601
+ transition:transform .3s ease-in-out;
602
+ will-change:transform;
603
+ }
604
+
605
+ ul {
606
+ position:relative;
607
+ width:100%;
608
+ margin:core.$space-none;
609
+ padding-left:core.$space-none;
610
+ list-style:none;
611
+ background-color: core.$uq-white;
612
+
613
+ ul {
614
+ position:absolute;
615
+ top:core.$space-none;
616
+ left:100%;
617
+ display:none;
618
+
619
+ a {
620
+ padding: .75rem core.$space-m .75rem core.$space-xxl;
621
+ }
622
+ }
623
+
624
+ a {
625
+ display:block;
626
+ }
627
+ }
628
+
629
+ li {
630
+ margin-bottom: core.$space-none;
631
+
632
+ &:hover {
633
+ background-color:#f1f1f1;
634
+ }
635
+
636
+ }
637
+
638
+ .slide-menu__control {
639
+ padding-top: 1rem;
640
+ padding-bottom: 1rem;
641
+ }
642
+
643
+ a {
644
+ cursor:pointer;
645
+ padding: .75rem core.$space-m;
646
+ text-decoration:none;
647
+ font-size: core.$font-size;
648
+ color:core.$uq-purple;
649
+ position: relative;
650
+
651
+ &:hover {
652
+ color:core.$uq-purple;
653
+ background-color:#f1f1f1;
654
+ }
655
+ }
656
+
657
+ & .slide-menu__backlink {
658
+ font-weight: 500;
659
+ padding-left: core.$space-xxl;
660
+
661
+ &::before {
662
+ content: "";
663
+ background-image: url(icon-constants.get-icon("standard--chevron-left-sml", core.$uq-purple));
664
+ background-repeat: no-repeat;
665
+ width: 1.5rem;
666
+ height: 1.5rem;
667
+ transform: translateY(50%);
668
+ position: absolute;
669
+ left: 1.25rem;
670
+ top: core.$space-xs;
671
+ }
672
+ }
673
+
674
+ &__decorator {
675
+
676
+ &::before {
677
+ content: "";
678
+ background-image: url(icon-constants.get-icon("standard--chevron-right-sml", core.$uq-purple));
679
+ background-repeat: no-repeat;
680
+ width: 1.5rem;
681
+ height: 1.5rem;
682
+ transform: translateY(50%);
683
+ position: absolute;
684
+ right: 1.5rem;
685
+ top: core.$space-xs;
686
+ }
687
+ }
688
+
689
+ /* Controls */
690
+ .controls {
691
+ display:flex;
692
+ margin-bottom:core.$space;
693
+ }
694
+
695
+ .btn {
696
+ padding:.75rem core.$space-m;
697
+ flex:1 0 auto;
698
+ font-size:90%;
699
+ color:core.$uq-purple;
700
+ background-color:core.$uq-white;
701
+ text-transform:uppercase;
702
+
703
+ border:none;
704
+ cursor:pointer;
705
+ font-family:inherit;
706
+ line-height:1;
707
+
708
+ &:first-of-type {
709
+ text-align:left;
710
+
711
+ &:before {
712
+ content:"⮜ this";
713
+ margin-right:.5rem;
714
+ }
715
+ }
716
+
717
+ &:last-of-type {
718
+ text-align:right;
719
+
720
+ &:before {content:"✕";
721
+ margin-right:.5rem;
722
+ }
723
+ }
724
+ }
725
+
726
+ .uq-header__nav-secondary-item {
727
+ background-color:#48206C;
728
+
729
+ &:hover {
730
+ background-color:#48206C;
731
+ }
732
+ }
733
+
734
+ .uq-header__nav-secondary-link {
735
+ color:core.$uq-white;
736
+
737
+ &:hover {
738
+ color:core.$uq-white;
739
+ background-color:#48206C;
740
+ }
741
+ }
742
+
743
+ .uq-header__newglobal-nav-parent {
744
+ font-weight: 500;
745
+ }
746
+
747
+ .uq-header__newglobal-nav-item {
748
+ background-color:core.$uq-purple;
749
+ }
750
+
751
+ .uq-header__newglobal-nav-link {
752
+ color:core.$uq-white;
753
+ background-color:core.$uq-purple;
754
+
755
+ &:hover {
756
+ color:core.$uq-white;
757
+ background-color:core.$uq-purple;
758
+ }
759
+ }
760
+
761
+ .uq-header__newglobal-nav-link .slide-menu__decorator::before {
762
+ content: "";
763
+ background-image: url(icon-constants.get-icon("standard--chevron-right-sml", core.$uq-white));
764
+ }
765
+ }
766
+
767
+ /* LOCAL SITE NAVIGATION MODIFIERS */
768
+
769
+ .global-mobile-nav {
770
+
771
+ .uq-site-header__title-container {
772
+ margin: 0;
773
+ padding-left: 0rem;
774
+ padding-right: 0rem;
775
+ }
776
+
777
+ .uq-site-header__title {
778
+ padding: 1rem 1.5rem;
779
+ font-size: 1rem;
780
+ font-weight: 500;
781
+
782
+ &:hover {
783
+ background: none;
784
+ }
785
+ }
786
+
787
+ &__audience-link {
788
+ font-weight: 500;
789
+ }
790
+
791
+ }
792
+
793
+ .uq-site-header__navigation-toggle {
794
+ display: none;
785
795
  }