@uqds/side-nav 0.0.8-alpha.0 → 0.0.13-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 (5) hide show
  1. package/README.md +3 -1
  2. package/dist/css/main.css +1 -1
  3. package/package.json +4 -4
  4. package/src/scss/_component.scss +19 -13
  5. package/src/scss/main.scss +1 -1
package/README.md CHANGED
@@ -7,11 +7,13 @@
7
7
  ### Installation
8
8
 
9
9
  With Yarn:
10
+
10
11
  ```shell
11
12
  yarn add @uqds/side-nav
12
13
  ```
13
14
 
14
15
  With NPM:
16
+
15
17
  ```shell
16
18
  npm i @uqds/side-nav
17
19
  ```
@@ -25,4 +27,4 @@ npm i @uqds/side-nav
25
27
  ├─ @uqds/core
26
28
  └─ @uqds/icon
27
29
  └─ @uqds/core
28
- ```
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.8-alpha.0",
3
+ "version": "0.0.13-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.8-alpha.0",
44
- "@uqds/icon": "^0.0.8-alpha.0"
43
+ "@uqds/core": "^1.0.0",
44
+ "@uqds/icon": "^0.0.13-alpha.0"
45
45
  },
46
- "gitHead": "ec1e27ff2c58ae9bdcd0eef7516ad5d57a00bafb"
46
+ "gitHead": "07bdc5a8169d386baae8ea4ffa5b4a75fc7e9ebb"
47
47
  }
package/src/scss/_component.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @use "@uqds/core/src/scss/global" as core;
2
2
  @use "@uqds/icon/src/scss/global" as icon-constants;
3
- @use 'global' as *;
3
+ @use "global" as *;
4
4
 
5
5
  .uq-side-nav {
6
6
  color: core.$text;
@@ -11,13 +11,15 @@
11
11
  font-weight: core.$font-weight-normal;
12
12
  line-height: core.$line-height;
13
13
 
14
- *, *::before, *::after {
14
+ *,
15
+ *::before,
16
+ *::after {
15
17
  box-sizing: border-box;
16
18
  }
17
19
 
18
20
  &__title {
19
21
  margin: core.$space-none;
20
- padding: core.$space core.$space-m;
22
+ padding: core.$space-m core.$space-l;
21
23
 
22
24
  &-link {
23
25
  font-size: core.$font-size-l;
@@ -31,7 +33,7 @@
31
33
  }
32
34
  }
33
35
  }
34
-
36
+
35
37
  &__list {
36
38
  border-top: 1px solid $sidenav-list-item-divider;
37
39
  display: block;
@@ -51,15 +53,14 @@
51
53
  transform: translateY(-($sidenav-list-item-animation-distance));
52
54
 
53
55
  .uq-side-nav__list-item {
54
-
55
56
  &:last-child {
56
57
  border-bottom: none;
57
58
  }
58
59
  }
59
60
 
60
61
  .uq-side-nav__link {
61
- padding: core.$space core.$space core.$space core.$space-xxl !important;
62
-
62
+ padding: core.$space-m core.$space-m core.$space-m core.$space-xxxl !important;
63
+
63
64
  &:hover,
64
65
  &:focus {
65
66
  background-color: $sidenav-list-item-active-bg !important;
@@ -76,7 +77,7 @@
76
77
 
77
78
  .uq-side-nav__link {
78
79
  display: block;
79
- padding: core.$space core.$space-m;
80
+ padding: core.$space-m core.$space-l;
80
81
  color: core.$text;
81
82
  text-decoration: none;
82
83
 
@@ -102,19 +103,25 @@
102
103
  display: none; //block
103
104
  width: 3rem;
104
105
  height: 3.5rem;
105
- padding: core.$space core.$space;
106
+ padding: core.$space-m core.$space-m;
106
107
  text-indent: -100vw;
107
- background-image: url(icon-constants.get-icon('standard--arrow-down-1', core.$uq-purple));
108
+ background-image: url(icon-constants.get-icon(
109
+ "standard--arrow-down-1",
110
+ core.$uq-purple
111
+ ));
108
112
  background-size: 1.2rem;
109
113
  background-position: center center;
110
114
  background-repeat: no-repeat;
111
115
  overflow: hidden;
112
116
  }
113
117
 
114
- &--open,
118
+ &--open,
115
119
  &--has-subnav:focus {
116
120
  .uq-side-nav__list-item__sub-toggle {
117
- background-image: url(icon-constants.get-icon('standard--arrow-up-1', core.$uq-purple));
121
+ background-image: url(icon-constants.get-icon(
122
+ "standard--arrow-up-1",
123
+ core.$uq-purple
124
+ ));
118
125
  }
119
126
 
120
127
  .uq-side-nav__list--level-2 {
@@ -132,7 +139,6 @@
132
139
  background-color: $sidenav-list-item-bg;
133
140
  }
134
141
  }
135
-
136
142
  }
137
143
  }
138
144
  }
package/src/scss/main.scss CHANGED
@@ -1 +1 @@
1
- @use 'component';
1
+ @use "component";