@uqds/header 1.1.2-alpha.0 → 1.2.0-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.
- package/package.json +6 -6
- package/src/scss/_component.scss +46 -46
- package/src/scss/_global.scss +0 -5
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uqds/header",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0-alpha.0",
|
|
4
4
|
"description": "The POC UQ Header component package",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"uqds",
|
|
@@ -37,13 +37,13 @@
|
|
|
37
37
|
"url": "https://github.com/uq-its-ss/design-system/issues"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@uqds/core": "^1.
|
|
41
|
-
"@uqds/form": "^0.0
|
|
42
|
-
"@uqds/grid": "^0.0.15-alpha.
|
|
43
|
-
"@uqds/icon": "^0.0.15-alpha.
|
|
40
|
+
"@uqds/core": "^1.2.0-alpha.0",
|
|
41
|
+
"@uqds/form": "^0.1.0-alpha.0",
|
|
42
|
+
"@uqds/grid": "^0.0.15-alpha.2",
|
|
43
|
+
"@uqds/icon": "^0.0.15-alpha.2"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"gulp": "^4.0.2"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "78891f49ec037688e08f67f30a52691404325da7"
|
|
49
49
|
}
|
package/src/scss/_component.scss
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
@use "global" as *;
|
|
5
5
|
|
|
6
6
|
.uq-header {
|
|
7
|
-
background: core.$
|
|
7
|
+
background: core.$purple-500; //linear-gradient(90deg, $uq-purple 0%, 87%, #962A8B 100%);
|
|
8
8
|
display: grid;
|
|
9
9
|
align-items: center;
|
|
10
10
|
grid-template-columns: auto;
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
grid-area: searchtoggle;
|
|
51
51
|
height: 100%;
|
|
52
52
|
text-align: right;
|
|
53
|
-
color: core.$
|
|
53
|
+
color: core.$white;
|
|
54
54
|
|
|
55
55
|
@media #{core.$screen-lg-up} {
|
|
56
56
|
height: auto;
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
|
|
84
84
|
& .nav-primary__menu-toggle {
|
|
85
85
|
cursor: pointer;
|
|
86
|
-
color: core.$
|
|
86
|
+
color: core.$white;
|
|
87
87
|
position: relative;
|
|
88
88
|
text-indent: -9999px;
|
|
89
89
|
white-space: nowrap;
|
|
@@ -92,7 +92,7 @@
|
|
|
92
92
|
content: "";
|
|
93
93
|
background-image: url(icon-constants.get-icon(
|
|
94
94
|
"standard--navigation-menu",
|
|
95
|
-
core.$
|
|
95
|
+
core.$white
|
|
96
96
|
));
|
|
97
97
|
background-repeat: no-repeat;
|
|
98
98
|
width: 1.5rem;
|
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
&::before {
|
|
108
108
|
background-image: url(icon-constants.get-icon(
|
|
109
109
|
"standard--x",
|
|
110
|
-
core.$
|
|
110
|
+
core.$white
|
|
111
111
|
));
|
|
112
112
|
}
|
|
113
113
|
}
|
|
@@ -115,14 +115,14 @@
|
|
|
115
115
|
|
|
116
116
|
& .nav-primary__search-toggle {
|
|
117
117
|
cursor: pointer;
|
|
118
|
-
color: core.$
|
|
118
|
+
color: core.$white;
|
|
119
119
|
position: relative;
|
|
120
120
|
|
|
121
121
|
&::before {
|
|
122
122
|
content: "";
|
|
123
123
|
background-image: url(icon-constants.get-icon(
|
|
124
124
|
"standard--search",
|
|
125
|
-
core.$
|
|
125
|
+
core.$white
|
|
126
126
|
));
|
|
127
127
|
background-repeat: no-repeat;
|
|
128
128
|
width: 1.5rem;
|
|
@@ -149,7 +149,7 @@
|
|
|
149
149
|
&::before {
|
|
150
150
|
background-image: url(icon-constants.get-icon(
|
|
151
151
|
"standard--x",
|
|
152
|
-
core.$
|
|
152
|
+
core.$white
|
|
153
153
|
));
|
|
154
154
|
}
|
|
155
155
|
}
|
|
@@ -232,7 +232,7 @@
|
|
|
232
232
|
|
|
233
233
|
&__nav-primary-link {
|
|
234
234
|
display: block;
|
|
235
|
-
color: core.$
|
|
235
|
+
color: core.$white; //core.$purple-500;
|
|
236
236
|
text-decoration: none;
|
|
237
237
|
padding: core.$space-m core.$space-l;
|
|
238
238
|
transition: background-color 0.25s, border-color 0.25s;
|
|
@@ -241,7 +241,7 @@
|
|
|
241
241
|
border-bottom: 4px solid transparent;
|
|
242
242
|
|
|
243
243
|
&:hover {
|
|
244
|
-
color: core.$
|
|
244
|
+
color: core.$white;
|
|
245
245
|
text-decoration: none;
|
|
246
246
|
}
|
|
247
247
|
|
|
@@ -257,7 +257,7 @@
|
|
|
257
257
|
content: "";
|
|
258
258
|
background-image: url(icon-constants.get-icon(
|
|
259
259
|
"standard--chevron-down-sml",
|
|
260
|
-
core.$
|
|
260
|
+
core.$white
|
|
261
261
|
));
|
|
262
262
|
background-repeat: no-repeat;
|
|
263
263
|
width: core.$space-m;
|
|
@@ -275,7 +275,7 @@
|
|
|
275
275
|
|
|
276
276
|
.mega-menu {
|
|
277
277
|
display: none;
|
|
278
|
-
background-color: core.$
|
|
278
|
+
background-color: core.$white;
|
|
279
279
|
list-style-type: none;
|
|
280
280
|
margin: 0;
|
|
281
281
|
padding-left: 0;
|
|
@@ -283,7 +283,7 @@
|
|
|
283
283
|
& li {
|
|
284
284
|
& a {
|
|
285
285
|
padding-left: core.$space-xxxl;
|
|
286
|
-
color: core.$
|
|
286
|
+
color: core.$purple-500;
|
|
287
287
|
text-decoration: none;
|
|
288
288
|
|
|
289
289
|
&:hover {
|
|
@@ -361,7 +361,7 @@
|
|
|
361
361
|
}
|
|
362
362
|
|
|
363
363
|
&__search {
|
|
364
|
-
background: core.$
|
|
364
|
+
background: core.$purple-500;
|
|
365
365
|
position: absolute;
|
|
366
366
|
width: 100%;
|
|
367
367
|
top: 3.95rem;
|
|
@@ -410,7 +410,7 @@
|
|
|
410
410
|
}
|
|
411
411
|
|
|
412
412
|
&__search-query-label {
|
|
413
|
-
color: core.$
|
|
413
|
+
color: core.$white;
|
|
414
414
|
}
|
|
415
415
|
|
|
416
416
|
&__search-query-input {
|
|
@@ -420,10 +420,10 @@
|
|
|
420
420
|
|
|
421
421
|
&__search-query-button {
|
|
422
422
|
background-clip: padding-box;
|
|
423
|
-
background-color: core.$
|
|
423
|
+
background-color: core.$white;
|
|
424
424
|
border-radius: 5px;
|
|
425
425
|
border: 2px solid transparent;
|
|
426
|
-
color: core.$
|
|
426
|
+
color: core.$purple-500;
|
|
427
427
|
display: inline-block;
|
|
428
428
|
font-size: core.$font-size-m;
|
|
429
429
|
height: 2.75rem;
|
|
@@ -450,7 +450,7 @@
|
|
|
450
450
|
background-size: 100%;
|
|
451
451
|
background-image: url(icon-constants.get-icon(
|
|
452
452
|
"standard--search",
|
|
453
|
-
core.$
|
|
453
|
+
core.$purple-500
|
|
454
454
|
));
|
|
455
455
|
}
|
|
456
456
|
}
|
|
@@ -474,20 +474,20 @@
|
|
|
474
474
|
display: inline-block;
|
|
475
475
|
|
|
476
476
|
& label {
|
|
477
|
-
color: core.$
|
|
477
|
+
color: core.$white;
|
|
478
478
|
}
|
|
479
479
|
}
|
|
480
480
|
|
|
481
481
|
.uq-header__search-radio {
|
|
482
482
|
&:checked {
|
|
483
|
-
border-color: core.$
|
|
483
|
+
border-color: core.$white;
|
|
484
484
|
|
|
485
485
|
&:focus {
|
|
486
|
-
border-color: core.$
|
|
486
|
+
border-color: core.$white;
|
|
487
487
|
}
|
|
488
488
|
|
|
489
489
|
&::after {
|
|
490
|
-
background-color: core.$
|
|
490
|
+
background-color: core.$white;
|
|
491
491
|
}
|
|
492
492
|
}
|
|
493
493
|
}
|
|
@@ -525,7 +525,7 @@
|
|
|
525
525
|
margin-right: auto;
|
|
526
526
|
|
|
527
527
|
padding: core.$space-m core.$space-xxxl core.$space-xxl core.$space-xxxl;
|
|
528
|
-
background: core.$
|
|
528
|
+
background: core.$white;
|
|
529
529
|
box-shadow: 0 0.75rem core.$space-l rgb(24 24 24 / 20%);
|
|
530
530
|
border-radius: 0 0 0.25rem 0.25rem;
|
|
531
531
|
|
|
@@ -542,11 +542,11 @@
|
|
|
542
542
|
.megamenu__overview-link {
|
|
543
543
|
display: block;
|
|
544
544
|
padding: core.$space-m core.$space-none;
|
|
545
|
-
color: core.$
|
|
545
|
+
color: core.$purple-500;
|
|
546
546
|
}
|
|
547
547
|
|
|
548
548
|
.megamenu__heading {
|
|
549
|
-
color: core.$
|
|
549
|
+
color: core.$purple-500;
|
|
550
550
|
font-weight: 500;
|
|
551
551
|
padding-top: core.$space-xs;
|
|
552
552
|
padding-bottom: core.$space-xs;
|
|
@@ -568,7 +568,7 @@
|
|
|
568
568
|
& a {
|
|
569
569
|
display: inline-block;
|
|
570
570
|
padding-top: core.$space-s;
|
|
571
|
-
color: core.$
|
|
571
|
+
color: core.$purple-500;
|
|
572
572
|
text-decoration: none;
|
|
573
573
|
}
|
|
574
574
|
}
|
|
@@ -608,7 +608,7 @@ body.no-scroll {
|
|
|
608
608
|
overflow-y: auto;
|
|
609
609
|
overflow-x: hidden;
|
|
610
610
|
font-size: core.$font-size-m;
|
|
611
|
-
color: core.$
|
|
611
|
+
color: core.$purple-500;
|
|
612
612
|
|
|
613
613
|
@media #{core.$screen-lg-up} {
|
|
614
614
|
display: none !important;
|
|
@@ -627,7 +627,7 @@ body.no-scroll {
|
|
|
627
627
|
margin: core.$space-none;
|
|
628
628
|
padding-left: core.$space-none;
|
|
629
629
|
list-style: none;
|
|
630
|
-
background-color: core.$
|
|
630
|
+
background-color: core.$white;
|
|
631
631
|
|
|
632
632
|
ul {
|
|
633
633
|
position: absolute;
|
|
@@ -663,11 +663,11 @@ body.no-scroll {
|
|
|
663
663
|
padding: 0.75rem core.$space-l;
|
|
664
664
|
text-decoration: none;
|
|
665
665
|
font-size: core.$font-size-m;
|
|
666
|
-
color: core.$
|
|
666
|
+
color: core.$purple-500;
|
|
667
667
|
position: relative;
|
|
668
668
|
|
|
669
669
|
&:hover {
|
|
670
|
-
color: core.$
|
|
670
|
+
color: core.$purple-500;
|
|
671
671
|
background-color: #f1f1f1;
|
|
672
672
|
}
|
|
673
673
|
}
|
|
@@ -680,7 +680,7 @@ body.no-scroll {
|
|
|
680
680
|
content: "";
|
|
681
681
|
background-image: url(icon-constants.get-icon(
|
|
682
682
|
"standard--chevron-left-sml",
|
|
683
|
-
core.$
|
|
683
|
+
core.$purple-500
|
|
684
684
|
));
|
|
685
685
|
background-repeat: no-repeat;
|
|
686
686
|
width: 1.5rem;
|
|
@@ -697,7 +697,7 @@ body.no-scroll {
|
|
|
697
697
|
content: "";
|
|
698
698
|
background-image: url(icon-constants.get-icon(
|
|
699
699
|
"standard--chevron-right-sml",
|
|
700
|
-
core.$
|
|
700
|
+
core.$purple-500
|
|
701
701
|
));
|
|
702
702
|
background-repeat: no-repeat;
|
|
703
703
|
width: 1.5rem;
|
|
@@ -719,8 +719,8 @@ body.no-scroll {
|
|
|
719
719
|
padding: 0.75rem core.$space-l;
|
|
720
720
|
flex: 1 0 auto;
|
|
721
721
|
font-size: 90%;
|
|
722
|
-
color: core.$
|
|
723
|
-
background-color: core.$
|
|
722
|
+
color: core.$purple-500;
|
|
723
|
+
background-color: core.$white;
|
|
724
724
|
text-transform: uppercase;
|
|
725
725
|
|
|
726
726
|
border: none;
|
|
@@ -756,10 +756,10 @@ body.no-scroll {
|
|
|
756
756
|
}
|
|
757
757
|
|
|
758
758
|
.uq-header__nav-secondary-link {
|
|
759
|
-
color: core.$
|
|
759
|
+
color: core.$white;
|
|
760
760
|
|
|
761
761
|
&:hover {
|
|
762
|
-
color: core.$
|
|
762
|
+
color: core.$white;
|
|
763
763
|
background-color: #48206c;
|
|
764
764
|
}
|
|
765
765
|
}
|
|
@@ -769,16 +769,16 @@ body.no-scroll {
|
|
|
769
769
|
}
|
|
770
770
|
|
|
771
771
|
.uq-header__newglobal-nav-item {
|
|
772
|
-
background-color: core.$
|
|
772
|
+
background-color: core.$purple-500;
|
|
773
773
|
}
|
|
774
774
|
|
|
775
775
|
.uq-header__newglobal-nav-link {
|
|
776
|
-
color: core.$
|
|
777
|
-
background-color: core.$
|
|
776
|
+
color: core.$white;
|
|
777
|
+
background-color: core.$purple-500;
|
|
778
778
|
|
|
779
779
|
&:hover {
|
|
780
|
-
color: core.$
|
|
781
|
-
background-color: core.$
|
|
780
|
+
color: core.$white;
|
|
781
|
+
background-color: core.$purple-500;
|
|
782
782
|
}
|
|
783
783
|
}
|
|
784
784
|
|
|
@@ -786,7 +786,7 @@ body.no-scroll {
|
|
|
786
786
|
content: "";
|
|
787
787
|
background-image: url(icon-constants.get-icon(
|
|
788
788
|
"standard--chevron-right-sml",
|
|
789
|
-
core.$
|
|
789
|
+
core.$white
|
|
790
790
|
));
|
|
791
791
|
}
|
|
792
792
|
}
|
|
@@ -923,24 +923,24 @@ body.no-scroll {
|
|
|
923
923
|
}
|
|
924
924
|
|
|
925
925
|
.uq-header__search-range label {
|
|
926
|
-
color: core.$
|
|
926
|
+
color: core.$white;
|
|
927
927
|
font-weight: 400;
|
|
928
928
|
display: inline-block;
|
|
929
929
|
vertical-align: top;
|
|
930
930
|
}
|
|
931
931
|
|
|
932
932
|
input[type="radio"].uq-header__search-radio:checked {
|
|
933
|
-
border-color: core.$
|
|
933
|
+
border-color: core.$white;
|
|
934
934
|
border-width: 2px;
|
|
935
935
|
}
|
|
936
936
|
|
|
937
937
|
input[type="radio"].uq-header__search-radio:focus {
|
|
938
|
-
border-color: core.$
|
|
938
|
+
border-color: core.$white;
|
|
939
939
|
}
|
|
940
940
|
|
|
941
941
|
input[type="radio"].uq-header__search-radio:checked::after {
|
|
942
942
|
content: "";
|
|
943
|
-
background-color: core.$
|
|
943
|
+
background-color: core.$white;
|
|
944
944
|
border-radius: 50%;
|
|
945
945
|
content: "";
|
|
946
946
|
display: block;
|