@uqds/side-nav 4.0.6 → 4.0.7-alpha.1
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/dist/css/main.css +1 -1
- package/package.json +4 -5
- package/src/scss/_component.scss +28 -28
package/dist/css/main.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
a.uq-icon::before{height:1.5em;width:1.5em;height:1lh;width:1.2lh;background-position:left bottom;background-size:contain;position:absolute;margin-right:unset;left:-1.2lh}a.uq-icon{margin-left:1.2lh;position:relative}a.uq-icon.uq-icon--right{margin-left:unset;margin-right:1.2lh}a.uq-icon.uq-icon--right::before{left:unset;right:-1.2lh;background-position:right bottom}.uq-side-nav{color
|
|
1
|
+
a.uq-icon::before{height:1.5em;width:1.5em;height:1lh;width:1.2lh;background-position:left bottom;background-size:contain;position:absolute;margin-right:unset;left:-1.2lh}a.uq-icon{margin-left:1.2lh;position:relative}a.uq-icon.uq-icon--right{margin-left:unset;margin-right:1.2lh}a.uq-icon.uq-icon--right::before{left:unset;right:-1.2lh;background-position:right bottom}.uq-side-nav{color:var(--uq-grey-900);border-top:var(--uq-space-xxs) solid var(--uq-purple-500);box-sizing:border-box;font-family:var(--uq-font);font-size:var(--uq-font-size-m);font-weight:var(--uq-font-weight-normal);line-height:var(--uq-line-height-long)}.uq-side-nav *,.uq-side-nav *::before,.uq-side-nav *::after{box-sizing:border-box}.uq-side-nav__title{margin:var(--uq-space-none);padding:var(--uq-space-m) var(--uq-space-l)}.uq-side-nav__title-link{color:var(--uq-purple-500);text-decoration:none}.uq-side-nav__title-link:hover,.uq-side-nav__title-link:focus{color:var(--uq-purple-500);text-decoration:underline}.uq-side-nav__list{border-top:1px solid var(--uq-grey-200);display:block;list-style-type:none;margin:var(--uq-space-none);padding:var(--uq-space-none)}.uq-side-nav__list--level-2{background-color:var(--uq-grey-50);display:block;visibility:hidden;position:relative;height:0;left:0;width:100%;opacity:0;transform:translateY(calc(-1 * var(--uq-space-xs)))}.uq-side-nav__list--level-2 .uq-side-nav__list-item:last-child{border-bottom:none}.uq-side-nav__list--level-2 .uq-side-nav__link{padding:var(--uq-space-m) var(--uq-space-m) var(--uq-space-m) var(--uq-space-xxxl) !important}.uq-side-nav__list--level-2 .uq-side-nav__link:hover,.uq-side-nav__list--level-2 .uq-side-nav__link:focus{background-color:var(--uq-grey-200) !important}.uq-side-nav__list-item{border-bottom:1px solid var(--uq-grey-200);display:block;margin:var(--uq-space-none);padding:var(--uq-space-none);position:relative}.uq-side-nav__list-item .uq-side-nav__link{display:block;padding:var(--uq-space-m) var(--uq-space-l);color:var(--uq-grey-900);text-decoration:none;font-weight:var(--uq-font-weight-normal)}.uq-side-nav__list-item .uq-side-nav__link:hover,.uq-side-nav__list-item .uq-side-nav__link:focus{background-color:rgba(0,0,0,0);text-decoration:underline}.uq-side-nav__list-item .uq-side-nav__list-item--active .uq-side-nav__link{font-weight:var(--uq-font-weight-medium)}.uq-side-nav__list-item--open>.uq-side-nav__link:hover{background-color:var(--uq-grey-50)}.uq-side-nav__list-item__sub-toggle{position:absolute;top:0;right:0;display:none;width:3rem;height:3.5rem;padding:var(--uq-space-m) var(--uq-space-m);text-indent:-100vw;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2351247a'%3e%3cpath d='m14.285 5.145-6 6.167a.41.41 0 0 1-.598 0L1.715 5.145' fill='none' stroke='%2351247a' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");background-size:1.2rem;background-position:center center;background-repeat:no-repeat;overflow:hidden}.uq-side-nav__list-item--open .uq-side-nav__list-item__sub-toggle,.uq-side-nav__list-item--has-subnav:focus .uq-side-nav__list-item__sub-toggle{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2351247a'%3e%3cpath d='m1.715 10.855 6-6.168a.41.41 0 0 1 .597 0l5.973 6.168' fill='none' stroke='%2351247a' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}.uq-side-nav__list-item--open .uq-side-nav__list--level-2,.uq-side-nav__list-item--has-subnav:focus .uq-side-nav__list--level-2{opacity:1;height:auto;visibility:visible;transform:translateY(0);z-index:20}.uq-side-nav__list-item--active .uq-side-nav__link,.uq-side-nav__list-item:focus .uq-side-nav__link{background-color:var(--uq-grey-50)}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uqds/side-nav",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.7-alpha.1",
|
|
4
4
|
"description": "Side nav (title, side navigation)",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"uqds",
|
|
@@ -17,8 +17,7 @@
|
|
|
17
17
|
},
|
|
18
18
|
"author": {
|
|
19
19
|
"name": "University of Queensland",
|
|
20
|
-
"
|
|
21
|
-
"url": "https://uq.edu.au"
|
|
20
|
+
"url": "https://about.uq.edu.au/web-feedback?r=https://design-system.uq.edu.au"
|
|
22
21
|
},
|
|
23
22
|
"homepage": "https://github.com/uq-its-ss/design-system#readme",
|
|
24
23
|
"license": "ISC",
|
|
@@ -45,8 +44,8 @@
|
|
|
45
44
|
"url": "https://github.com/uq-its-ss/design-system/issues"
|
|
46
45
|
},
|
|
47
46
|
"dependencies": {
|
|
48
|
-
"@uqds/core": "^5.0.
|
|
47
|
+
"@uqds/core": "^5.0.3-alpha.0",
|
|
49
48
|
"@uqds/icon": "^4.0.6"
|
|
50
49
|
},
|
|
51
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "999347ce02f23d7425d7c9af225531a43e01f4e9"
|
|
52
51
|
}
|
package/src/scss/_component.scss
CHANGED
|
@@ -3,13 +3,13 @@
|
|
|
3
3
|
@use "global" as *;
|
|
4
4
|
|
|
5
5
|
.uq-side-nav {
|
|
6
|
-
color:
|
|
7
|
-
border-top:
|
|
6
|
+
color: var(--uq-grey-900);
|
|
7
|
+
border-top: var(--uq-space-xxs) solid var(--uq-purple-500);
|
|
8
8
|
box-sizing: border-box;
|
|
9
|
-
font-family:
|
|
10
|
-
font-size:
|
|
11
|
-
font-weight:
|
|
12
|
-
line-height:
|
|
9
|
+
font-family: var(--uq-font);
|
|
10
|
+
font-size: var(--uq-font-size-m);
|
|
11
|
+
font-weight: var(--uq-font-weight-normal);
|
|
12
|
+
line-height: var(--uq-line-height-long);
|
|
13
13
|
|
|
14
14
|
*,
|
|
15
15
|
*::before,
|
|
@@ -18,31 +18,30 @@
|
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
&__title {
|
|
21
|
-
margin:
|
|
22
|
-
padding:
|
|
21
|
+
margin: var(--uq-space-none);
|
|
22
|
+
padding: var(--uq-space-m) var(--uq-space-l);
|
|
23
23
|
|
|
24
24
|
&-link {
|
|
25
|
-
|
|
26
|
-
color: core.$purple-500;
|
|
25
|
+
color: var(--uq-purple-500);
|
|
27
26
|
text-decoration: none;
|
|
28
27
|
|
|
29
28
|
&:hover,
|
|
30
29
|
&:focus {
|
|
31
|
-
color:
|
|
30
|
+
color: var(--uq-purple-500);
|
|
32
31
|
text-decoration: underline;
|
|
33
32
|
}
|
|
34
33
|
}
|
|
35
34
|
}
|
|
36
35
|
|
|
37
36
|
&__list {
|
|
38
|
-
border-top: 1px solid
|
|
37
|
+
border-top: 1px solid var(--uq-grey-200);
|
|
39
38
|
display: block;
|
|
40
39
|
list-style-type: none;
|
|
41
|
-
margin:
|
|
42
|
-
padding:
|
|
40
|
+
margin: var(--uq-space-none);
|
|
41
|
+
padding: var(--uq-space-none);
|
|
43
42
|
|
|
44
43
|
&--level-2 {
|
|
45
|
-
background-color:
|
|
44
|
+
background-color: var(--uq-grey-50);
|
|
46
45
|
display: block;
|
|
47
46
|
visibility: hidden;
|
|
48
47
|
position: relative;
|
|
@@ -50,7 +49,7 @@
|
|
|
50
49
|
left: 0;
|
|
51
50
|
width: 100%;
|
|
52
51
|
opacity: 0;
|
|
53
|
-
transform: translateY(-(
|
|
52
|
+
transform: translateY(calc(-1 * var(--uq-space-xs)));
|
|
54
53
|
|
|
55
54
|
.uq-side-nav__list-item {
|
|
56
55
|
&:last-child {
|
|
@@ -59,28 +58,29 @@
|
|
|
59
58
|
}
|
|
60
59
|
|
|
61
60
|
.uq-side-nav__link {
|
|
62
|
-
padding:
|
|
61
|
+
padding: var(--uq-space-m) var(--uq-space-m) var(--uq-space-m)
|
|
62
|
+
var(--uq-space-xxxl) !important;
|
|
63
63
|
|
|
64
64
|
&:hover,
|
|
65
65
|
&:focus {
|
|
66
|
-
background-color:
|
|
66
|
+
background-color: var(--uq-grey-200) !important;
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
&-item {
|
|
72
|
-
border-bottom: 1px solid
|
|
72
|
+
border-bottom: 1px solid var(--uq-grey-200);
|
|
73
73
|
display: block;
|
|
74
|
-
margin:
|
|
75
|
-
padding:
|
|
74
|
+
margin: var(--uq-space-none);
|
|
75
|
+
padding: var(--uq-space-none);
|
|
76
76
|
position: relative;
|
|
77
77
|
|
|
78
78
|
.uq-side-nav__link {
|
|
79
79
|
display: block;
|
|
80
|
-
padding:
|
|
81
|
-
color:
|
|
80
|
+
padding: var(--uq-space-m) var(--uq-space-l);
|
|
81
|
+
color: var(--uq-grey-900);
|
|
82
82
|
text-decoration: none;
|
|
83
|
-
font-weight:
|
|
83
|
+
font-weight: var(--uq-font-weight-normal);
|
|
84
84
|
|
|
85
85
|
&:hover,
|
|
86
86
|
&:focus {
|
|
@@ -92,7 +92,7 @@
|
|
|
92
92
|
.uq-side-nav__list-item {
|
|
93
93
|
&--active {
|
|
94
94
|
.uq-side-nav__link {
|
|
95
|
-
font-weight:
|
|
95
|
+
font-weight: var(--uq-font-weight-medium);
|
|
96
96
|
}
|
|
97
97
|
}
|
|
98
98
|
}
|
|
@@ -100,7 +100,7 @@
|
|
|
100
100
|
&--open {
|
|
101
101
|
& > .uq-side-nav__link {
|
|
102
102
|
&:hover {
|
|
103
|
-
background-color:
|
|
103
|
+
background-color: var(--uq-grey-50);
|
|
104
104
|
}
|
|
105
105
|
}
|
|
106
106
|
}
|
|
@@ -113,7 +113,7 @@
|
|
|
113
113
|
display: none; //block
|
|
114
114
|
width: 3rem;
|
|
115
115
|
height: 3.5rem;
|
|
116
|
-
padding:
|
|
116
|
+
padding: var(--uq-space-m) var(--uq-space-m);
|
|
117
117
|
text-indent: -100vw;
|
|
118
118
|
background-image: url(icon-constants.get-icon(
|
|
119
119
|
"standard--arrow-down-1",
|
|
@@ -146,7 +146,7 @@
|
|
|
146
146
|
&--active,
|
|
147
147
|
&:focus {
|
|
148
148
|
.uq-side-nav__link {
|
|
149
|
-
background-color:
|
|
149
|
+
background-color: var(--uq-grey-50);
|
|
150
150
|
}
|
|
151
151
|
}
|
|
152
152
|
}
|