@uqds/grid-menu 4.0.7-alpha.0 → 4.0.7
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 +3 -3
- package/src/scss/_component.scss +30 -29
package/dist/css/main.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.light-palette .uq-grid-menu__link,.light-palette .uq-grid-menu__title,.light-palette .uq-grid-menu__description{border-color:#dcdcdd;color:#f3f3f4}.light-palette .uq-grid-menu__link a,.light-palette .uq-grid-menu__title a,.light-palette .uq-grid-menu__description a{color:#fff;font-weight:400}.light-palette .uq-grid-menu__link a:hover,.light-palette .uq-grid-menu__title a:hover,.light-palette .uq-grid-menu__description a:hover{color:#f3f3f4}.dark-palette .uq-grid-menu__link,.dark-palette .uq-grid-menu__title,.dark-palette .uq-grid-menu__description{border-color:#f3f3f4;color:#3b383e}.dark-palette .uq-grid-menu__link a,.dark-palette .uq-grid-menu__title a,.dark-palette .uq-grid-menu__description a{color:#0d6dcd}.dark-palette .uq-grid-menu__link a:hover,.dark-palette .uq-grid-menu__title a:hover,.dark-palette .uq-grid-menu__description a:hover{color:#0e65bb}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-grid-menu{box-sizing:border-box;display:grid;font-family:
|
|
1
|
+
.light-palette .uq-grid-menu__link,.light-palette .uq-grid-menu__title,.light-palette .uq-grid-menu__description{border-color:#dcdcdd;color:#f3f3f4}.light-palette .uq-grid-menu__link a,.light-palette .uq-grid-menu__title a,.light-palette .uq-grid-menu__description a{color:#fff;font-weight:400}.light-palette .uq-grid-menu__link a:hover,.light-palette .uq-grid-menu__title a:hover,.light-palette .uq-grid-menu__description a:hover{color:#f3f3f4}.dark-palette .uq-grid-menu__link,.dark-palette .uq-grid-menu__title,.dark-palette .uq-grid-menu__description{border-color:#f3f3f4;color:#3b383e}.dark-palette .uq-grid-menu__link a,.dark-palette .uq-grid-menu__title a,.dark-palette .uq-grid-menu__description a{color:#0d6dcd}.dark-palette .uq-grid-menu__link a:hover,.dark-palette .uq-grid-menu__title a:hover,.dark-palette .uq-grid-menu__description a:hover{color:#0e65bb}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-grid-menu{box-sizing:border-box;display:grid;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);list-style:none;gap:var(--uq-space-none);margin:0;padding:0;align-items:stretch}.uq-grid-menu *,.uq-grid-menu *::before,.uq-grid-menu *::after{box-sizing:border-box}.uq-grid-menu__item{margin-bottom:var(--uq-space-none)}@media only screen and (min-width: 37.5rem){.uq-grid-menu{grid:auto-flow/repeat(2, 1fr)}}@media only screen and (min-width: 75rem){.uq-grid-menu{grid:auto-flow/repeat(3, 1fr)}}@media only screen and (min-width: 37.5rem){.uq-grid-menu--2-column{grid:auto-flow/repeat(2, 1fr)}}@media only screen and (min-width: 37.5rem){.uq-grid-menu--3-column{grid:auto-flow/repeat(2, 1fr)}}@media only screen and (min-width: 75rem){.uq-grid-menu--3-column{grid:auto-flow/repeat(3, 1fr)}}@media only screen and (min-width: 37.5rem){.uq-grid-menu--4-column{grid:auto-flow/repeat(2, 1fr)}}@media only screen and (min-width: 75rem){.uq-grid-menu--4-column{grid:auto-flow/repeat(4, 1fr)}}.uq-grid-menu__link{border-bottom:1px solid var(--uq-grey-200);color:var(--uq-utility-500);display:block;font-size:1.375rem;font-weight:var(--uq-font-weight-normal);line-height:normal;padding:var(--uq-space-m) var(--uq-space-xl) var(--uq-space-m) var(--uq-space-m);position:relative;height:100%;text-decoration:none}.uq-grid-menu__link::after{content:"";position:absolute;right:1.5rem;top:1.25rem;width:2rem;height:2rem;transition:ease .3s;margin-top:-0.2rem}.uq-grid-menu__link:hover{background-color:var(--uq-utility-500);color:var(--uq-white);text-decoration:none}.uq-grid-menu__link:hover::after{content:"";background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='m5.145 14.285 6.167-6a.41.41 0 0 0 0-.598L5.145 1.715' fill='none' stroke='%23fff' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");background-repeat:no-repeat;background-size:1.4rem 1.4rem;right:0}.uq-grid-menu__link:hover .uq-grid-menu__link,.uq-grid-menu__link:hover .uq-grid-menu__title,.uq-grid-menu__link:hover .uq-grid-menu__description{color:var(--uq-white);text-decoration:none}.uq-grid-menu__link:hover .uq-grid-menu__icon::before{filter:invert(100%) sepia(0%) saturate(1%) hue-rotate(122deg) brightness(111%) contrast(102%)}.uq-grid-menu__title{font-weight:var(--uq-font-weight-normal)}.uq-grid-menu__description{color:var(--uq-grey-700);display:block;font-size:.8rem;font-weight:var(--uq-font-weight-normal);line-height:normal;margin-top:var(--uq-space-xxs)}.uq-grid-menu__icon{margin-top:-0.3rem;margin-right:var(--uq-space-xs);transition:filter .2s}.uq-grid-menu--dark-text .uq-grid-menu__link{color:var(--uq-grey-900)}.uq-grid-menu--dark-text .uq-grid-menu__icon::before{filter:invert(0%) sepia(72%) saturate(588%) hue-rotate(348deg) brightness(115%) contrast(81%)}@media only screen and (min-width: 37.5rem){.uq-grid-menu{gap:var(--uq-space-m)}}.light-palette .uq-grid-menu__link:hover,.light-palette .uq-grid-menu__title:hover,.light-palette .uq-grid-menu__description:hover{background-color:var(--uq-white);color:var(--uq-utility-500)}.light-palette .uq-grid-menu__link:hover .uq-grid-menu__description,.light-palette .uq-grid-menu__title:hover .uq-grid-menu__description,.light-palette .uq-grid-menu__description:hover .uq-grid-menu__description{background-color:var(--uq-white);color:var(--uq-utility-500)}.dark-palette .uq-grid-menu__link:hover,.dark-palette .uq-grid-menu__title:hover,.dark-palette .uq-grid-menu__description:hover{background-color:var(--uq-utility-500);color:var(--uq-white)}.dark-palette .uq-grid-menu__link:hover .uq-grid-menu__description,.dark-palette .uq-grid-menu__title:hover .uq-grid-menu__description,.dark-palette .uq-grid-menu__description:hover .uq-grid-menu__description{background-color:var(--uq-utility-500);color:var(--uq-white)}.section--background-image .uq-grid-menu__link{border-color:color-mix(in srgb, var(--uq-white) 40%, transparent)}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uqds/grid-menu",
|
|
3
|
-
"version": "4.0.7
|
|
3
|
+
"version": "4.0.7",
|
|
4
4
|
"description": "Grid menu components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"uqds",
|
|
@@ -45,8 +45,8 @@
|
|
|
45
45
|
"url": "https://github.com/uq-its-ss/design-system/issues"
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
|
-
"@uqds/core": "^5.0.
|
|
48
|
+
"@uqds/core": "^5.0.3",
|
|
49
49
|
"@uqds/icon": "^4.0.6"
|
|
50
50
|
},
|
|
51
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "48ca7d774fdccf622c3dc6d32364c3e4a17a4bac"
|
|
52
52
|
}
|
package/src/scss/_component.scss
CHANGED
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
.uq-grid-menu {
|
|
6
6
|
box-sizing: border-box;
|
|
7
7
|
display: grid;
|
|
8
|
-
font-family:
|
|
9
|
-
font-size:
|
|
10
|
-
font-weight:
|
|
11
|
-
line-height:
|
|
8
|
+
font-family: var(--uq-font);
|
|
9
|
+
font-size: var(--uq-font-size-m);
|
|
10
|
+
font-weight: var(--uq-font-weight-normal);
|
|
11
|
+
line-height: var(--uq-line-height-long);
|
|
12
12
|
list-style: none;
|
|
13
|
-
gap:
|
|
13
|
+
gap: var(--uq-space-none);
|
|
14
14
|
margin: 0;
|
|
15
15
|
padding: 0;
|
|
16
16
|
align-items: stretch;
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
&__item {
|
|
25
|
-
margin-bottom:
|
|
25
|
+
margin-bottom: var(--uq-space-none);
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
// Behave as 3 column layout by default.
|
|
@@ -41,13 +41,14 @@
|
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
&__link {
|
|
44
|
-
border-bottom: 1px solid
|
|
45
|
-
color:
|
|
44
|
+
border-bottom: 1px solid var(--uq-grey-200);
|
|
45
|
+
color: var(--uq-utility-500);
|
|
46
46
|
display: block;
|
|
47
47
|
font-size: 1.375rem;
|
|
48
|
-
font-weight:
|
|
48
|
+
font-weight: var(--uq-font-weight-normal);
|
|
49
49
|
line-height: normal;
|
|
50
|
-
padding:
|
|
50
|
+
padding: var(--uq-space-m) var(--uq-space-xl) var(--uq-space-m)
|
|
51
|
+
var(--uq-space-m);
|
|
51
52
|
position: relative;
|
|
52
53
|
height: 100%;
|
|
53
54
|
text-decoration: none;
|
|
@@ -64,8 +65,8 @@
|
|
|
64
65
|
}
|
|
65
66
|
|
|
66
67
|
&:hover {
|
|
67
|
-
background-color:
|
|
68
|
-
color:
|
|
68
|
+
background-color: var(--uq-utility-500);
|
|
69
|
+
color: var(--uq-white);
|
|
69
70
|
text-decoration: none;
|
|
70
71
|
|
|
71
72
|
&::after {
|
|
@@ -82,7 +83,7 @@
|
|
|
82
83
|
.uq-grid-menu__link,
|
|
83
84
|
.uq-grid-menu__title,
|
|
84
85
|
.uq-grid-menu__description {
|
|
85
|
-
color:
|
|
86
|
+
color: var(--uq-white);
|
|
86
87
|
text-decoration: none;
|
|
87
88
|
}
|
|
88
89
|
|
|
@@ -95,28 +96,28 @@
|
|
|
95
96
|
}
|
|
96
97
|
|
|
97
98
|
&__title {
|
|
98
|
-
font-weight:
|
|
99
|
+
font-weight: var(--uq-font-weight-normal);
|
|
99
100
|
}
|
|
100
101
|
|
|
101
102
|
&__description {
|
|
102
|
-
color:
|
|
103
|
+
color: var(--uq-grey-700);
|
|
103
104
|
display: block;
|
|
104
105
|
font-size: 0.8rem;
|
|
105
|
-
font-weight:
|
|
106
|
+
font-weight: var(--uq-font-weight-normal);
|
|
106
107
|
line-height: normal;
|
|
107
|
-
margin-top:
|
|
108
|
+
margin-top: var(--uq-space-xxs);
|
|
108
109
|
}
|
|
109
110
|
|
|
110
111
|
&__icon {
|
|
111
112
|
margin-top: -0.3rem;
|
|
112
|
-
margin-right:
|
|
113
|
+
margin-right: var(--uq-space-xs);
|
|
113
114
|
transition: filter 0.2s;
|
|
114
115
|
}
|
|
115
116
|
|
|
116
117
|
// Dark text variant.
|
|
117
118
|
&--dark-text {
|
|
118
119
|
.uq-grid-menu__link {
|
|
119
|
-
color:
|
|
120
|
+
color: var(--uq-grey-900);
|
|
120
121
|
}
|
|
121
122
|
|
|
122
123
|
.uq-grid-menu__icon {
|
|
@@ -127,7 +128,7 @@
|
|
|
127
128
|
}
|
|
128
129
|
|
|
129
130
|
@media only screen and #{core.$screen-md-up} {
|
|
130
|
-
gap:
|
|
131
|
+
gap: var(--uq-space-m);
|
|
131
132
|
}
|
|
132
133
|
}
|
|
133
134
|
|
|
@@ -140,12 +141,12 @@
|
|
|
140
141
|
@extend %light-palette;
|
|
141
142
|
|
|
142
143
|
&:hover {
|
|
143
|
-
background-color:
|
|
144
|
-
color:
|
|
144
|
+
background-color: var(--uq-white);
|
|
145
|
+
color: var(--uq-utility-500);
|
|
145
146
|
|
|
146
147
|
.uq-grid-menu__description {
|
|
147
|
-
background-color:
|
|
148
|
-
color:
|
|
148
|
+
background-color: var(--uq-white);
|
|
149
|
+
color: var(--uq-utility-500);
|
|
149
150
|
}
|
|
150
151
|
}
|
|
151
152
|
}
|
|
@@ -160,12 +161,12 @@
|
|
|
160
161
|
@extend %dark-palette;
|
|
161
162
|
|
|
162
163
|
&:hover {
|
|
163
|
-
background-color:
|
|
164
|
-
color:
|
|
164
|
+
background-color: var(--uq-utility-500);
|
|
165
|
+
color: var(--uq-white);
|
|
165
166
|
|
|
166
167
|
.uq-grid-menu__description {
|
|
167
|
-
background-color:
|
|
168
|
-
color:
|
|
168
|
+
background-color: var(--uq-utility-500);
|
|
169
|
+
color: var(--uq-white);
|
|
169
170
|
}
|
|
170
171
|
}
|
|
171
172
|
}
|
|
@@ -176,7 +177,7 @@
|
|
|
176
177
|
.section--background-image {
|
|
177
178
|
.uq-grid-menu {
|
|
178
179
|
&__link {
|
|
179
|
-
border-color:
|
|
180
|
+
border-color: color-mix(in srgb, var(--uq-white) 40%, transparent);
|
|
180
181
|
}
|
|
181
182
|
}
|
|
182
183
|
}
|