@uqds/header 0.0.7-alpha.0 → 0.0.8-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 -1
  3. package/dist/js/uqds.js +26 -27
  4. package/dist/js/uqds.min.js +1 -1
  5. package/package.json +6 -6
  6. package/src/js/header.js +53 -53
  7. package/src/js/main.js +3 -3
  8. package/src/scss/_component.scss +790 -784
  9. package/src/scss/_global.scss +6 -6
package/src/scss/_component.scss CHANGED
@@ -1,785 +1,791 @@
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
+ & 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
+ visibility: hidden;
355
+
356
+ @media #{core.$screen-lg-up} {
357
+ top: 8.3rem;
358
+ }
359
+
360
+ &--is-open {
361
+ transform: translateY(0);
362
+ max-height: 50vh;
363
+ visibility: visible;
364
+ }
365
+ }
366
+
367
+ &__search-container {
368
+
369
+ padding: 0 core.$space-m;
370
+
371
+ @media #{core.$screen-lg-up} {
372
+ padding-left: core.$space;
373
+ padding-right: core.$space;
374
+ max-width: 73.25rem;
375
+ margin-left: auto;
376
+ margin-right: auto;
377
+ padding-top: 0;
378
+ padding-bottom: 1rem;
379
+ }
380
+ }
381
+
382
+ &__search-query {
383
+ position: relative;
384
+ display: inline-block;
385
+ max-width: 100%;
386
+ min-width: 100%;
387
+ border-radius: 5px;
388
+ background-position: core.$space;
389
+ padding-top: core.$space;
390
+ padding-bottom: core.$space;
391
+ }
392
+
393
+ &__search-query-label {
394
+ color: core.$uq-white;
395
+ }
396
+
397
+ &__search-query-input {
398
+ margin: 0 !important;
399
+ padding: .75rem core.$space !important;
400
+ }
401
+
402
+ &__search-query-button {
403
+ background-clip: padding-box;
404
+ background-color: core.$uq-white;
405
+ border-radius: 5px;
406
+ border: 2px solid transparent;
407
+ color: core.$uq-purple;
408
+ display: inline-block;
409
+ font-size: core.$font-size;
410
+ height: 2.75rem;
411
+ line-height: 1.5;
412
+ margin-bottom: 0;
413
+ margin-right: 0;
414
+ overflow: hidden;
415
+ position: absolute;
416
+ right: core.$space-s;
417
+ text-decoration: none;
418
+ text-indent: 0;
419
+ top: calc(50% - 1.375rem);
420
+ transition: color .2s,background-color .2s,border-color .2s;
421
+ width: 2.75rem;
422
+
423
+ &::before {
424
+ content: "";
425
+ position: absolute;
426
+ display: block;
427
+ width: core.$space-m;
428
+ height: core.$space-m;
429
+ top: core.$space-s;
430
+ left: core.$space-s;
431
+ background-size: 100%;
432
+ background-image: url(icon-constants.get-icon("standard--search", core.$uq-purple));
433
+ }
434
+ }
435
+
436
+ &__search-query-submit {
437
+ color: transparent;
438
+ position: relative;
439
+ display: block;
440
+ width: 100%;
441
+ height: 100%;
442
+ margin: core.$space-none;
443
+ border: core.$space-none;
444
+ background-color: transparent;
445
+ z-index: 3;
446
+ cursor: pointer;
447
+ outline-offset: -2px;
448
+ font-size: core.$font-size;
449
+ }
450
+
451
+ &__search-range {
452
+
453
+ display: inline-block;
454
+
455
+ & label {
456
+ color: core.$uq-white;
457
+ }
458
+ }
459
+
460
+ .uq-header__search-radio {
461
+ &:checked {
462
+ border-color: core.$uq-white;
463
+
464
+ &:focus {
465
+ border-color: core.$uq-white;
466
+ }
467
+
468
+ &::after {
469
+ background-color: core.$uq-white;
470
+ }
471
+ }
472
+ }
473
+
474
+ &__search-label {
475
+ font-size: .8rem !important;
476
+ line-height: 1.7 !important;
477
+
478
+ @media #{core.$screen-lg-up} {
479
+ font-size: core.$font-size !important;
480
+ line-height: 1.4 !important;
481
+ }
482
+ }
483
+
484
+ &__nav-primary,
485
+ &__nav-secondary {
486
+ @media #{core.$screen-lg-down} {
487
+ display: none;
488
+ }
489
+ }
490
+
491
+ &__megamenu {
492
+ position: absolute;
493
+ top: 8.3rem;
494
+ left: 0;
495
+ width: 100%;
496
+ z-index: 30;
497
+ height: 0;
498
+ visibility: hidden;
499
+ }
500
+
501
+ &__megamenu-container {
502
+ max-width: 73.25rem;
503
+ margin-left: auto;
504
+ margin-right: auto;
505
+
506
+ padding: core.$space core.$space-xxl core.$space-xl core.$space-xxl;
507
+ background: core.$uq-white;
508
+ box-shadow: 0 0.75rem core.$space-m rgb(24 24 24 / 20%);
509
+ border-radius: 0 0 .25rem .25rem;
510
+
511
+ @media #{core.$screen-xl-up} {
512
+ max-width: 77.25rem;
513
+ }
514
+ }
515
+
516
+ .megamenu__row {
517
+ display: grid;
518
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
519
+ }
520
+
521
+ .megamenu__overview-link {
522
+ display: block;
523
+ padding: core.$space core.$space-none;
524
+ color: core.$uq-purple;
525
+ }
526
+
527
+ .megamenu__heading {
528
+ color: core.$uq-purple;
529
+ font-weight: 500;
530
+ padding-top: core.$space-xs;
531
+ padding-bottom: core.$space-xs;
532
+
533
+ &:nth-of-type(2) {
534
+ padding-top: core.$space-xl;
535
+ }
536
+ }
537
+
538
+ .megamenu__menu {
539
+ & ul {
540
+ list-style-type: none;
541
+ margin: core.$space-none;
542
+ padding-left: core.$space-none;
543
+
544
+ & li {
545
+ margin: core.$space-none;
546
+
547
+ & a {
548
+ display: inline-block;
549
+ padding-top: core.$space-s;
550
+ color: core.$uq-purple;
551
+ }
552
+ }
553
+ }
554
+ }
555
+ }
556
+
557
+ :root {
558
+ --app-height: 100%;
559
+ }
560
+
561
+ body.no-scroll {
562
+ position: fixed;
563
+ @media #{core.$screen-lg-up} {
564
+ position: relative;
565
+ }
566
+ }
567
+
568
+ // Slide mobile menu
569
+
570
+ .slide-menu {
571
+ width:100%;
572
+ max-width:100%;
573
+ background-color:#FFFFFF;
574
+ height: calc(var(--app-height) - 4.3rem);
575
+ display:none;
576
+ box-sizing:border-box;
577
+ transition:transform .3s ease-in-out;
578
+ transform:translateX(100%);
579
+ will-change:transform;
580
+ z-index:1000;
581
+ grid-area: mainnav-mobile;
582
+ position:fixed;
583
+ top: 4.3rem;
584
+ right:core.$space-none;
585
+ overflow-y:auto;
586
+ overflow-x:hidden;
587
+ font-size: core.$font-size;
588
+ color:core.$uq-purple;
589
+
590
+ @media #{core.$screen-lg-up} {
591
+ display: none !important;
592
+ }
593
+
594
+ .slide-menu__slider {
595
+ width:100%;
596
+ transform:translateX(0);
597
+ transition:transform .3s ease-in-out;
598
+ will-change:transform;
599
+ }
600
+
601
+ ul {
602
+ position:relative;
603
+ width:100%;
604
+ margin:core.$space-none;
605
+ padding-left:core.$space-none;
606
+ list-style:none;
607
+ background-color: core.$uq-white;
608
+
609
+ ul {
610
+ position:absolute;
611
+ top:core.$space-none;
612
+ left:100%;
613
+ display:none;
614
+
615
+ a {
616
+ padding: .75rem core.$space-m .75rem core.$space-xxl;
617
+ }
618
+ }
619
+
620
+ a {
621
+ display:block;
622
+ }
623
+ }
624
+
625
+ li {
626
+ margin-bottom: core.$space-none;
627
+
628
+ &:hover {
629
+ background-color:#f1f1f1;
630
+ }
631
+
632
+ }
633
+
634
+ .slide-menu__control {
635
+ padding-top: 1rem;
636
+ padding-bottom: 1rem;
637
+ }
638
+
639
+ a {
640
+ cursor:pointer;
641
+ padding: .75rem core.$space-m;
642
+ text-decoration:none;
643
+ font-size: core.$font-size;
644
+ color:core.$uq-purple;
645
+ position: relative;
646
+
647
+ &:hover {
648
+ color:core.$uq-purple;
649
+ background-color:#f1f1f1;
650
+ }
651
+ }
652
+
653
+ & .slide-menu__backlink {
654
+ font-weight: 500;
655
+ padding-left: core.$space-xxl;
656
+
657
+ &::before {
658
+ content: "";
659
+ background-image: url(icon-constants.get-icon("standard--chevron-left-sml", core.$uq-purple));
660
+ background-repeat: no-repeat;
661
+ width: 1.5rem;
662
+ height: 1.5rem;
663
+ transform: translateY(50%);
664
+ position: absolute;
665
+ left: 1.25rem;
666
+ top: core.$space-xs;
667
+ }
668
+ }
669
+
670
+ &__decorator {
671
+
672
+ &::before {
673
+ content: "";
674
+ background-image: url(icon-constants.get-icon("standard--chevron-right-sml", core.$uq-purple));
675
+ background-repeat: no-repeat;
676
+ width: 1.5rem;
677
+ height: 1.5rem;
678
+ transform: translateY(50%);
679
+ position: absolute;
680
+ right: 1.5rem;
681
+ top: core.$space-xs;
682
+ }
683
+ }
684
+
685
+ /* Controls */
686
+ .controls {
687
+ display:flex;
688
+ margin-bottom:core.$space;
689
+ }
690
+
691
+ .btn {
692
+ padding:.75rem core.$space-m;
693
+ flex:1 0 auto;
694
+ font-size:90%;
695
+ color:core.$uq-purple;
696
+ background-color:core.$uq-white;
697
+ text-transform:uppercase;
698
+
699
+ border:none;
700
+ cursor:pointer;
701
+ font-family:inherit;
702
+ line-height:1;
703
+
704
+ &:first-of-type {
705
+ text-align:left;
706
+
707
+ &:before {
708
+ content:"⮜ this";
709
+ margin-right:.5rem;
710
+ }
711
+ }
712
+
713
+ &:last-of-type {
714
+ text-align:right;
715
+
716
+ &:before {content:"✕";
717
+ margin-right:.5rem;
718
+ }
719
+ }
720
+ }
721
+
722
+ .uq-header__nav-secondary-item {
723
+ background-color:#48206C;
724
+
725
+ &:hover {
726
+ background-color:#48206C;
727
+ }
728
+ }
729
+
730
+ .uq-header__nav-secondary-link {
731
+ color:core.$uq-white;
732
+
733
+ &:hover {
734
+ color:core.$uq-white;
735
+ background-color:#48206C;
736
+ }
737
+ }
738
+
739
+ .uq-header__newglobal-nav-parent {
740
+ font-weight: 500;
741
+ }
742
+
743
+ .uq-header__newglobal-nav-item {
744
+ background-color:core.$uq-purple;
745
+ }
746
+
747
+ .uq-header__newglobal-nav-link {
748
+ color:core.$uq-white;
749
+ background-color:core.$uq-purple;
750
+
751
+ &:hover {
752
+ color:core.$uq-white;
753
+ background-color:core.$uq-purple;
754
+ }
755
+ }
756
+
757
+ .uq-header__newglobal-nav-link .slide-menu__decorator::before {
758
+ content: "";
759
+ background-image: url(icon-constants.get-icon("standard--chevron-right-sml", core.$uq-white));
760
+ }
761
+ }
762
+
763
+ /* LOCAL SITE NAVIGATION MODIFIERS */
764
+
765
+ .global-mobile-nav {
766
+
767
+ .uq-site-header__title-container {
768
+ margin: 0;
769
+ padding-left: 0rem;
770
+ padding-right: 0rem;
771
+ }
772
+
773
+ .uq-site-header__title {
774
+ padding: 1rem 1.5rem;
775
+ font-size: 1rem;
776
+ font-weight: 500;
777
+
778
+ &:hover {
779
+ background: none;
780
+ }
781
+ }
782
+
783
+ &__audience-link {
784
+ font-weight: 500;
785
+ }
786
+
787
+ }
788
+
789
+ .uq-site-header__navigation-toggle {
790
+ display: none;
785
791
  }