@uqds/header 0.0.7-alpha.0 → 0.0.10-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 +56 -28
  4. package/dist/js/uqds.min.js +1 -1
  5. package/package.json +6 -6
  6. package/src/js/header.js +82 -53
  7. package/src/js/main.js +3 -3
  8. package/src/scss/_component.scss +927 -784
  9. package/src/scss/_global.scss +6 -6
package/src/scss/_component.scss CHANGED
@@ -1,785 +1,928 @@
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
+ max-width: 100%;
568
+ @media #{core.$screen-lg-up} {
569
+ position: relative;
570
+ }
571
+ }
572
+
573
+ // Slide mobile menu
574
+
575
+ .slide-menu {
576
+ width:100%;
577
+ max-width:100%;
578
+ background-color:#FFFFFF;
579
+ height: calc(var(--app-height) - 4.3rem);
580
+ display:none;
581
+ box-sizing:border-box;
582
+ transition:transform .3s ease-in-out;
583
+ transform:translateX(100%);
584
+ will-change:transform;
585
+ z-index:1000;
586
+ grid-area: mainnav-mobile;
587
+ position:fixed;
588
+ top: 4.3rem;
589
+ right:core.$space-none;
590
+ overflow-y:auto;
591
+ overflow-x:hidden;
592
+ font-size: core.$font-size;
593
+ color:core.$uq-purple;
594
+
595
+ @media #{core.$screen-lg-up} {
596
+ display: none !important;
597
+ }
598
+
599
+ .slide-menu__slider {
600
+ width:100%;
601
+ transform:translateX(0);
602
+ transition:transform .3s ease-in-out;
603
+ will-change:transform;
604
+ }
605
+
606
+ ul {
607
+ position:relative;
608
+ width:100%;
609
+ margin:core.$space-none;
610
+ padding-left:core.$space-none;
611
+ list-style:none;
612
+ background-color: core.$uq-white;
613
+
614
+ ul {
615
+ position:absolute;
616
+ top:core.$space-none;
617
+ left:100%;
618
+ display:none;
619
+
620
+ a {
621
+ padding: .75rem core.$space-m .75rem core.$space-xxl;
622
+ }
623
+ }
624
+
625
+ a {
626
+ display:block;
627
+ }
628
+ }
629
+
630
+ li {
631
+ margin-bottom: core.$space-none;
632
+
633
+ &:hover {
634
+ background-color:#f1f1f1;
635
+ }
636
+
637
+ }
638
+
639
+ .slide-menu__control {
640
+ padding-top: 1rem;
641
+ padding-bottom: 1rem;
642
+ }
643
+
644
+ a {
645
+ cursor:pointer;
646
+ padding: .75rem core.$space-m;
647
+ text-decoration:none;
648
+ font-size: core.$font-size;
649
+ color:core.$uq-purple;
650
+ position: relative;
651
+
652
+ &:hover {
653
+ color:core.$uq-purple;
654
+ background-color:#f1f1f1;
655
+ }
656
+ }
657
+
658
+ & .slide-menu__backlink {
659
+ font-weight: 500;
660
+ padding-left: core.$space-xxl;
661
+
662
+ &::before {
663
+ content: "";
664
+ background-image: url(icon-constants.get-icon("standard--chevron-left-sml", core.$uq-purple));
665
+ background-repeat: no-repeat;
666
+ width: 1.5rem;
667
+ height: 1.5rem;
668
+ transform: translateY(50%);
669
+ position: absolute;
670
+ left: 1.25rem;
671
+ top: core.$space-xs;
672
+ }
673
+ }
674
+
675
+ &__decorator {
676
+
677
+ &::before {
678
+ content: "";
679
+ background-image: url(icon-constants.get-icon("standard--chevron-right-sml", core.$uq-purple));
680
+ background-repeat: no-repeat;
681
+ width: 1.5rem;
682
+ height: 1.5rem;
683
+ transform: translateY(50%);
684
+ position: absolute;
685
+ right: 1.5rem;
686
+ top: core.$space-xs;
687
+ }
688
+ }
689
+
690
+ /* Controls */
691
+ .controls {
692
+ display:flex;
693
+ margin-bottom:core.$space;
694
+ }
695
+
696
+ .btn {
697
+ padding:.75rem core.$space-m;
698
+ flex:1 0 auto;
699
+ font-size:90%;
700
+ color:core.$uq-purple;
701
+ background-color:core.$uq-white;
702
+ text-transform:uppercase;
703
+
704
+ border:none;
705
+ cursor:pointer;
706
+ font-family:inherit;
707
+ line-height:1;
708
+
709
+ &:first-of-type {
710
+ text-align:left;
711
+
712
+ &:before {
713
+ content:"⮜ this";
714
+ margin-right:.5rem;
715
+ }
716
+ }
717
+
718
+ &:last-of-type {
719
+ text-align:right;
720
+
721
+ &:before {content:"✕";
722
+ margin-right:.5rem;
723
+ }
724
+ }
725
+ }
726
+
727
+ .uq-header__nav-secondary-item {
728
+ background-color:#48206C;
729
+
730
+ &:hover {
731
+ background-color:#48206C;
732
+ }
733
+ }
734
+
735
+ .uq-header__nav-secondary-link {
736
+ color:core.$uq-white;
737
+
738
+ &:hover {
739
+ color:core.$uq-white;
740
+ background-color:#48206C;
741
+ }
742
+ }
743
+
744
+ .uq-header__newglobal-nav-parent {
745
+ font-weight: 500;
746
+ }
747
+
748
+ .uq-header__newglobal-nav-item {
749
+ background-color:core.$uq-purple;
750
+ }
751
+
752
+ .uq-header__newglobal-nav-link {
753
+ color:core.$uq-white;
754
+ background-color:core.$uq-purple;
755
+
756
+ &:hover {
757
+ color:core.$uq-white;
758
+ background-color:core.$uq-purple;
759
+ }
760
+ }
761
+
762
+ .uq-header__newglobal-nav-link .slide-menu__decorator::before {
763
+ content: "";
764
+ background-image: url(icon-constants.get-icon("standard--chevron-right-sml", core.$uq-white));
765
+ }
766
+ }
767
+
768
+ /* LOCAL SITE NAVIGATION MODIFIERS */
769
+
770
+ .global-mobile-nav {
771
+
772
+ .uq-site-header__title-container {
773
+ margin: 0;
774
+ padding: 1rem 1.5rem;
775
+ }
776
+
777
+ .uq-site-header__title {
778
+ padding: 0;
779
+ font-size: 1rem;
780
+ font-weight: 500;
781
+ display:block;
782
+
783
+ &:hover {
784
+ background: none;
785
+ }
786
+ }
787
+
788
+ &__audience-link {
789
+ font-weight: 500;
790
+ }
791
+
792
+ }
793
+
794
+ .uq-site-header__navigation-toggle {
795
+ display: none;
796
+ }
797
+
798
+ /* D7 overrides and hacks */
799
+
800
+ .admin-menu {
801
+ .slide-menu {
802
+ top: 7.5rem;
803
+
804
+ @media #{core.$screen-md-up} {
805
+ top: 6.15rem;
806
+ }
807
+
808
+ }
809
+ }
810
+ .uq-header {
811
+ line-height: 1.5;
812
+ font-family: core.$roboto;
813
+ }
814
+ .uq-header__logo img {
815
+ max-width: unset;
816
+ }
817
+
818
+ .uq-header__search-query-submit {
819
+ background-color: unset !important;
820
+ }
821
+
822
+ .uq-header__search-range .uq-header__search-label {
823
+ max-width: unset;
824
+ }
825
+
826
+ .uq-header__nav-primary-list li {
827
+ margin: 0;
828
+ }
829
+
830
+ .uq-header__nav-primary-list li:hover .uq-header__nav-primary-link {
831
+ border-bottom: 4px solid #fff;
832
+ }
833
+
834
+ .uq-header__nav-primary-link, .uq-header__nav-primary-link:focus {
835
+ display: block;
836
+ color: #fff;
837
+ text-decoration: none;
838
+ transition: background-color .25s,border-color .25s;
839
+ font-weight: 400;
840
+ position: relative;
841
+ border-bottom: 4px solid core.$uq-purple;
842
+ }
843
+
844
+ .uq-header a:focus {
845
+ color: #d4c8de;
846
+ }
847
+
848
+ .uq-header__search-container {
849
+ form, fieldset {
850
+ border: unset;
851
+ padding: 0;
852
+ margin: 0;
853
+ }
854
+ }
855
+
856
+ .uq-header__search-query-input {
857
+ height: 45px !important;
858
+ }
859
+
860
+ .uq-header .nav-primary__search-toggle {
861
+ margin-bottom: 0;
862
+ }
863
+
864
+ .uq-header .nav-primary__menu-toggle {
865
+ margin-bottom: 0 !important;
866
+ font: initial;
867
+ font-size: 0.833rem;
868
+ line-height: normal;
869
+ }
870
+
871
+
872
+ /* D7 and D9 search fixes */
873
+ .uq-header__search-range {
874
+ display: inline-block;
875
+ }
876
+
877
+ .uq-header__search-range input[type="radio"] {
878
+ height: 20px;
879
+ width: 20px;
880
+ vertical-align: top;
881
+ display: inline-block;
882
+ border-radius: 50%;
883
+ background-color: transparent;
884
+ margin:3px 3px 0 5px;
885
+ position: absolute;
886
+
887
+ /* Missing form component styles */
888
+ appearance: none;
889
+ -webkit-appearance: none;
890
+ border: 1px solid #e7e3e0;
891
+ cursor: pointer;
892
+ }
893
+ .uq-header__search-range input[type=radio]+label {
894
+ margin-bottom: 1rem;
895
+ margin-left: 0.5rem;
896
+ margin-right: 1rem;
897
+ padding-top: 0.125rem;
898
+ padding-left: 1.5rem;
899
+ }
900
+
901
+ .uq-header__search-range label {
902
+ color: core.$uq-white;
903
+ font-weight: 400;
904
+ display: inline-block;
905
+ vertical-align: top;
906
+ }
907
+
908
+ input[type="radio"].uq-header__search-radio:checked {
909
+ border-color: core.$uq-white;
910
+ border-width: 2px;
911
+ }
912
+
913
+ input[type="radio"].uq-header__search-radio:focus {
914
+ border-color: core.$uq-white;
915
+ }
916
+
917
+ input[type="radio"].uq-header__search-radio:checked::after {
918
+ content:"";
919
+ background-color: core.$uq-white;
920
+ border-radius: 50%;
921
+ content: "";
922
+ display: block;
923
+ position: absolute;
924
+ top: 3px;
925
+ left: 3px;
926
+ height: 10px;
927
+ width: 10px;
785
928
  }