@uqds/side-nav 0.0.7-alpha.0 → 0.0.12-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 (6) hide show
  1. package/README.md +30 -28
  2. package/dist/css/main.css +1 -1
  3. package/package.json +4 -4
  4. package/src/scss/_component.scss +144 -138
  5. package/src/scss/_global.scss +6 -6
  6. package/src/scss/main.scss +1 -1
package/README.md CHANGED
@@ -1,28 +1,30 @@
1
- # `@uqds/side-nav`
2
-
3
- > side nav component
4
-
5
- ## Usage
6
-
7
- ### Installation
8
-
9
- With Yarn:
10
- ```shell
11
- yarn add @uqds/side-nav
12
- ```
13
-
14
- With NPM:
15
- ```shell
16
- npm i @uqds/side-nav
17
- ```
18
-
19
- ---
20
-
21
- ## Dependency graph
22
-
23
- ```shell
24
- @uqds/side-nav
25
- ├─ @uqds/core
26
- └─ @uqds/icon
27
- └─ @uqds/core
28
- ```
1
+ # `@uqds/side-nav`
2
+
3
+ > side nav component
4
+
5
+ ## Usage
6
+
7
+ ### Installation
8
+
9
+ With Yarn:
10
+
11
+ ```shell
12
+ yarn add @uqds/side-nav
13
+ ```
14
+
15
+ With NPM:
16
+
17
+ ```shell
18
+ npm i @uqds/side-nav
19
+ ```
20
+
21
+ ---
22
+
23
+ ## Dependency graph
24
+
25
+ ```shell
26
+ @uqds/side-nav
27
+ ├─ @uqds/core
28
+ └─ @uqds/icon
29
+ └─ @uqds/core
30
+ ```
package/dist/css/main.css CHANGED
@@ -1 +1 @@
1
- .uq-side-nav{color:#2b2a29;border-top:.25rem solid #51247a;box-sizing:border-box;font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.5}.uq-side-nav *,.uq-side-nav *::before,.uq-side-nav *::after{box-sizing:border-box}.uq-side-nav__title{margin:0;padding:1rem 1.5rem}.uq-side-nav__title-link{font-size:1.25rem;color:#51247a;text-decoration:none}.uq-side-nav__title-link:hover,.uq-side-nav__title-link:focus{color:#51247a;text-decoration:underline}.uq-side-nav__list{border-top:1px solid #e7e3e0;display:block;list-style-type:none;margin:0;padding:0}.uq-side-nav__list--level-2{background-color:#f7f6f5;display:block;visibility:hidden;position:relative;height:0;left:0;width:100%;opacity:0;transform:translateY(-0.5rem)}.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:1rem 1rem 1rem 3rem !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:#e7e3e0 !important}.uq-side-nav__list-item{border-bottom:1px solid #e7e3e0;display:block;margin:0;padding:0;position:relative}.uq-side-nav__list-item .uq-side-nav__link{display:block;padding:1rem 1.5rem;color:#2b2a29;text-decoration:none}.uq-side-nav__list-item .uq-side-nav__link:hover,.uq-side-nav__list-item .uq-side-nav__link:focus{text-decoration:underline}.uq-side-nav__list-item .uq-side-nav__list-item--active .uq-side-nav__link{font-weight:500}.uq-side-nav__list-item__sub-toggle{position:absolute;top:0;right:0;display:none;width:3rem;height:3.5rem;padding:1rem 1rem;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:#f7f6f5}
1
+ .uq-side-nav{color:#2b2a29;border-top:.25rem solid #51247a;box-sizing:border-box;font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.5}.uq-side-nav *,.uq-side-nav *::before,.uq-side-nav *::after{box-sizing:border-box}.uq-side-nav__title{margin:0;padding:1rem 1.5rem}.uq-side-nav__title-link{font-size:1.25rem;color:#51247a;text-decoration:none}.uq-side-nav__title-link:hover,.uq-side-nav__title-link:focus{color:#51247a;text-decoration:underline}.uq-side-nav__list{border-top:1px solid #e7e3e0;display:block;list-style-type:none;margin:0;padding:0}.uq-side-nav__list--level-2{background-color:#f7f6f5;display:block;visibility:hidden;position:relative;height:0;left:0;width:100%;opacity:0;transform:translateY(-0.5rem)}.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:1rem 1rem 1rem 3rem !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:#e7e3e0 !important}.uq-side-nav__list-item{border-bottom:1px solid #e7e3e0;display:block;margin:0;padding:0;position:relative}.uq-side-nav__list-item .uq-side-nav__link{display:block;padding:1rem 1.5rem;color:#2b2a29;text-decoration:none}.uq-side-nav__list-item .uq-side-nav__link:hover,.uq-side-nav__list-item .uq-side-nav__link:focus{text-decoration:underline}.uq-side-nav__list-item .uq-side-nav__list-item--active .uq-side-nav__link{font-weight:500}.uq-side-nav__list-item__sub-toggle{position:absolute;top:0;right:0;display:none;width:3rem;height:3.5rem;padding:1rem 1rem;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:#f7f6f5}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uqds/side-nav",
3
- "version": "0.0.7-alpha.0",
3
+ "version": "0.0.12-alpha.0",
4
4
  "description": "Side nav (title, side navigation)",
5
5
  "keywords": [
6
6
  "uqds",
@@ -40,8 +40,8 @@
40
40
  "url": "https://github.com/uq-its-ss/design-system/issues"
41
41
  },
42
42
  "dependencies": {
43
- "@uqds/core": "^0.0.7-alpha.0",
44
- "@uqds/icon": "^0.0.7-alpha.0"
43
+ "@uqds/core": "^0.0.12-alpha.0",
44
+ "@uqds/icon": "^0.0.12-alpha.0"
45
45
  },
46
- "gitHead": "8375016d6dc8a6b640f9fa12733156796d7e28c1"
46
+ "gitHead": "125e487dfd2f7e46f2b29cc0e8646b92e61d6f2c"
47
47
  }
package/src/scss/_component.scss CHANGED
@@ -1,138 +1,144 @@
1
- @use "@uqds/core/src/scss/global" as core;
2
- @use "@uqds/icon/src/scss/global" as icon-constants;
3
- @use 'global' as *;
4
-
5
- .uq-side-nav {
6
- color: core.$text;
7
- border-top: core.$space-xs solid core.$uq-purple;
8
- box-sizing: border-box;
9
- font-family: core.$font-body;
10
- font-size: core.$font-size;
11
- font-weight: core.$font-weight-normal;
12
- line-height: core.$line-height;
13
-
14
- *, *::before, *::after {
15
- box-sizing: border-box;
16
- }
17
-
18
- &__title {
19
- margin: core.$space-none;
20
- padding: core.$space core.$space-m;
21
-
22
- &-link {
23
- font-size: core.$font-size-l;
24
- color: core.$uq-purple;
25
- text-decoration: none;
26
-
27
- &:hover,
28
- &:focus {
29
- color: core.$uq-purple;
30
- text-decoration: underline;
31
- }
32
- }
33
- }
34
-
35
- &__list {
36
- border-top: 1px solid $sidenav-list-item-divider;
37
- display: block;
38
- list-style-type: none;
39
- margin: core.$space-none;
40
- padding: core.$space-none;
41
-
42
- &--level-2 {
43
- background-color: $sidenav-list-item-bg;
44
- display: block;
45
- visibility: hidden;
46
- position: relative;
47
- height: 0;
48
- left: 0;
49
- width: 100%;
50
- opacity: 0;
51
- transform: translateY(-($sidenav-list-item-animation-distance));
52
-
53
- .uq-side-nav__list-item {
54
-
55
- &:last-child {
56
- border-bottom: none;
57
- }
58
- }
59
-
60
- .uq-side-nav__link {
61
- padding: core.$space core.$space core.$space core.$space-xxl !important;
62
-
63
- &:hover,
64
- &:focus {
65
- background-color: $sidenav-list-item-active-bg !important;
66
- }
67
- }
68
- }
69
-
70
- &-item {
71
- border-bottom: 1px solid $sidenav-list-item-divider;
72
- display: block;
73
- margin: core.$space-none;
74
- padding: core.$space-none;
75
- position: relative;
76
-
77
- .uq-side-nav__link {
78
- display: block;
79
- padding: core.$space core.$space-m;
80
- color: core.$text;
81
- text-decoration: none;
82
-
83
- &:hover,
84
- &:focus {
85
- text-decoration: underline;
86
- }
87
- }
88
-
89
- .uq-side-nav__list-item {
90
- &--active {
91
- .uq-side-nav__link {
92
- font-weight: core.$font-weight-medium;
93
- }
94
- }
95
- }
96
-
97
- // hidden for now until JS implementation
98
- &__sub-toggle {
99
- position: absolute;
100
- top: 0;
101
- right: 0;
102
- display: none; //block
103
- width: 3rem;
104
- height: 3.5rem;
105
- padding: core.$space core.$space;
106
- text-indent: -100vw;
107
- background-image: url(icon-constants.get-icon('standard--arrow-down-1', core.$uq-purple));
108
- background-size: 1.2rem;
109
- background-position: center center;
110
- background-repeat: no-repeat;
111
- overflow: hidden;
112
- }
113
-
114
- &--open,
115
- &--has-subnav:focus {
116
- .uq-side-nav__list-item__sub-toggle {
117
- background-image: url(icon-constants.get-icon('standard--arrow-up-1', core.$uq-purple));
118
- }
119
-
120
- .uq-side-nav__list--level-2 {
121
- opacity: 1;
122
- height: auto;
123
- visibility: visible;
124
- transform: translateY(0);
125
- z-index: 20;
126
- }
127
- }
128
-
129
- &--active,
130
- &:focus {
131
- .uq-side-nav__link {
132
- background-color: $sidenav-list-item-bg;
133
- }
134
- }
135
-
136
- }
137
- }
138
- }
1
+ @use "@uqds/core/src/scss/global" as core;
2
+ @use "@uqds/icon/src/scss/global" as icon-constants;
3
+ @use "global" as *;
4
+
5
+ .uq-side-nav {
6
+ color: core.$text;
7
+ border-top: core.$space-xs solid core.$uq-purple;
8
+ box-sizing: border-box;
9
+ font-family: core.$font-body;
10
+ font-size: core.$font-size;
11
+ font-weight: core.$font-weight-normal;
12
+ line-height: core.$line-height;
13
+
14
+ *,
15
+ *::before,
16
+ *::after {
17
+ box-sizing: border-box;
18
+ }
19
+
20
+ &__title {
21
+ margin: core.$space-none;
22
+ padding: core.$space core.$space-m;
23
+
24
+ &-link {
25
+ font-size: core.$font-size-l;
26
+ color: core.$uq-purple;
27
+ text-decoration: none;
28
+
29
+ &:hover,
30
+ &:focus {
31
+ color: core.$uq-purple;
32
+ text-decoration: underline;
33
+ }
34
+ }
35
+ }
36
+
37
+ &__list {
38
+ border-top: 1px solid $sidenav-list-item-divider;
39
+ display: block;
40
+ list-style-type: none;
41
+ margin: core.$space-none;
42
+ padding: core.$space-none;
43
+
44
+ &--level-2 {
45
+ background-color: $sidenav-list-item-bg;
46
+ display: block;
47
+ visibility: hidden;
48
+ position: relative;
49
+ height: 0;
50
+ left: 0;
51
+ width: 100%;
52
+ opacity: 0;
53
+ transform: translateY(-($sidenav-list-item-animation-distance));
54
+
55
+ .uq-side-nav__list-item {
56
+ &:last-child {
57
+ border-bottom: none;
58
+ }
59
+ }
60
+
61
+ .uq-side-nav__link {
62
+ padding: core.$space core.$space core.$space core.$space-xxl !important;
63
+
64
+ &:hover,
65
+ &:focus {
66
+ background-color: $sidenav-list-item-active-bg !important;
67
+ }
68
+ }
69
+ }
70
+
71
+ &-item {
72
+ border-bottom: 1px solid $sidenav-list-item-divider;
73
+ display: block;
74
+ margin: core.$space-none;
75
+ padding: core.$space-none;
76
+ position: relative;
77
+
78
+ .uq-side-nav__link {
79
+ display: block;
80
+ padding: core.$space core.$space-m;
81
+ color: core.$text;
82
+ text-decoration: none;
83
+
84
+ &:hover,
85
+ &:focus {
86
+ text-decoration: underline;
87
+ }
88
+ }
89
+
90
+ .uq-side-nav__list-item {
91
+ &--active {
92
+ .uq-side-nav__link {
93
+ font-weight: core.$font-weight-medium;
94
+ }
95
+ }
96
+ }
97
+
98
+ // hidden for now until JS implementation
99
+ &__sub-toggle {
100
+ position: absolute;
101
+ top: 0;
102
+ right: 0;
103
+ display: none; //block
104
+ width: 3rem;
105
+ height: 3.5rem;
106
+ padding: core.$space core.$space;
107
+ text-indent: -100vw;
108
+ background-image: url(icon-constants.get-icon(
109
+ "standard--arrow-down-1",
110
+ core.$uq-purple
111
+ ));
112
+ background-size: 1.2rem;
113
+ background-position: center center;
114
+ background-repeat: no-repeat;
115
+ overflow: hidden;
116
+ }
117
+
118
+ &--open,
119
+ &--has-subnav:focus {
120
+ .uq-side-nav__list-item__sub-toggle {
121
+ background-image: url(icon-constants.get-icon(
122
+ "standard--arrow-up-1",
123
+ core.$uq-purple
124
+ ));
125
+ }
126
+
127
+ .uq-side-nav__list--level-2 {
128
+ opacity: 1;
129
+ height: auto;
130
+ visibility: visible;
131
+ transform: translateY(0);
132
+ z-index: 20;
133
+ }
134
+ }
135
+
136
+ &--active,
137
+ &:focus {
138
+ .uq-side-nav__link {
139
+ background-color: $sidenav-list-item-bg;
140
+ }
141
+ }
142
+ }
143
+ }
144
+ }
package/src/scss/_global.scss CHANGED
@@ -1,6 +1,6 @@
1
- @use "@uqds/core/src/scss/global" as core;
2
-
3
- $sidenav-list-item-bg: core.$uq-neutral-light80;
4
- $sidenav-list-item-active-bg: core.$uq-neutral-light40;
5
- $sidenav-list-item-divider: core.$uq-neutral-light40;
6
- $sidenav-list-item-animation-distance: core.$space-s;
1
+ @use "@uqds/core/src/scss/global" as core;
2
+
3
+ $sidenav-list-item-bg: core.$uq-neutral-light80;
4
+ $sidenav-list-item-active-bg: core.$uq-neutral-light40;
5
+ $sidenav-list-item-divider: core.$uq-neutral-light40;
6
+ $sidenav-list-item-animation-distance: core.$space-s;
package/src/scss/main.scss CHANGED
@@ -1 +1 @@
1
- @use 'component';
1
+ @use "component";