@uqds/header 0.0.12-alpha.0 → 1.0.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 +34 -34
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uqds/header",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.0.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": "^
|
|
41
|
-
"@uqds/form": "^0.0.
|
|
42
|
-
"@uqds/grid": "^0.0.
|
|
43
|
-
"@uqds/icon": "^0.0.
|
|
40
|
+
"@uqds/core": "^1.0.0",
|
|
41
|
+
"@uqds/form": "^0.0.13-alpha.0",
|
|
42
|
+
"@uqds/grid": "^0.0.13-alpha.0",
|
|
43
|
+
"@uqds/icon": "^0.0.13-alpha.0"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"gulp": "^4.0.2"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "07bdc5a8169d386baae8ea4ffa5b4a75fc7e9ebb"
|
|
49
49
|
}
|
package/src/scss/_component.scss
CHANGED
|
@@ -33,8 +33,8 @@
|
|
|
33
33
|
margin-left: auto;
|
|
34
34
|
margin-right: auto;
|
|
35
35
|
grid-template-areas: "logo mainnav searchtoggle";
|
|
36
|
-
padding-left: core.$space;
|
|
37
|
-
padding-right: core.$space;
|
|
36
|
+
padding-left: core.$space-m;
|
|
37
|
+
padding-right: core.$space-m;
|
|
38
38
|
}
|
|
39
39
|
}
|
|
40
40
|
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
& .nav-primary__toggle {
|
|
73
73
|
background: none;
|
|
74
74
|
border: none;
|
|
75
|
-
padding: 1.75rem core.$space-
|
|
75
|
+
padding: 1.75rem core.$space-xl;
|
|
76
76
|
height: 100%;
|
|
77
77
|
|
|
78
78
|
@media #{core.$screen-lg-up} {
|
|
@@ -100,7 +100,7 @@
|
|
|
100
100
|
transform: translate(50%, 50%);
|
|
101
101
|
position: absolute;
|
|
102
102
|
top: 0.625rem;
|
|
103
|
-
right: core.$space-
|
|
103
|
+
right: core.$space-xl;
|
|
104
104
|
}
|
|
105
105
|
|
|
106
106
|
&--is-open {
|
|
@@ -130,7 +130,7 @@
|
|
|
130
130
|
transform: translate(50%, 50%);
|
|
131
131
|
position: absolute;
|
|
132
132
|
top: 0.625rem;
|
|
133
|
-
right: core.$space-
|
|
133
|
+
right: core.$space-xl;
|
|
134
134
|
|
|
135
135
|
@media #{core.$screen-lg-up} {
|
|
136
136
|
top: 0.1rem;
|
|
@@ -187,7 +187,7 @@
|
|
|
187
187
|
|
|
188
188
|
&__nav-primary-container {
|
|
189
189
|
@media #{core.$screen-lg-up} {
|
|
190
|
-
padding: 0 0 0 core.$space-
|
|
190
|
+
padding: 0 0 0 core.$space-xxl;
|
|
191
191
|
}
|
|
192
192
|
}
|
|
193
193
|
|
|
@@ -234,7 +234,7 @@
|
|
|
234
234
|
display: block;
|
|
235
235
|
color: core.$uq-white; //core.$uq-purple;
|
|
236
236
|
text-decoration: none;
|
|
237
|
-
padding: core.$space core.$space-
|
|
237
|
+
padding: core.$space-m core.$space-l;
|
|
238
238
|
transition: background-color 0.25s, border-color 0.25s;
|
|
239
239
|
font-weight: 400;
|
|
240
240
|
position: relative;
|
|
@@ -246,12 +246,12 @@
|
|
|
246
246
|
}
|
|
247
247
|
|
|
248
248
|
@media #{core.$screen-lg-up} {
|
|
249
|
-
padding: core.$space-
|
|
249
|
+
padding: core.$space-xl core.$space-s;
|
|
250
250
|
}
|
|
251
251
|
}
|
|
252
252
|
|
|
253
253
|
.nav-primary-link--has-dropdown {
|
|
254
|
-
padding: core.$space-
|
|
254
|
+
padding: core.$space-xl core.$space-l core.$space-xl core.$space-s;
|
|
255
255
|
|
|
256
256
|
&::after {
|
|
257
257
|
content: "";
|
|
@@ -260,8 +260,8 @@
|
|
|
260
260
|
core.$uq-white
|
|
261
261
|
));
|
|
262
262
|
background-repeat: no-repeat;
|
|
263
|
-
width: core.$space;
|
|
264
|
-
height: core.$space;
|
|
263
|
+
width: core.$space-m;
|
|
264
|
+
height: core.$space-m;
|
|
265
265
|
transform: translateY(50%);
|
|
266
266
|
position: absolute;
|
|
267
267
|
top: 1.7rem;
|
|
@@ -282,7 +282,7 @@
|
|
|
282
282
|
|
|
283
283
|
& li {
|
|
284
284
|
& a {
|
|
285
|
-
padding-left: core.$space-
|
|
285
|
+
padding-left: core.$space-xxxl;
|
|
286
286
|
color: core.$uq-purple;
|
|
287
287
|
}
|
|
288
288
|
}
|
|
@@ -294,7 +294,7 @@
|
|
|
294
294
|
|
|
295
295
|
& li {
|
|
296
296
|
& a {
|
|
297
|
-
padding-left: core.$space-
|
|
297
|
+
padding-left: core.$space-uul;
|
|
298
298
|
}
|
|
299
299
|
}
|
|
300
300
|
}
|
|
@@ -337,11 +337,11 @@
|
|
|
337
337
|
&__nav-secondary-link {
|
|
338
338
|
display: block;
|
|
339
339
|
color: white;
|
|
340
|
-
padding: core.$space core.$space-
|
|
340
|
+
padding: core.$space-m core.$space-l;
|
|
341
341
|
|
|
342
342
|
@media #{core.$screen-lg-up} {
|
|
343
343
|
font-size: core.$font-size-s;
|
|
344
|
-
padding: 0.625rem core.$space;
|
|
344
|
+
padding: 0.625rem core.$space-m;
|
|
345
345
|
}
|
|
346
346
|
|
|
347
347
|
&:hover {
|
|
@@ -355,7 +355,7 @@
|
|
|
355
355
|
width: 100%;
|
|
356
356
|
top: 3.95rem;
|
|
357
357
|
z-index: 20;
|
|
358
|
-
box-shadow: 0 0.75rem core.$space-
|
|
358
|
+
box-shadow: 0 0.75rem core.$space-l rgb(24 24 24 / 20%);
|
|
359
359
|
transition: max-height 0.2s ease-in-out, transform 0.2s ease-in-out; //, visibility .2s ease;
|
|
360
360
|
transform: translateY(-1rem);
|
|
361
361
|
max-height: 0;
|
|
@@ -374,11 +374,11 @@
|
|
|
374
374
|
}
|
|
375
375
|
|
|
376
376
|
&__search-container {
|
|
377
|
-
padding: 0 core.$space-
|
|
377
|
+
padding: 0 core.$space-l;
|
|
378
378
|
|
|
379
379
|
@media #{core.$screen-lg-up} {
|
|
380
|
-
padding-left: core.$space;
|
|
381
|
-
padding-right: core.$space;
|
|
380
|
+
padding-left: core.$space-m;
|
|
381
|
+
padding-right: core.$space-m;
|
|
382
382
|
max-width: 73.25rem;
|
|
383
383
|
margin-left: auto;
|
|
384
384
|
margin-right: auto;
|
|
@@ -393,9 +393,9 @@
|
|
|
393
393
|
max-width: 100%;
|
|
394
394
|
min-width: 100%;
|
|
395
395
|
border-radius: 5px;
|
|
396
|
-
background-position: core.$space;
|
|
397
|
-
padding-top: core.$space;
|
|
398
|
-
padding-bottom: core.$space;
|
|
396
|
+
background-position: core.$space-m;
|
|
397
|
+
padding-top: core.$space-m;
|
|
398
|
+
padding-bottom: core.$space-m;
|
|
399
399
|
}
|
|
400
400
|
|
|
401
401
|
&__search-query-label {
|
|
@@ -404,7 +404,7 @@
|
|
|
404
404
|
|
|
405
405
|
&__search-query-input {
|
|
406
406
|
margin: 0 !important;
|
|
407
|
-
padding: 0.75rem core.$space !important;
|
|
407
|
+
padding: 0.75rem core.$space-m !important;
|
|
408
408
|
}
|
|
409
409
|
|
|
410
410
|
&__search-query-button {
|
|
@@ -432,8 +432,8 @@
|
|
|
432
432
|
content: "";
|
|
433
433
|
position: absolute;
|
|
434
434
|
display: block;
|
|
435
|
-
width: core.$space-
|
|
436
|
-
height: core.$space-
|
|
435
|
+
width: core.$space-l;
|
|
436
|
+
height: core.$space-l;
|
|
437
437
|
top: core.$space-s;
|
|
438
438
|
left: core.$space-s;
|
|
439
439
|
background-size: 100%;
|
|
@@ -513,9 +513,9 @@
|
|
|
513
513
|
margin-left: auto;
|
|
514
514
|
margin-right: auto;
|
|
515
515
|
|
|
516
|
-
padding: core.$space core.$space-
|
|
516
|
+
padding: core.$space-m core.$space-xxxl core.$space-xxl core.$space-xxxl;
|
|
517
517
|
background: core.$uq-white;
|
|
518
|
-
box-shadow: 0 0.75rem core.$space-
|
|
518
|
+
box-shadow: 0 0.75rem core.$space-l rgb(24 24 24 / 20%);
|
|
519
519
|
border-radius: 0 0 0.25rem 0.25rem;
|
|
520
520
|
|
|
521
521
|
@media #{core.$screen-xl-up} {
|
|
@@ -530,7 +530,7 @@
|
|
|
530
530
|
|
|
531
531
|
.megamenu__overview-link {
|
|
532
532
|
display: block;
|
|
533
|
-
padding: core.$space core.$space-none;
|
|
533
|
+
padding: core.$space-m core.$space-none;
|
|
534
534
|
color: core.$uq-purple;
|
|
535
535
|
}
|
|
536
536
|
|
|
@@ -541,7 +541,7 @@
|
|
|
541
541
|
padding-bottom: core.$space-xs;
|
|
542
542
|
|
|
543
543
|
&:nth-of-type(2) {
|
|
544
|
-
padding-top: core.$space-
|
|
544
|
+
padding-top: core.$space-xxl;
|
|
545
545
|
}
|
|
546
546
|
}
|
|
547
547
|
|
|
@@ -624,7 +624,7 @@ body.no-scroll {
|
|
|
624
624
|
display: none;
|
|
625
625
|
|
|
626
626
|
a {
|
|
627
|
-
padding: 0.75rem core.$space-
|
|
627
|
+
padding: 0.75rem core.$space-l 0.75rem core.$space-xxxl;
|
|
628
628
|
}
|
|
629
629
|
}
|
|
630
630
|
|
|
@@ -648,7 +648,7 @@ body.no-scroll {
|
|
|
648
648
|
|
|
649
649
|
a {
|
|
650
650
|
cursor: pointer;
|
|
651
|
-
padding: 0.75rem core.$space-
|
|
651
|
+
padding: 0.75rem core.$space-l;
|
|
652
652
|
text-decoration: none;
|
|
653
653
|
font-size: core.$font-size;
|
|
654
654
|
color: core.$uq-purple;
|
|
@@ -662,7 +662,7 @@ body.no-scroll {
|
|
|
662
662
|
|
|
663
663
|
& .slide-menu__backlink {
|
|
664
664
|
font-weight: 500;
|
|
665
|
-
padding-left: core.$space-
|
|
665
|
+
padding-left: core.$space-xxxl;
|
|
666
666
|
|
|
667
667
|
&::before {
|
|
668
668
|
content: "";
|
|
@@ -700,11 +700,11 @@ body.no-scroll {
|
|
|
700
700
|
/* Controls */
|
|
701
701
|
.controls {
|
|
702
702
|
display: flex;
|
|
703
|
-
margin-bottom: core.$space;
|
|
703
|
+
margin-bottom: core.$space-m;
|
|
704
704
|
}
|
|
705
705
|
|
|
706
706
|
.btn {
|
|
707
|
-
padding: 0.75rem core.$space-
|
|
707
|
+
padding: 0.75rem core.$space-l;
|
|
708
708
|
flex: 1 0 auto;
|
|
709
709
|
font-size: 90%;
|
|
710
710
|
color: core.$uq-purple;
|