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