@uqds/grid-menu 0.0.7-alpha.0 → 0.0.8-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/README.md +28 -28
- package/package.json +4 -4
- package/src/scss/_component.scss +173 -173
- package/src/scss/_global.scss +34 -34
package/README.md
CHANGED
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
# `@uqds/grid-menu`
|
|
2
|
-
|
|
3
|
-
> Grid menu component
|
|
4
|
-
|
|
5
|
-
## Usage
|
|
6
|
-
|
|
7
|
-
### Installation
|
|
8
|
-
|
|
9
|
-
With Yarn:
|
|
10
|
-
```shell
|
|
11
|
-
yarn add @uqds/grid-menu
|
|
12
|
-
```
|
|
13
|
-
|
|
14
|
-
With NPM:
|
|
15
|
-
```shell
|
|
16
|
-
npm i @uqds/grid-menu
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
---
|
|
20
|
-
|
|
21
|
-
## Dependency graph
|
|
22
|
-
|
|
23
|
-
```shell
|
|
24
|
-
@uqds/grid-menu
|
|
25
|
-
├─ @uqds/core
|
|
26
|
-
└─ @uqds/icon
|
|
27
|
-
└─ @uqds/core
|
|
28
|
-
```
|
|
1
|
+
# `@uqds/grid-menu`
|
|
2
|
+
|
|
3
|
+
> Grid menu component
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
### Installation
|
|
8
|
+
|
|
9
|
+
With Yarn:
|
|
10
|
+
```shell
|
|
11
|
+
yarn add @uqds/grid-menu
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
With NPM:
|
|
15
|
+
```shell
|
|
16
|
+
npm i @uqds/grid-menu
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## Dependency graph
|
|
22
|
+
|
|
23
|
+
```shell
|
|
24
|
+
@uqds/grid-menu
|
|
25
|
+
├─ @uqds/core
|
|
26
|
+
└─ @uqds/icon
|
|
27
|
+
└─ @uqds/core
|
|
28
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uqds/grid-menu",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.8-alpha.0",
|
|
4
4
|
"description": "Grid menu components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"uqds",
|
|
@@ -41,8 +41,8 @@
|
|
|
41
41
|
"url": "https://github.com/uq-its-ss/design-system/issues"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@uqds/core": "^0.0.
|
|
45
|
-
"@uqds/icon": "^0.0.
|
|
44
|
+
"@uqds/core": "^0.0.8-alpha.0",
|
|
45
|
+
"@uqds/icon": "^0.0.8-alpha.0"
|
|
46
46
|
},
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "ec1e27ff2c58ae9bdcd0eef7516ad5d57a00bafb"
|
|
48
48
|
}
|
package/src/scss/_component.scss
CHANGED
|
@@ -1,173 +1,173 @@
|
|
|
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-grid-menu {
|
|
6
|
-
box-sizing: border-box;
|
|
7
|
-
display: grid;
|
|
8
|
-
list-style: none;
|
|
9
|
-
gap: core.$space-none;
|
|
10
|
-
margin: 0;
|
|
11
|
-
padding: 0;
|
|
12
|
-
align-items: stretch;
|
|
13
|
-
|
|
14
|
-
*, *::before, *::after {
|
|
15
|
-
box-sizing: border-box;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
&__item {
|
|
19
|
-
margin-bottom: core.$space-none;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
// Behave as 3 column layout by default.
|
|
23
|
-
@include grid-menu-3-column;
|
|
24
|
-
|
|
25
|
-
&--2-column {
|
|
26
|
-
@include grid-menu-2-column;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
&--3-column {
|
|
30
|
-
@include grid-menu-3-column;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
&--4-column {
|
|
34
|
-
@include grid-menu-4-column;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
&__link {
|
|
38
|
-
border-bottom: 1px solid $linked-list-border;
|
|
39
|
-
color: $linked-list-color;
|
|
40
|
-
display: block;
|
|
41
|
-
font-size: 1.375rem;
|
|
42
|
-
font-weight: 400;
|
|
43
|
-
line-height: normal;
|
|
44
|
-
padding: core.$space core.$space-l core.$space core.$space;
|
|
45
|
-
position: relative;
|
|
46
|
-
height: 100%;
|
|
47
|
-
|
|
48
|
-
&::after {
|
|
49
|
-
content: '';
|
|
50
|
-
position: absolute;
|
|
51
|
-
right: 1.5rem;
|
|
52
|
-
top: 1.25rem;
|
|
53
|
-
width: 2rem;
|
|
54
|
-
height: 2rem;
|
|
55
|
-
transition: ease 0.3s;
|
|
56
|
-
margin-top: -0.2rem;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
&:hover {
|
|
60
|
-
background-color: core.$link;
|
|
61
|
-
color: $linked-list-color-hover;
|
|
62
|
-
text-decoration: none;
|
|
63
|
-
|
|
64
|
-
&::after {
|
|
65
|
-
content: '';
|
|
66
|
-
background-image: url(icon-constants.get-icon('standard--arrow-right-1', core.$uq-white));
|
|
67
|
-
background-repeat: no-repeat;
|
|
68
|
-
background-size: 1.4rem 1.4rem;
|
|
69
|
-
right: 0;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.uq-grid-menu__link,
|
|
73
|
-
.uq-grid-menu__title,
|
|
74
|
-
.uq-grid-menu__description {
|
|
75
|
-
color: $linked-list-color-hover;
|
|
76
|
-
text-decoration: none;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.uq-grid-menu__icon {
|
|
80
|
-
&::before {
|
|
81
|
-
filter: icon-constants.$icon-light-filter;
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
&__title {
|
|
88
|
-
font-size: 1.375rem;
|
|
89
|
-
font-weight: 400;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
&__description {
|
|
93
|
-
color: $linked-list-desc;
|
|
94
|
-
display: block;
|
|
95
|
-
font-size: .8rem;
|
|
96
|
-
font-weight: 300;
|
|
97
|
-
line-height: normal;
|
|
98
|
-
margin-top: core.$space-xs;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
&__icon {
|
|
102
|
-
margin-top: -0.3rem;
|
|
103
|
-
margin-right: core.$space-s;
|
|
104
|
-
transition: filter 0.2s;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
// Dark text variant.
|
|
108
|
-
&--dark-text {
|
|
109
|
-
.uq-grid-menu__link {
|
|
110
|
-
color: core.$dark-palette-color;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
.uq-grid-menu__icon {
|
|
114
|
-
&::before {
|
|
115
|
-
filter: icon-constants.$icon-text-filter;
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
@media only screen and #{core.$screen-md-up} {
|
|
121
|
-
gap: core.$space;
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
// Palettes applied to section wrapping grid-menu.
|
|
126
|
-
.light-palette {
|
|
127
|
-
.uq-grid-menu {
|
|
128
|
-
&__link,
|
|
129
|
-
&__title,
|
|
130
|
-
&__description {
|
|
131
|
-
@extend %light-palette;
|
|
132
|
-
|
|
133
|
-
&:hover {
|
|
134
|
-
background-color: core.$light-palette-link-color;
|
|
135
|
-
color: core.$link;
|
|
136
|
-
|
|
137
|
-
.uq-grid-menu__description {
|
|
138
|
-
background-color: core.$light-palette-link-color;
|
|
139
|
-
color: core.$link;
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
.dark-palette {
|
|
147
|
-
.uq-grid-menu {
|
|
148
|
-
&__link,
|
|
149
|
-
&__title,
|
|
150
|
-
&__description {
|
|
151
|
-
@extend %dark-palette;
|
|
152
|
-
|
|
153
|
-
&:hover {
|
|
154
|
-
background-color: core.$link;
|
|
155
|
-
color: core.$uq-white;
|
|
156
|
-
|
|
157
|
-
.uq-grid-menu__description {
|
|
158
|
-
background-color: core.$link;
|
|
159
|
-
color: core.$uq-white;
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
// Grid menu inside a section with background image.
|
|
167
|
-
.section--background-image {
|
|
168
|
-
.uq-grid-menu {
|
|
169
|
-
&__link {
|
|
170
|
-
border-color: rgba(core.$uq-white, .4);
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
}
|
|
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-grid-menu {
|
|
6
|
+
box-sizing: border-box;
|
|
7
|
+
display: grid;
|
|
8
|
+
list-style: none;
|
|
9
|
+
gap: core.$space-none;
|
|
10
|
+
margin: 0;
|
|
11
|
+
padding: 0;
|
|
12
|
+
align-items: stretch;
|
|
13
|
+
|
|
14
|
+
*, *::before, *::after {
|
|
15
|
+
box-sizing: border-box;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&__item {
|
|
19
|
+
margin-bottom: core.$space-none;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// Behave as 3 column layout by default.
|
|
23
|
+
@include grid-menu-3-column;
|
|
24
|
+
|
|
25
|
+
&--2-column {
|
|
26
|
+
@include grid-menu-2-column;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&--3-column {
|
|
30
|
+
@include grid-menu-3-column;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&--4-column {
|
|
34
|
+
@include grid-menu-4-column;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&__link {
|
|
38
|
+
border-bottom: 1px solid $linked-list-border;
|
|
39
|
+
color: $linked-list-color;
|
|
40
|
+
display: block;
|
|
41
|
+
font-size: 1.375rem;
|
|
42
|
+
font-weight: 400;
|
|
43
|
+
line-height: normal;
|
|
44
|
+
padding: core.$space core.$space-l core.$space core.$space;
|
|
45
|
+
position: relative;
|
|
46
|
+
height: 100%;
|
|
47
|
+
|
|
48
|
+
&::after {
|
|
49
|
+
content: '';
|
|
50
|
+
position: absolute;
|
|
51
|
+
right: 1.5rem;
|
|
52
|
+
top: 1.25rem;
|
|
53
|
+
width: 2rem;
|
|
54
|
+
height: 2rem;
|
|
55
|
+
transition: ease 0.3s;
|
|
56
|
+
margin-top: -0.2rem;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&:hover {
|
|
60
|
+
background-color: core.$link;
|
|
61
|
+
color: $linked-list-color-hover;
|
|
62
|
+
text-decoration: none;
|
|
63
|
+
|
|
64
|
+
&::after {
|
|
65
|
+
content: '';
|
|
66
|
+
background-image: url(icon-constants.get-icon('standard--arrow-right-1', core.$uq-white));
|
|
67
|
+
background-repeat: no-repeat;
|
|
68
|
+
background-size: 1.4rem 1.4rem;
|
|
69
|
+
right: 0;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.uq-grid-menu__link,
|
|
73
|
+
.uq-grid-menu__title,
|
|
74
|
+
.uq-grid-menu__description {
|
|
75
|
+
color: $linked-list-color-hover;
|
|
76
|
+
text-decoration: none;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.uq-grid-menu__icon {
|
|
80
|
+
&::before {
|
|
81
|
+
filter: icon-constants.$icon-light-filter;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
&__title {
|
|
88
|
+
font-size: 1.375rem;
|
|
89
|
+
font-weight: 400;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
&__description {
|
|
93
|
+
color: $linked-list-desc;
|
|
94
|
+
display: block;
|
|
95
|
+
font-size: .8rem;
|
|
96
|
+
font-weight: 300;
|
|
97
|
+
line-height: normal;
|
|
98
|
+
margin-top: core.$space-xs;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
&__icon {
|
|
102
|
+
margin-top: -0.3rem;
|
|
103
|
+
margin-right: core.$space-s;
|
|
104
|
+
transition: filter 0.2s;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
// Dark text variant.
|
|
108
|
+
&--dark-text {
|
|
109
|
+
.uq-grid-menu__link {
|
|
110
|
+
color: core.$dark-palette-color;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.uq-grid-menu__icon {
|
|
114
|
+
&::before {
|
|
115
|
+
filter: icon-constants.$icon-text-filter;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
@media only screen and #{core.$screen-md-up} {
|
|
121
|
+
gap: core.$space;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
// Palettes applied to section wrapping grid-menu.
|
|
126
|
+
.light-palette {
|
|
127
|
+
.uq-grid-menu {
|
|
128
|
+
&__link,
|
|
129
|
+
&__title,
|
|
130
|
+
&__description {
|
|
131
|
+
@extend %light-palette;
|
|
132
|
+
|
|
133
|
+
&:hover {
|
|
134
|
+
background-color: core.$light-palette-link-color;
|
|
135
|
+
color: core.$link;
|
|
136
|
+
|
|
137
|
+
.uq-grid-menu__description {
|
|
138
|
+
background-color: core.$light-palette-link-color;
|
|
139
|
+
color: core.$link;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.dark-palette {
|
|
147
|
+
.uq-grid-menu {
|
|
148
|
+
&__link,
|
|
149
|
+
&__title,
|
|
150
|
+
&__description {
|
|
151
|
+
@extend %dark-palette;
|
|
152
|
+
|
|
153
|
+
&:hover {
|
|
154
|
+
background-color: core.$link;
|
|
155
|
+
color: core.$uq-white;
|
|
156
|
+
|
|
157
|
+
.uq-grid-menu__description {
|
|
158
|
+
background-color: core.$link;
|
|
159
|
+
color: core.$uq-white;
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
// Grid menu inside a section with background image.
|
|
167
|
+
.section--background-image {
|
|
168
|
+
.uq-grid-menu {
|
|
169
|
+
&__link {
|
|
170
|
+
border-color: rgba(core.$uq-white, .4);
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
}
|
package/src/scss/_global.scss
CHANGED
|
@@ -1,34 +1,34 @@
|
|
|
1
|
-
// Variables, functions, and mixins
|
|
2
|
-
@use '@uqds/core/src/scss/global' as core;
|
|
3
|
-
|
|
4
|
-
$linked-list-color: core.$link;
|
|
5
|
-
$linked-list-color-hover: core.$uq-white;
|
|
6
|
-
$linked-list-desc: core.$uq-neutral-dark80;
|
|
7
|
-
$linked-list-border: core.$uq-neutral-light60;
|
|
8
|
-
|
|
9
|
-
// Two column layout.
|
|
10
|
-
@mixin grid-menu-2-column {
|
|
11
|
-
@media only screen and #{core.$screen-md-up} {
|
|
12
|
-
grid: auto-flow / repeat(2, 1fr);
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
// Three column layout.
|
|
17
|
-
@mixin grid-menu-3-column {
|
|
18
|
-
@media only screen and #{core.$screen-md-up} {
|
|
19
|
-
grid: auto-flow / repeat(2, 1fr);
|
|
20
|
-
}
|
|
21
|
-
@media only screen and #{core.$screen-xl-up} {
|
|
22
|
-
grid: auto-flow / repeat(3, 1fr);
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
// Four column layout.
|
|
27
|
-
@mixin grid-menu-4-column {
|
|
28
|
-
@media only screen and #{core.$screen-md-up} {
|
|
29
|
-
grid: auto-flow / repeat(2, 1fr);
|
|
30
|
-
}
|
|
31
|
-
@media only screen and #{core.$screen-xl-up} {
|
|
32
|
-
grid: auto-flow / repeat(4, 1fr);
|
|
33
|
-
}
|
|
34
|
-
}
|
|
1
|
+
// Variables, functions, and mixins
|
|
2
|
+
@use '@uqds/core/src/scss/global' as core;
|
|
3
|
+
|
|
4
|
+
$linked-list-color: core.$link;
|
|
5
|
+
$linked-list-color-hover: core.$uq-white;
|
|
6
|
+
$linked-list-desc: core.$uq-neutral-dark80;
|
|
7
|
+
$linked-list-border: core.$uq-neutral-light60;
|
|
8
|
+
|
|
9
|
+
// Two column layout.
|
|
10
|
+
@mixin grid-menu-2-column {
|
|
11
|
+
@media only screen and #{core.$screen-md-up} {
|
|
12
|
+
grid: auto-flow / repeat(2, 1fr);
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
// Three column layout.
|
|
17
|
+
@mixin grid-menu-3-column {
|
|
18
|
+
@media only screen and #{core.$screen-md-up} {
|
|
19
|
+
grid: auto-flow / repeat(2, 1fr);
|
|
20
|
+
}
|
|
21
|
+
@media only screen and #{core.$screen-xl-up} {
|
|
22
|
+
grid: auto-flow / repeat(3, 1fr);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
// Four column layout.
|
|
27
|
+
@mixin grid-menu-4-column {
|
|
28
|
+
@media only screen and #{core.$screen-md-up} {
|
|
29
|
+
grid: auto-flow / repeat(2, 1fr);
|
|
30
|
+
}
|
|
31
|
+
@media only screen and #{core.$screen-xl-up} {
|
|
32
|
+
grid: auto-flow / repeat(4, 1fr);
|
|
33
|
+
}
|
|
34
|
+
}
|